360viewer 中文文档教程
Kaleidoscope
一个可嵌入、轻量级、无依赖的 360º 视频/图像查看器
Usage
将脚本添加到您的页面：
<script src="dist/kaleidoscope.min.js"></script>
Videos
var viewer = new Kaleidoscope.Video({source: 'equirectangular-video.mp4', containerId: '#target'});
viewer.render();
Images
var viewer = new Kaleidoscope.Image({source: 'equirectangular-image.jpg', containerId: '#target'});
viewer.render();
Documentation
Kaleidoscope.Video
let viewer = new Kaleidoscope.Video(options)
- options
- Object.
options.source 要播放的源视频。
options.containerId 是您要渲染 360 的地方，这将通过 document.querySelector 检索，当您调用 render() 时360 画布将附加到它。
options.container 将 360 画布附加到的 HTML 元素。 您应该始终传递 containerId 或 container。
options.height 360 画布的高度。 默认为 360。
options.width 360 画布的宽度。 默认为 640。
options.video 一个视频标签元素，用作源并在 360 画布中呈现。
options.autoplay 在渲染后自动播放视频。 在移动设备上不起作用。 默认为 true。
options.muted 定义视频是否应该开始静音。 默认为 false。
options.loop 定义视频是否循环播放。 默认为 false。
options.onError 出错时的回调。
viewer.render() 在定义的 containerId 或 container 中呈现画布。
viewer.play() 开始当前视频。 对手机有用。
viewer.pause() 暂停当前视频。
Kaleidoscope.Image
let viewer = new Kaleidoscope.Image(options)
- options
- Object.
options.source 要渲染的图像源。
options.containerId 是您要渲染 360 的地方，这将通过 document.querySelector 检索，当您调用 render() 时360 画布将附加到它。
options.container 将 360 画布附加到的 HTML 元素。 您应该始终传递 containerId 或 container。
options.height 360 画布的高度。 默认为 360。
options.width 360 画布的宽度。 默认为 640。
options.onError 出错时的回调。
viewer.render() 在定义的 containerId 或 container 中呈现画布。
Supported Browsers
- Google Chrome
- Microsoft Edge
- Firefox
- Internet Explorer 11
- Safari
- Chrome Android*
- Safari iOS
*最新版本。
Known issues
如果视频是从不同的域提供的，则 360 度视频在 Safari、IE 11、Microsoft Edge、Android 和 iOS 中不起作用，因为某些 CORS 实现错误
Kaleidoscope
An embeddable, lightweight, dependency-free 360º video/image viewer
Usage
Add the script to your page:
<script src="dist/kaleidoscope.min.js"></script>
Videos
var viewer = new Kaleidoscope.Video({source: 'equirectangular-video.mp4', containerId: '#target'});
viewer.render();
Images
var viewer = new Kaleidoscope.Image({source: 'equirectangular-image.jpg', containerId: '#target'});
viewer.render();
Documentation
Kaleidoscope.Video
let viewer = new Kaleidoscope.Video(options)
- options
- Object.
options.source source video to be played.
options.containerId is where you want to render the 360, this is going to be retrieved via document.querySelector and when you call render() the 360 canvas will be append to it.
options.container HTML element to attach the 360 canvas to. You should always either pass a containerId or a container.
options.height height of the 360 canvas. Defaults to 360.
options.width width of the 360 canvas. Defaults to 640.
options.video a video tag element to be used as source and rendered in the 360 canvas.
options.autoplay to autoplay the video once rendered. Doesn't work on mobile. Defaults to true.
options.muted to define if the video should start muted. Defaults to false.
options.loop to define if the video should loop. Defaults to false.
options.onError callback to when something goes wrong.
viewer.render() renders the canvas in the defined containerId or container.
viewer.play() starts the current video. Useful for mobile.
viewer.pause() pauses the current video.
Kaleidoscope.Image
let viewer = new Kaleidoscope.Image(options)
- options
- Object.
options.source source of the image to be rendered.
options.containerId is where you want to render the 360, this is going to be retrieved via document.querySelector and when you call render() the 360 canvas will be append to it.
options.container HTML element to attach the 360 canvas to. You should always either pass a containerId or a container.
options.height height of the 360 canvas. Defaults to 360.
options.width width of the 360 canvas. Defaults to 640.
options.onError callback to when something goes wrong.
viewer.render() renders the canvas in the defined containerId or container.
Supported Browsers
- Google Chrome
- Microsoft Edge
- Firefox
- Internet Explorer 11
- Safari
- Chrome Android*
- Safari iOS
*Most recent versions.
Known issues
360 videos doesn't work in Safari, IE 11, Microsoft Edge, Android and iOS if the video is served from a different domain, due some CORS implementation bugs
