videojs-panorama icon indicating copy to clipboard operation
videojs-panorama copied to clipboard

Many videojs-panorama in one page

Open vulieumang opened this issue 7 years ago • 1 comments

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();
                }
            });
        }

image 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

vulieumang avatar Jul 12 '17 09:07 vulieumang

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.

yanwsh avatar Jul 14 '17 17:07 yanwsh