videojs-panorama
videojs-panorama copied to clipboard
Many videojs-panorama in one page
I want have grid video 360 on site, so i use for to loop element by class name
var elements = document.getElementsByClassName("video-js"),
elementsLen = elements.length;
for (i = 0, j = 0; i < elementsLen; i++) {
var player = window.player = videojs(document.getElementsByClassName('video-js')[i], {}, function () {
window.addEventListener("resize", function () {
var canvas = player.getChild('Canvas');
if(canvas) canvas.handleResize();
});
});
player.panorama({
clickToToggle: (!isMobile()),
clickAndDrag: true,
autoplay: false,
autoMobileOrientation: true,
initFov: 100,
NoticeMessage: (isMobile())? "please move your phone" : "please use your mouse drag and drop the video",
callback: function () {
// if(!isMobile()) player.play();
}
});
}
It can play but have large error and performance very slow, (i think reason is threejs duplicate.)
Can you tell me one way to play many video 360 in one page?
Thank for help
I test your code on my laptop, and didn't have your issues. Could you email me full code, so I can debug what's wrong. Thanks for reporting.