Procházet zdrojové kódy

fix: 时间步进逻辑剥离直播组件

wyf před 1 rokem
rodič
revize
6962c73303

+ 3 - 17
src/components/LiveVideo/LiveVideo.vue

@@ -22,29 +22,18 @@
 
   const props = defineProps<{
     url: string;
-    secMargin?: number;
   }>();
 
   const emit = defineEmits(['timeUpdate']);
 
-  // /live/video/aa.flv?starttime=202410101001}
-
   let player: mpegts.Player | null;
 
   const loadingText = computed(() => {
     if (restartNum.value === 0) return '视频加载中...';
     return `正在尝试第${restartNum.value}次重连...`;
   });
-
-  let min = 0;
   const handleTimeUpdate = (event) => {
-    if (props.secMargin !== undefined) {
-      const currentTime = Math.floor(event.target.currentTime) + props.secMargin;
-      if (currentTime > min && currentTime % 60 === 0) {
-        min = currentTime;
-        emit('timeUpdate');
-      }
-    }
+    emit('timeUpdate', event.target.currentTime);
   };
 
   const initPlay = () => {
@@ -61,11 +50,8 @@
       },
     );
 
-    if (props.secMargin !== undefined) {
-      min = 0;
-      videoElement.removeEventListener('timeupdate', handleTimeUpdate);
-      videoElement.addEventListener('timeupdate', handleTimeUpdate);
-    }
+    videoElement.removeEventListener('timeupdate', handleTimeUpdate);
+    videoElement.addEventListener('timeupdate', handleTimeUpdate);
 
     player.attachMediaElement(videoElement);
     player.load();

+ 11 - 8
src/views/datamanager/playback/components/NvrCameraView.vue

@@ -22,12 +22,7 @@
       >
     </div>
     <div style="width: 960px; height: 540px">
-      <LiveVideo
-        v-if="videoUrl"
-        :url="videoUrl"
-        :sec-margin="secondMargin"
-        @time-update="handleTimeUpdate"
-      />
+      <LiveVideo v-if="videoUrl" :url="videoUrl" @time-update="handleTimeUpdate" />
     </div>
     <div class="nvr-slider" v-if="confirmDate">
       <NvrSlider
@@ -142,6 +137,7 @@
       }
     }
     getReplayNvr(nvrParams).then((res) => {
+      min = 0;
       nvrUrl.value = res.data;
     });
   };
@@ -203,8 +199,15 @@
     }
   };
 
-  const handleTimeUpdate = () => {
-    nvrSliderRef.value.pushTime();
+  let min = 0;
+  const handleTimeUpdate = (playSeconds: number) => {
+    if (secondMargin.value !== undefined) {
+      const currentTime = Math.floor(playSeconds) + secondMargin.value;
+      if (currentTime > min && currentTime % 60 === 0) {
+        min = currentTime;
+        nvrSliderRef.value.pushTime();
+      }
+    }
   };
 
   const handleDownloadNvr = () => {