zc

src/components/mpegtsVideo/mpegtsVideo.vue

@@ -5,11 +5,11 @@
 @time: 2023/11/30
 @引入:
 
-  <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+  <mpegts-video :videoProps="item" ref="mpegtsRef" v-for="(item,index) in videoList" :key="index"></mpegts-video>
 
     或
 
-  <mpegts-video style="display: inline-block" :videoProps="videoProps"></mpegts-video>
+  <mpegts-video :videoProps="videoProps" ref="mpegtsRef"></mpegts-video>
 
   import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
 
@@ -26,6 +26,20 @@
     url:""        //(视频地址:必传)
   }
 
+  //父类方法-用于全屏窗口切换
+  fullScreenWindowSwitch(data){
+    let self = this;
+    for(let i=0;i<self.$refs.mpegtsRef.length;i++){
+      if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
+        if(data.type){
+          self.$refs.mpegtsRef[i].stopVideo();
+        }else{
+          self.$refs.mpegtsRef[i].playVideo();
+        }
+      }
+    }
+  },
+
 -->
 
 <template>
@@ -34,12 +48,12 @@
        :style="'height:'+videoData.height+'px;width:'+videoData.width+'px;line-height:'+videoData.height+'px;'"
        v-if="reconnectType">连接已断开,请联系管理员或等待重连</p>
     <video
+      :class="showAllType?'showAllVideo':''"
       :id="videoData.cameraIndexCode" :ref="videoData.cameraIndexCode"
       :width="videoData.width" :height="videoData.height"
       autoplay controls  muted >
     </video>
-    <!--<img :src="videoImg" style="width:600px;height:300px;">-->
-    <p class="el-icon-full-screen full-screen-button" @click="fullScreen"></p>
+    <p :class="showAllType?'showAllButton':''" class="el-icon-full-screen full-screen-button" @click="fullScreen"></p>
   </div>
 </template>
 <script>
@@ -57,7 +71,8 @@
         decodedFramesNum:null,//断流计数器
         reconnectType:false,//重连状态
         videoImg:null,
-        errorNum:0//异常次数
+        errorNum:0,//异常次数
+        showAllType:false,
       }
     },
     created(){
@@ -74,9 +89,27 @@
       this.initMpegts();
     },
     methods:{
+      //暂停流-供父调用
+      stopVideo(){
+        if(this.flvPlayer){
+          this.flvPlayer.pause();
+          this.flvPlayer.unload();
+          this.flvPlayer.detachMediaElement();
+          this.flvPlayer.destroy();
+          this.flvPlayer = null;
+        }
+      },
+      //播放流-供父调用
+      playVideo(){
+        if(!this.flvPlayer){
+          this.initMpegts();
+        }
+      },
       //窗口全屏
       fullScreen(){
-        this.$refs[this.videoData.cameraIndexCode].webkitRequestFullScreen();
+        this.$set(this,'showAllType',!this.showAllType);
+        this.$parent.fullScreenWindowSwitch({type:this.showAllType,cameraIndexCode:this.videoData.cameraIndexCode});
+        // this.$refs[this.videoData.cameraIndexCode].webkitRequestFullScreen();
       },
       //截取封面
       videoCover(){
@@ -163,7 +196,7 @@
         this.flvPlayer = null;
         setTimeout(function(){
           self.initMpegts();
-        },2000);
+        },10000);
       },
       //断开视频流
       videoOff(){
@@ -193,11 +226,29 @@
 </script>
 <style scoped lang="scss">
   .mpegtsVideo{
+    overflow: hidden;
+    display: inline-block;
     *{
       margin:0;
       padding:0;
     }
     position: relative;
+    .showAllVideo{
+      z-index:9999999999;
+      position: fixed;
+      top:0;
+      left:0;
+      width:100%;
+      height:100%;
+    }
+    .showAllButton{
+      font-size:40px!important;
+      height:60px!important;
+      width:60px!important;
+      line-height:60px!important;
+      z-index:99999999999!important;
+      position: fixed!important;
+    }
     .reconnectText{
       position: absolute;
       color:#fff;

src/components/newSubVideoComponent.vue

@@ -6,7 +6,7 @@
         <div class="sub-video-box">
           <p class="sub-name-p">{{item.roomNum?item.subName+'('+item.roomNum+')':item.subName}}</p>
           <!--<H5PlayerVideo class="sub-video-box" :videoProps="item.videoData"></H5PlayerVideo>-->
-          <mpegts-video style="display: inline-block" :videoProps="item.videoData"  :key="index"></mpegts-video>
+          <mpegts-video :videoProps="item.videoData" ref="mpegtsRef"></mpegts-video>
         </div>
         <div class="sensor-max-box">
           <div class="sensor-box" v-for="(minItem,minIndex) in item.sensorList" :key="minIndex">
@@ -66,6 +66,19 @@
       this.timerPlay()
     },
     methods: {
+      //父类方法-用于全屏窗口切换
+      fullScreenWindowSwitch(data){
+        let self = this;
+        for(let i=0;i<self.$refs.mpegtsRef.length;i++){
+          if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
+            if(data.type){
+              self.$refs.mpegtsRef[i].stopVideo();
+            }else{
+              self.$refs.mpegtsRef[i].playVideo();
+            }
+          }
+        }
+      },
       //初始化
       initialize() {
         laboratorySubRelInfoSelectInfoAndSensor(this.queryParams).then((res) => {

src/views/emergencyManagement/newPageComponent/newVideoComponent.vue

@@ -5,7 +5,7 @@
       <p class="left-button-p el-icon-arrow-left" v-if="dataList[2]" @click="leftButton()"></p>
     </div>
     <div class="video-max-big-box">
-      <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+      <mpegts-video :videoProps="item" ref="mpegtsRef" v-for="(item,index) in videoList" :key="index"></mpegts-video>
       <!--<H5PlayerVideo class="sub-video-box" :videoProps="item"-->
        <!--v-for="(item,index) in videoList" :key="index"></H5PlayerVideo>-->
       <p class="null-text-p">该实验室未配置监控设备</p>
@@ -47,6 +47,19 @@
 
     },
     methods:{
+      //父类方法-用于全屏窗口切换
+      fullScreenWindowSwitch(data){
+        let self = this;
+        for(let i=0;i<self.$refs.mpegtsRef.length;i++){
+          if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
+            if(data.type){
+              self.$refs.mpegtsRef[i].stopVideo();
+            }else{
+              self.$refs.mpegtsRef[i].playVideo();
+            }
+          }
+        }
+      },
       //初始化 查询实验室摄像头
       initialize(data){
         let self = this;

src/views/emergencyManagement/pageComponent/videoListComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="videoListComponent">
     <div class="max-big-for-box">
-      <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+      <mpegts-video :videoProps="item" ref="mpegtsRef" v-for="(item,index) in videoList" :key="index"></mpegts-video>
       <!--<H5PlayerVideo style="margin:10px 0 0;"-->
                      <!--v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>-->
       <img v-if="!videoList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">
@@ -61,6 +61,19 @@
 
     },
     methods:{
+      //父类方法-用于全屏窗口切换
+      fullScreenWindowSwitch(data){
+        let self = this;
+        for(let i=0;i<self.$refs.mpegtsRef.length;i++){
+          if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
+            if(data.type){
+              self.$refs.mpegtsRef[i].stopVideo();
+            }else{
+              self.$refs.mpegtsRef[i].playVideo();
+            }
+          }
+        }
+      },
       //查询实验室摄像头
       initialize(item){
         this.$set(this,'floorId',item.floorId);

src/views/videoSurveillance/pageComponent/videoComponent.vue

@@ -13,7 +13,7 @@
       <!--<p class="name-p" style="margin-left:10px;">人</p>-->
     </div>
     <div class="video-max-big-box">
-      <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+      <mpegts-video :videoProps="item" ref="mpegtsRef" v-for="(item,index) in videoList" :key="index"></mpegts-video>
       <!--<H5PlayerVideo style="margin:20px 28px 0 0 ;"-->
                      <!--v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>-->
       <img v-if="!videoList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">
@@ -73,6 +73,19 @@
 
     },
     methods:{
+      //父类方法-用于全屏窗口切换
+      fullScreenWindowSwitch(data){
+        let self = this;
+        for(let i=0;i<self.$refs.mpegtsRef.length;i++){
+          if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
+            if(data.type){
+              self.$refs.mpegtsRef[i].stopVideo();
+            }else{
+              self.$refs.mpegtsRef[i].playVideo();
+            }
+          }
+        }
+      },
       //刷新地址
       getAddress(list){
         this.$set(this,'addressList',list);