@thiagopnts/kaleidoscope v0.0.1
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.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.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
8 years ago