Просмотр исходного кода

fix
1. 多次播放功能优化

kindring 1 год назад
Родитель
Сommit
fe8f79c21f
2 измененных файлов с 26 добавлено и 9 удалено
  1. 5 2
      web_src/src/components/dialog/rtcPlayer.vue
  2. 21 7
      web_src/src/components/live.vue

+ 5 - 2
web_src/src/components/dialog/rtcPlayer.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="rtcPlayer">
-        <video ref="webrtcPlayer" class='webRtcPlayerBox' controls autoplay style="text-align:left;">
+        <video ref="webrtcPlayer" class='webRtcPlayerBox' @click.prevent="videoClick" controls autoplay style="text-align:left;">
             Your browser is too old which doesn't support HTML5 video.
           </video>
     </div>
@@ -94,7 +94,7 @@ export default {
 
           this.webrtcPlayer.setLog('info',(tag, msg) => {
 
-              console.log('收到zlm log');
+              // console.log('收到zlm log');
               if(enableDebug){
                   console.log(tag, msg);
               }
@@ -148,6 +148,9 @@ export default {
             console.log(message)
           }
           this.$emit("eventCallback", type, message);
+        },
+        videoClick(){
+          console.log(`videoClick`);
         }
     },
     destroyed() {

+ 21 - 7
web_src/src/components/live.vue

@@ -47,6 +47,7 @@ import DeviceTree from './common/DeviceTree.vue'
 import {exitFullscreen, launchIntoFullscreen} from "@/until/dom";
 import rtcPlayer from "@/components/dialog/rtcPlayer.vue";
 import handle from "@/until/handle";
+import {sleep} from "@/until/time";
 
 
 export default {
@@ -70,7 +71,9 @@ export default {
       asideHide: true,// 是否隐藏侧边栏
       isFullScreen: false,// 是否全屏
       //channel
-      loading: false
+      loading: false,
+      isPlay: false,// 是否已经开始推流
+
     };
   },
   mounted() {
@@ -176,21 +179,23 @@ export default {
         this.setPlayUrl(videoUrl, idxTmp);
         // 添加监听
         setTimeout(() => {
-          this.loadSsrcList()
+          this.loadSsrcList();
+          this.autoLoad();
         }, 10 * 1000)
       } else {
         this.$message.error(res.data.msg);
       }
 
     },
-    setPlayUrl(url, idx) {
+    async setPlayUrl(url, idx) {
+
       console.log("设置播放地址:" + url + " : " + idx);
+      this.$set(this.videoUrl, idx, "");
+      await sleep(700);
       this.$set(this.videoUrl, idx, url)
       let _this = this
-      setTimeout(() => {
-        window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
-      }, 100)
-
+      await sleep(100);
+      window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
     },
     checkPlayByParam() {
       let {deviceId, channelId} = this.$route.query
@@ -253,7 +258,16 @@ export default {
     addEventHandle(){
 
     },
+    autoLoad(){
+      if(!this.isPlay){
+        return console.log(`暂未开始推流`)
+      }
 
+      this.updateLooper = setTimeout(() => {
+        this.loadSsrcList();
+        this.autoLoad();
+      }, 10 * 1000);
+    },
     // 加载当前推流的情况
     async loadSsrcList(){
       let [err,res] = await handle(this.$axios.axios({