Valiant360360度视频播放器
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');
评论