浏览代码

修改视频下行逻辑

lex 11 月之前
父节点
当前提交
d29d83d888
共有 3 个文件被更改,包括 59 次插入3 次删除
  1. 1 1
      public/version.json
  2. 29 1
      src/views/attend-class/component/audio-pay.tsx
  3. 29 1
      src/views/attend-class/component/video-play.tsx

+ 1 - 1
public/version.json

@@ -1 +1 @@
-{"version":1716273600968}
+{"version":1716428718671}

+ 29 - 1
src/views/attend-class/component/audio-pay.tsx

@@ -155,11 +155,30 @@ export default defineComponent({
       let timer: any = null;
       let previousTime = Date.now();
 
+      // 缓存检测状态
+      let isBuffering = false;
+      // 缓存检测计时器
+      let bufferTimeout: any = null;
+      // 设定一个检测缓存停止的时间间隔,这里我们设置为2500毫秒(2秒)
+      const BUFFER_CHECK_INTERVAL = 2500;
+
       function resetDownloadSpeed() {
         timer = setTimeout(() => {
           // displayElement.textContent = `视屏下载速度: 0 KB/s`;
           audioForms.speedInKbps = `0 KB/s`;
-        }, 2000);
+        }, 1500);
+      }
+
+      function buffterCatch() {
+        // 设定一个计时器,检查是否在指定的时间内再次触发了progress事件
+        bufferTimeout = setTimeout(() => {
+          if (isBuffering) {
+            // 如果计时器到达且isBuffering仍为true,则认为缓存停止
+            console.log('停止缓存数据。');
+            isBuffering = false;
+            audioForms.speedInKbps = '';
+          }
+        }, BUFFER_CHECK_INTERVAL);
       }
 
       element.addEventListener('progress', () => {
@@ -200,6 +219,15 @@ export default defineComponent({
           clearTimeout(timer);
           resetDownloadSpeed();
         }
+
+        // 如果有缓存检测计时器,则清除它
+        if (bufferTimeout) {
+          clearTimeout(bufferTimeout);
+        }
+        // 标记为正在缓存
+        isBuffering = true;
+
+        buffterCatch();
       });
     };
 

+ 29 - 1
src/views/attend-class/component/video-play.tsx

@@ -221,11 +221,30 @@ export default defineComponent({
       let timer: any = null;
       let previousTime = Date.now();
 
+      // 缓存检测状态
+      let isBuffering = false;
+      // 缓存检测计时器
+      let bufferTimeout: any = null;
+      // 设定一个检测缓存停止的时间间隔,这里我们设置为2500毫秒(2秒)
+      const BUFFER_CHECK_INTERVAL = 2500;
+
       function resetDownloadSpeed() {
         timer = setTimeout(() => {
           // displayElement.textContent = `视屏下载速度: 0 KB/s`;
           videoFroms.speedInKbps = `0 KB/s`;
-        }, 2000);
+        }, 1500);
+      }
+
+      function buffterCatch() {
+        // 设定一个计时器,检查是否在指定的时间内再次触发了progress事件
+        bufferTimeout = setTimeout(() => {
+          if (isBuffering) {
+            // 如果计时器到达且isBuffering仍为true,则认为缓存停止
+            console.log('停止缓存数据。');
+            isBuffering = false;
+            videoFroms.speedInKbps = '';
+          }
+        }, BUFFER_CHECK_INTERVAL);
       }
 
       element.addEventListener('progress', () => {
@@ -263,6 +282,15 @@ export default defineComponent({
           clearTimeout(timer);
           resetDownloadSpeed();
         }
+
+        // 如果有缓存检测计时器,则清除它
+        if (bufferTimeout) {
+          clearTimeout(bufferTimeout);
+        }
+        // 标记为正在缓存
+        isBuffering = true;
+
+        buffterCatch();
       });
     };