视频播放-关闭自动播放功能

front/src/views/home/infrastructurePage.vue

@@ -561,7 +561,11 @@
         <template #footer></template>
         <div style="width: 100%; display: flex; justify-content: center">
           <div style="width: 100%; height: 100%">
-            <vue3VideoPlay v-bind="options" />
+            <vue3VideoPlay v-bind="options"
+              @play="onPlay"
+              @pause="onPause" 
+              @timeupdate="onTimeupdate" 
+              @canplay="onCanplay"/>
           </div>
         </div>
       </a-modal>
@@ -628,7 +632,7 @@
             style="width: 100%; height: 100%"
           >
             <p></p>
-            <vue3VideoPlay v-bind="item.options" />
+            <vue3VideoPlay v-bind="item.options"/>
           </div>
         </div>
         <a-pagination
@@ -753,7 +757,8 @@
     muted: false, //静音
     webFullScreen: false,
     speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-    autoPlay: isXiHaiAn, //自动播放
+    // autoPlay: isXiHaiAn, //自动播放
+    autoPlay: false, //自动播放
     loop: false, //循环播放
     mirror: false, //镜像画面
     ligthOff: false, //关灯模式
@@ -973,11 +978,14 @@
     const param = {
       key: id,
     }
-    getStreamByChannelCode(param).then((res) => {
-      console.log(res)
+    // getStreamByChannelCode(param).then((res) => {
+    //   console.log(res)
+    //   visible.value = true
+    //   options.src = res.data.data
+    // })
     visible.value = true
-      options.src = res.data.data
-    })
+    options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
+
   }
   // 打开图片预览
   const openPicture = (id) => {
@@ -1877,6 +1885,28 @@
     getCamera()
     // this.getTableList()
   }
+
+  // 视频播放 todo
+  // const vue3VideoPlay = ref(null)
+  const onPlay = (ev) => {
+    console.log('播放')
+    // message.warning('视频播放')
+    // nextTick(() => {
+    //   // console.log('vue3VideoPlay.value.state------------>', vue3VideoPlay.value.state);
+    // })
+  }
+  const onPause = (ev) => {
+    console.log(ev, '暂停')
+  }
+
+  const onTimeupdate = (ev) => {
+    console.log(ev, '时间更新')
+    onPause(ev)
+  }
+  const onCanplay = (ev) => {
+    console.log(ev, '可以播放')
+  }
+ 
 </script>
 <style lang="less" scoped>
   .infrastructrueBox {