zc

src/views/comprehensive/laboratoryManagement/subject/index.vue

@@ -177,7 +177,8 @@
               <p class="top-title">当前位置：{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</p>
               <div class="video-for-max-box" v-if="checkedSubject.videoData[0]">
                 <div class="switch-for-big-box" v-for="(item,index) in checkedSubject.videoData" :key="index">
-                  <video :id="item.divId" ref="videoRef" autoplay controls  muted width="490px" height="262px"></video>
+                  <video :id="item.divId" ref="videoRef" autoplay controls :poster="videoCover"
+                         muted width="490px" height="262px"></video>
                   <p class="el-icon-full-screen position-p" @click="videoFullScreen(index)"></p>
                 </div>
               </div>
@@ -290,6 +291,7 @@ export default {
   },
   data(){
     return{
+      videoCover:window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + localStorage.getItem('videoCover'),
       pageType:1,
       // 遮罩层
       loading: true,

src/views/newEvacuationBigData.vue

@@ -321,7 +321,8 @@
             </div>
             <div class="video-mx-big-box" v-show="subjectVideoType"
                  v-for="(item,index) in subjectVideoList" :key="index">
-              <video class="video-box" :id="item.divId" ref="videoRef" autoplay controls  muted width="368px" height="210px"></video>
+              <video class="video-box" :id="item.divId" ref="videoRef" :poster="videoCover"
+                     autoplay controls  muted width="368px" height="210px"></video>
             </div>
           </div>
           <div class="video-max-big-for-box" >
@@ -449,6 +450,7 @@
     },
     data() {
       return {
+        videoCover:window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + localStorage.getItem('videoCover'),
         //当前路由状态
         routeType:false,
         //全局MQTT相关
@@ -750,9 +752,11 @@
       //实验室视频展开收起开关
       subjectVideoCheckClick(){
         if(this.subjectVideoType){
+          console.log('关闭');
           this.videoOff('subject')
         }else{
           if(this.subjectVideoIds[0]){
+            console.log('开启');
             this.startUrl('subject');
           }else{
             this.msgError('该实验室未配置摄像头')
@@ -1418,7 +1422,7 @@
               // isLive: true, //=> 是否为直播流
               // hasAudio: false, //=> 是否开启声音
               type: 'flv', //媒体类型 flv 或 mp4
-              url: videoList[i].videoUrl //视频流地址
+              url: videoList[i].videoUrl, //视频流地址
             },
             {
               enableStashBuffer: true,//启用 IO 存储缓冲区。 如果您需要实时流播放（最小延迟），请设置为 false，但如果存在网络抖动，则可能会停止。
@@ -1454,36 +1458,35 @@
       videoOff(type){
         let self = this;
         if(type == 'subject'){
-          if(self.subjectVideoList[0]){
-            for(let i=0;i<self.subjectVideoList.length;i++){
-              if(self.subjectVideoList[i].flvPlayer){
-                console.log('关闭实验室视频流');
-                self.subjectVideoList[i].flvPlayer.pause();
-                self.subjectVideoList[i].flvPlayer.unload();
-                self.subjectVideoList[i].flvPlayer.detachMediaElement();
-                self.subjectVideoList[i].flvPlayer.destroy();
-                self.subjectVideoList[i].flvPlayer = null;
+          if(self.subjectVideoPlayList[0]){
+            for(let i=0;i<self.subjectVideoPlayList.length;i++){
+              if(self.subjectVideoPlayList[i].flvPlayer){
+                self.subjectVideoPlayList[i].flvPlayer.pause();
+                self.subjectVideoPlayList[i].flvPlayer.unload();
+                self.subjectVideoPlayList[i].flvPlayer.detachMediaElement();
+                self.subjectVideoPlayList[i].flvPlayer.destroy();
+                self.subjectVideoPlayList[i].flvPlayer = null;
               }
             }
             self.$set(self,'subjectVideoList',[]);
+            self.$set(self,'subjectVideoPlayList',[]);
             self.$set(self,'subjectVideoType',false);
           }
         }else if(type == 'floor'){
-          if(self.floorVideoList[0]){
-            for(let i=0;i<self.floorVideoList.length;i++){
-              if(self.floorVideoList[i].flvPlayer){
-                console.log('关闭楼层视频流');
-                self.floorVideoList[i].flvPlayer.pause();
-                self.floorVideoList[i].flvPlayer.unload();
-                self.floorVideoList[i].flvPlayer.detachMediaElement();
-                self.floorVideoList[i].flvPlayer.destroy();
-                self.floorVideoList[i].flvPlayer = null;
+          if(self.floorVideoPlayList[0]){
+            for(let i=0;i<self.floorVideoPlayList.length;i++){
+              if(self.floorVideoPlayList[i].flvPlayer){
+                self.floorVideoPlayList[i].flvPlayer.pause();
+                self.floorVideoPlayList[i].flvPlayer.unload();
+                self.floorVideoPlayList[i].flvPlayer.detachMediaElement();
+                self.floorVideoPlayList[i].flvPlayer.destroy();
+                self.floorVideoPlayList[i].flvPlayer = null;
               }
             }
             self.$set(self,'floorVideoList',[]);
+            self.$set(self,'floorVideoPlayList',[]);
             self.$set(self,'floorVideoType',false);
           }
-
         }
       },
       /*********************************** 火焰报警-相关接口 *********************************/