Valiant360

Valiant360 是使用 JS + WebGL 构建的一个浏览器内置 360 度全景视频播放器。

示例代码：

<!-- required libraries -->
<script src="//www.google-analytics.com/analytics.js" async=""></script><script src="js/jquery-1.7.2.min.js"></script>
<script src="js/three.min.js"></script>
 
<!-- Valiant360 plugin -->
<script src="js/jquery.valiant360.min.js"></script>
 
<!-- Valiant360 styles -->
<link rel="stylesheet" type="text/css" href="css/valiant360.css">

  // initialize plugin, default options shown
    $('.valiantContainer').Valiant360({
        crossOrigin: 'anonymous',   // valid keywords: 'anonymous' or 'use-credentials'
        clickAndDrag: false,    // use click-and-drag camera controls
        flatProjection: false,  // map image to appear flat (often more distorted)
        fov: 35,                // initial field of view
        fovMin: 3,              // min field of view allowed
        fovMax: 100,                // max field of view allowed
        hideControls: false,    // hide player controls
        lon: 0,                 // initial lon for camera angle
        lat: 0,                 // initial lat for camera angle
        loop: "loop",           // video loops by default
        muted: true,            // video muted by default
        autoplay: true          // video autoplays by default
    });
    // play video
    $('.valiantContainer').Valiant360('play');
    // pause video
    $('.valiantContainer').Valiant360('pause');
    // load new video file
    $('.valiantContainer').Valiant360('loadVideo', 'path/to/file.mp4');
    // load new photo file
    $('.valiantContainer').Valiant360('loadPhoto', 'path/to/file.jpg');
    // destroy Valiant360 processing/resources (however, will not remove element from the dom. That is left up to you)
    $('.valiantContainer').Valiant360('destroy');