Update video-play.tsx

src/views/attend-class/component/video-play.tsx

@@ -57,7 +57,7 @@ export default defineComponent({
     const { item, isEmtry } = toRefs(props);
     const videoFroms = reactive({
       paused: true,
-      speedInKbps: '0 KB/s',
+      speedInKbps: '',
       currentTimeNum: 0,
       currentTime: '00:00',
       durationNum: 0,
@@ -228,11 +228,11 @@ export default defineComponent({
       // 设定一个检测缓存停止的时间间隔，这里我们设置为2500毫秒（2秒）
       const BUFFER_CHECK_INTERVAL = 2500;
 
-      function resetDownloadSpeed() {
+      function resetDownloadSpeed(time = 1500) {
         timer = setTimeout(() => {
           // displayElement.textContent = `视屏下载速度: 0 KB/s`;
           videoFroms.speedInKbps = `0 KB/s`;
-        }, 1500);
+        }, time);
       }
 
       function buffterCatch() {
@@ -267,12 +267,17 @@ export default defineComponent({
 
           console.log(timeDiff, bytesDiff, speed);
 
-          const kbps = speed / 1024;
-          const speedInKbps = kbps.toFixed(2); // 转换为千字节每秒并保留两位小数
-          if (kbps > 1024) {
-            videoFroms.speedInKbps = `${Number((kbps / 1024).toFixed(2))} M/s`;
-          } else {
-            videoFroms.speedInKbps = `${Number(speedInKbps)} KB/s`;
+          console.log(element.paused, 'element.paused');
+          if (!element.paused) {
+            const kbps = speed / 1024;
+            const speedInKbps = kbps.toFixed(2); // 转换为千字节每秒并保留两位小数
+            if (kbps > 1024) {
+              videoFroms.speedInKbps = `${Number(
+                (kbps / 1024).toFixed(2)
+              )} M/s`;
+            } else {
+              videoFroms.speedInKbps = `${Number(speedInKbps)} KB/s`;
+            }
           }
 
           previousBytesLoaded = currentBytesLoaded;
@@ -280,6 +285,7 @@ export default defineComponent({
 
           // 如果1秒钟没有返回就重置数据
           clearTimeout(timer);
+
           resetDownloadSpeed();
         }
 
@@ -292,6 +298,15 @@ export default defineComponent({
 
         buffterCatch();
       });
+
+      element.addEventListener('pause', () => {
+        clearTimeout(timer);
+        // 如果有缓存检测计时器，则清除它
+        if (bufferTimeout) {
+          clearTimeout(bufferTimeout);
+        }
+        videoFroms.speedInKbps = '';
+      });
     };
 
     onMounted(() => {