video.js

web/public/index.html

@@ -38,6 +38,7 @@
     <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/jquery-2.1.1.min.js" class="build keep"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/player-0.0.12.min.js" class="build keep"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/stats.min.js" class="build keep"></script>
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/video.min.js" class="build keep"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/Tween.js"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/myShow.js"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/manage.js"></script>

web/public/static/js/overlay.js

@@ -104,24 +104,42 @@ var initOverlay = function(THREE){
         
         if(info.media){ 
             if(info.media.includes('video')){
-                var video = $('<video controls="controls" loop x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"></video>')[0]
-                video.setAttribute("crossOrigin", 'Anonymous')//要在src设置好前解决跨域
-                $(video).on('contextmenu', function () { return false; });//禁止右键点击出
-                 
-                video.src = manage.dealURL(info.file)  ;
-                info.media = video;
-                info.type = "video"
+                var id = "video"+ this.sid  
+                var video = $(`<video id="${ id }" style='display:none' controls="controls" loop autoplay x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"></video>`)[0]
+                if(!window.isEdit){
+                    $("body").append(video)
                 
-                video.addEventListener('loadeddata', ()=>{
-                    // console.log(this.sid + " loaded!!!")
-                })
+                    this.videoPlayer = videojs(id, {}, function onPlayerReady() {
+                        videojs.log('Your player is ready!');
+                                   
+                        // In this context, `this` is the player that was created by Video.js.
+                        this.play();
+                  
+
+                        // How about an event listener?
+                        this.on('ended', function() {
+                            videojs.log('Awww...over so soon?!');
+                        });
+                    });
+                }   
                 
                 this.hideWhenPlayDone && video.addEventListener('ended', ()=>{
                     this.visible = false
                 })
-                
-                
-                
+                video.setAttribute("crossOrigin", 'Anonymous')
+                //要在src设置好前解决跨域
+                $(video).on('contextmenu', function() {
+                    return false;
+                });
+                //禁止右键点击出
+
+                video.src = manage.dealURL(info.file);
+                info.media = video;
+                info.type = "video"
+
+                /* video.addEventListener('loadeddata', ()=>{
+                    console.log(this.sid + " loaded!!!")
+                }) */
                 video.volume = 0
                 video.muted = true
                 if(info.loop == false){
@@ -345,15 +363,15 @@ var initOverlay = function(THREE){
         
         
         if(!state || state == 'stop'){
-            this.plane.material.map.image.pause()
+            this.videoPlayer.pause()
             if(state == 'stop'){
-                this.plane.material.map.image.currentTime = 0;
+                this.videoPlayer.currentTime(0) 
                 this.playCount = 0
             }
             //console.log("pause")
         }else if(state && (this.loop !== false || this.playCount == 0 || this.plane.material.map.image.currentTime<this.plane.material.map.image.duration)
           && (!this.playPanos || this.playPanos.find(pano=>player.currentPano == pano)  )){ 
-            this.plane.material.map.image.play()
+            this.videoPlayer.play()
             this.playCount = this.playCount ? (this.playCount+1) : 1
             //console.log("play")
         }