change player

src/components/VideoPlayer/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isFailed">
+  <div v-if="isFailed && useEmpty">
     <slot name="empty" />
   </div>
   <div v-else :id="getPlayerId" />
@@ -14,6 +14,10 @@ export default defineComponent({
     options: {
       type: Object,
       default: () => {}
+    },
+    useEmpty: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['timeUpdate', 'video-status'],
@@ -41,8 +45,26 @@ export default defineComponent({
           duration
         })
       },
+      pause(player, e) {
+        const currentTime = player.getCurrentTime()
+        const duration = player.getDuration()
+        emit('video-status', {
+          status: 'pause',
+          currentTime,
+          duration
+        })
+      },
+      play(player, e) {
+        const currentTime = player.getCurrentTime()
+        const duration = player.getDuration()
+        emit('video-status', {
+          status: 'play',
+          currentTime,
+          duration
+        })
+      },
       error(player, e) {
-        disposeVideo()
+        // disposeVideo()
         isFailed.value = true
       }
     })

src/views/dashboard/components/AirCard.vue

@@ -17,7 +17,7 @@
     </div>
     <div class="card__video">
       <div class="video__item">
-        <VideoPlayer :options="getVideoOptions.inner">
+        <VideoPlayer :options="getVideoOptions.inner" :use-empty="true">
           <template #empty>
             <div class="video__item--empty">
               <img src="@/assets/images/lose-control.png">
@@ -111,7 +111,7 @@ export default {
           height: '100%',
           // source: row?.externalMonitorUrl,
           source: 'http://101.43.84.72:8080/live/34020000001320000001@34020000001320000001.flv',
-          // source: row?.id === 2 ? live1 : video2,
+          // source: 'https://live.play.t-aaron.com/live/THSAl_hd.m3u8',
           isLive: true
         }
         // outer: {

src/views/task-manage/all-task/components/DemandDrawer.vue

@@ -31,9 +31,8 @@
             class="video_content"
             :class="videoShow == 'back' ? 'video_show' : 'video_hidden'"
           >
-            <VideoPlayer :ref="videoRef" :options="getVideoOptions" @time-update="handleOriginTime" @video-status="handleOriginStatus" />
-            <VideoPlayer :ref="aiVideoRef" :options="getVideoAiOptions" @time-update="handleAiTime" @video-status="handleAiStatus" />
-
+            <VideoPlayer ref="videoRef" :options="getVideoOptions" @time-update="handleOriginTime" @video-status="handleOriginStatus" />
+            <VideoPlayer ref="aiVideoRef" :options="getVideoAiOptions" @time-update="handleAiTime" @video-status="handleAiStatus" />
           </div>
         </div>
       </div>
@@ -42,7 +41,7 @@
 </template>
 
 <script>
-import { defineComponent, computed, reactive, toRefs, onMounted, ref, watch } from 'vue'
+import { defineComponent, computed, reactive, toRefs, ref, watch } from 'vue'
 import { Map, View, Feature } from 'ol'
 import 'ol/ol.css'
 import { Tile, Vector as VectorLayer } from 'ol/layer'
@@ -51,9 +50,6 @@ import Point from 'ol/geom/Point'
 import { XYZ, Vector as VectorSource } from 'ol/source'
 import { transform, fromLonLat } from 'ol/proj'
 import { getVectorContext } from 'ol/render'
-import VectorContext from 'ol/render/VectorContext'
-import { Draw } from 'ol/interaction'
-import { toRaw } from '@vue/reactivity'
 import * as control from 'ol/control'
 import { styleList } from '../tools/style.js'
 
@@ -81,7 +77,7 @@ export default defineComponent({
     const data = reactive({
       show: props.visible,
       mapData: null,
-      view: null,
+      mapView: null,
       trackLayer: null,
       trackInfo: null,
       // 轨迹数据
@@ -112,7 +108,8 @@ export default defineComponent({
       videoStatus: {
         status: 'init',
         aiStatus: 'init'
-      }
+      },
+      canSkip: true
     })
 
     /* 获取抽屉的信息 */
@@ -147,13 +144,33 @@ export default defineComponent({
     const aiVideoRef = ref(null)
 
     const handleOriginStatus = function(params) {
-      data.videoStatus.status = params.status
+      switch (params.status) {
+        case 'pause':
+          aiVideoRef.value?.pauseVideo()
+          break
+        case 'play':
+          aiVideoRef.value.playVideo()
+          break
+        case 'ready':
+          data.videoStatus.status = params.status
+          break
+      }
       data.videoInfo = {
         ...params
       }
     }
     const handleAiStatus = function(params) {
-      data.videoStatus.aiStatus = params.status
+      switch (params.status) {
+        case 'pause':
+          videoRef.value?.pauseVideo()
+          break
+        case 'play':
+          videoRef.value.playVideo()
+          break
+        case 'ready':
+          data.videoStatus.aiStatus = params.status
+          break
+      }
       data.aiVideoInfo = {
         ...params
       }
@@ -163,8 +180,12 @@ export default defineComponent({
         ...params
       }
       const len = Math.abs(params.currentTime - data.aiVideoInfo.currentTime)
-      if (params.status === 'skip' || len > 3) {
-        aiVideoRef.value.seekTime(params.currentTime)
+      if ((params.status === 'skip' || len > 3) && data.canSkip) {
+        aiVideoRef.value.seekTime(params.currentTime + 0.1)
+        data.canSkip = false
+        setTimeout(() => {
+          data.canSkip = true
+        }, 200)
       }
     }
     const handleAiTime = function(params) {
@@ -172,8 +193,12 @@ export default defineComponent({
         ...params
       }
       const len = Math.abs(params.currentTime - data.videoInfo.currentTime)
-      if (params.status === 'skip' || len > 3) {
-        videoRef.value.seekTime(params.currentTime)
+      if ((params.status === 'skip' || len > 3) && data.canSkip) {
+        videoRef.value.seekTime(params.currentTime + 0.1)
+        data.canSkip = false
+        setTimeout(() => {
+          data.canSkip = true
+        }, 200)
       }
     }
     /* 播放视频 */
@@ -182,18 +207,16 @@ export default defineComponent({
       aiVideoRef.value.playVideo()
     }
 
-    watch(() => data.videoStatus, (value) => {
-      if (value.status === 'ready' && value.aiStatus === 'ready') {
-        console.log(value, '===================')
+    watch([() => props.visible, () => data.videoStatus], ([visible, status]) => {
+      if (visible) {
+        // initTrack(formatTradeList(data.trackList), 'route')
+      }
+      if (status.status === 'ready' && status.aiStatus === 'ready') {
         startAllVideo()
+        initMap()
+        initTrack(formatTradeList(data.trackList), 'route')
       }
-    })
-
-    onMounted(() => {
-      initMap()
-      // 加载航线
-      initTrack(formatTradeList(data.trackList), 'route')
-    })
+    }, { deep: true })
 
     /* 初始化地图 */
     const initMap = function() {
@@ -206,7 +229,7 @@ export default defineComponent({
         })
       ]
 
-      data.view = new View({
+      data.mapView = new View({
         maxZoom: 18,
         zoom: 5,
         center: transform([118.837886, 32.057175], 'EPSG:4326', 'EPSG:3857')
@@ -214,7 +237,7 @@ export default defineComponent({
       data.mapData = new Map({
         layers: layers,
         target: 'history-map',
-        view: data.view,
+        view: data.mapView,
         controls: control.defaults({
           attribution: false,
           rotate: false,
@@ -267,7 +290,7 @@ export default defineComponent({
         })
       }
       data.mapData.addLayer(vectorLayer)
-      data.view.fit(route, { padding: [50, 50, 50, 50] })
+      data.mapView.fit(route, { padding: [50, 50, 50, 50] })
       vectorLayer.on('postrender', moveFeature.bind())
 
       function moveFeature(event) {