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');