正对门口的时候才触发播放 loop=false

web/public/static/js/main_2020_show.js

@@ -22230,12 +22230,14 @@ window.Modernizr = function(n, e, t) {
                     //window.DownInterface && new DownInterface().state(this,Hot);
                     window.Hotpoint && new Hotpoint().state(this,Hot);
                 }
-                if( this.overlayGroup.children.length){
+                
+                
+                /* if( this.overlayGroup.children.length){
                     this.overlayGroup.children.forEach((overlay)=>{
                         overlay.overlayType == "video"  && overlay.visible  &&  overlay.plane.material.map.image.play()
                     })
                     //this.overlayInitedPlay = true
-                }
+                } */
             }
             ,
 			
@@ -22569,15 +22571,30 @@ window.Modernizr = function(n, e, t) {
                         !this.mouseDown && this.containsMouse && this.updateIntersect(),
                         this.emit(w.ViewChanged),
                         this.intersectHot && this.intersectHot.showTitle() 
+                        
+                    }
+
+                    if(e.cameraChanged){
+                        //this.controlVideosPlay()
+                        
                         for(var i in this.model.hots){
                             this.model.hots[i].update(this.camera)
                         } 
-
+                        
+                        
+                        
+                        if(this.mode == 'panorama')this.overlayGroup.children.forEach(overlay=>{
+                            if(overlay.overlayType == "video"){
+                                if(overlay.visible && overlay.inSight()){
+                                    overlay.videoControl(true) 
+                                }else{
+                                    overlay.videoControl(false) 
+                                }
+                            }
+                        })
+                        
                     }
-
-                    /* if(e.cameraChanged){
-                        this.controlVideosPlay()
-                    } */
+                
 
 
                     this.model.supportsTiles && (this.updateTileDownloader(t),
@@ -22913,10 +22930,10 @@ window.Modernizr = function(n, e, t) {
                 if(this.openOverlay && !overlay)return;
                 var plane = overlay.plane;
                 
-                if(overlay.overlayType == "video"){
+                /* if(overlay.overlayType == "video"){
                     if(plane.material.map.image.paused)plane.material.map.image.play()
                     else plane.material.map.image.pause();
-                }
+                } */
                 
                /*  if(window.EditOverlay &&EditOverlay.editing){
                     if(EditOverlay.editPlane && overlay != EditOverlay.editPlane) EditOverlay.closeOverlayPanel('cancel')
@@ -23286,12 +23303,13 @@ window.Modernizr = function(n, e, t) {
                         C(e)
                         
                          //add:
-                        if(this.mode == "panorama" && this.model.floorLogos){
-                            this.model.floorLogos[0].position.copy(this.model.floorLogos[1].position)
-                            //this.model.adjustfloorLogoHeight()
-                            this.model.changefloorLogoOpa({index:0,opa:1,dur:0});//this.model.floorLogos[0].material.uniforms.opacity.value = 1;
-                            this.model.floorLogos[1].visible = false;
-                            
+                        if(this.mode == "panorama" ){
+                            if(this.model.floorLogos){
+                                this.model.floorLogos[0].position.copy(this.model.floorLogos[1].position)
+                                //this.model.adjustfloorLogoHeight()
+                                this.model.changefloorLogoOpa({index:0,opa:1,dur:0});//this.model.floorLogos[0].material.uniforms.opacity.value = 1;
+                                this.model.floorLogos[1].visible = false;
+                            }
                             
                             updateVideo({type:"flyDone", pano:i})//add
                             Overlay.updateVisibles([this.currentPano])//add
@@ -23670,7 +23688,7 @@ window.Modernizr = function(n, e, t) {
                     }
                     this.overlayGroup.visible = false;
                     this.overlayGroup.children.forEach((overlay)=>{
-                        overlay.overlayType == "video"  &&  overlay.plane.material.map.image.pause()
+                        overlay.videoControl('stop')
                     })
                 }
                 
@@ -31329,9 +31347,10 @@ window.Modernizr = function(n, e, t) {
                     inSight : inSight	//在屏幕范围内可见
                 };
             } 
-         
+            
             
         }
+        window.math = t.exports
     }
     , {
         "../constants": 8,

web/public/static/js/overlay.js

@@ -69,9 +69,18 @@ var initOverlay = function(THREE){
     var Overlay = function(info){ 
         THREE.Object3D.call(this); 
         this.sid = info.sid;
-        if(info.media)this.preDeal(info) 
+        
+        if(info.sid == '1624590736940'){
+            this.visiblePanos = [player.model.panos.index["db8c40d5b3be459695c25d0de45f7b69"]]
+            info.loop = false;
+            this.hideWhenPlayDone = true
+        }
+        
+        if(info.media)this.preDeal(info)
+
         this.build(info);
         this.name = "overlay_"+this.sid;
+        
     }
     Overlay.prototype = Object.create(THREE.Object3D.prototype);
     
@@ -95,7 +104,7 @@ var initOverlay = function(THREE){
         
         if(info.media){ 
             if(info.media.includes('video')){
-                var video = $('<video controls="controls" loop autoplay x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"></video>')[0]
+                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; });//禁止右键点击出
                  
@@ -106,8 +115,19 @@ var initOverlay = function(THREE){
                 video.addEventListener('loadeddata', ()=>{
                     // console.log(this.sid + " loaded!!!")
                 })
+                
+                this.hideWhenPlayDone && video.addEventListener('ended', ()=>{
+                    this.visible = false
+                })
+                
+                
+                
                 video.volume = 0
                 video.muted = true
+                if(info.loop == false){
+                    this.loop = video.loop = false
+                    this.playCount = 0
+                }
                 plane.material.opacity = 1;
             }else if(info.media.includes('photo')){
                 /* var img = new Image();
@@ -253,13 +273,64 @@ var initOverlay = function(THREE){
         
     }
     
+    
+                                   
+    
+     
+    
+    
+    
+    
+    Overlay.prototype.inSight = function(){
+        //var maxAngle = THREE.Math.degToRad( cameraLight.getHFOVFromVFOV(70, player.domElement.clientWidth, app.player.domElement.clientHeight) / 2);
+       
+        var position = this.plane.getWorldPosition()
+        var pos2d = math.getPos2d(position, player.camera, $("#player")[0])
+        if(pos2d.trueSide && pos2d.inSight){
+            
+            /* var cornerPoint = [
+                new THREE.Vector3(-settings.overlay.width/2, settings.overlay.height/2, 0),
+                new THREE.Vector3(settings.overlay.width/2, settings.overlay.height/2, 0),
+                new THREE.Vector3(settings.overlay.width/2, -settings.overlay.height/2, 0),
+                new THREE.Vector3(-settings.overlay.width/2, -settings.overlay.height/2, 0),
+            ]; */  
+            var cornerPoint = [//正对的时候才触发播放,只需要管宽度即可
+                new THREE.Vector3(-settings.overlay.width/2, 0, 0),
+                new THREE.Vector3(settings.overlay.width/2, 0, 0),
+            ];             
+            for(var i=0;i<cornerPoint.length;i++){
+                cornerPoint[i].applyMatrix4(this.plane.matrixWorld);
+                var pos2d = math.getPos2d(cornerPoint[i], player.camera, $("#player")[0])
+                if(!pos2d.trueSide || !pos2d.inSight){
+                    return false
+                }
+            }
+            return true
+        }
+        
+        
+    }
+    
+    
+    
+    
+    
+    
+    
     Overlay.prototype.getVisiblePanos = function(){ 
-        this.visiblePanos = getVisiblePano(this.plane.getWorldPosition(),{model: null});  
+        if(!this.visiblePanos){
+            this.visiblePanos = getVisiblePano(this.plane.getWorldPosition(),{model: null}); 
+        }
+         
         
     }
     Overlay.prototype.updateVisibles = function(panos){ 
         this.visible = !!panos.find(pano=>this.visiblePanos.includes(pano))
-        if(!this.visible && this.overlayType == 'video') this.plane.material.map.image.pause()
+        //if(this.loop) 
+        if(!this.visible && this.overlayType == 'video'){
+            this.videoControl('stop')
+            
+        }
     }    
     Overlay.updateVisibles = function(panos){
         if(panos === true){
@@ -269,6 +340,26 @@ var initOverlay = function(THREE){
         }
     }
     
+    Overlay.prototype.videoControl = function(state){
+        if(this.overlayType != "video")return
+        
+        
+        if(!state || state == 'stop'){
+            this.plane.material.map.image.pause()
+            if(state == 'stop'){
+                this.plane.material.map.image.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.plane.material.map.image.play()
+            this.playCount = this.playCount ? (this.playCount+1) : 1
+            console.log("play")
+        }
+        
+    }
+        
+    
     
     Overlay.prototype.addToLoadQueue = function(){
         if(this.overlayType == 'photo'){