修改逻辑

src/views/attend-class/component/audio-pay.tsx

@@ -181,72 +181,61 @@ export default defineComponent({
         }, BUFFER_CHECK_INTERVAL);
       }
 
-      element.addEventListener('loadedmetadata', () => {
-        // 获取视频总时长
-        const duration = element.duration;
+      element.addEventListener('progress', () => {
+        const currentTime = Date.now();
+        const buffered = element.buffered;
+        let currentBytesLoaded = 0;
 
-        element.addEventListener('progress', () => {
-          const currentTime = Date.now();
-          const buffered = element.buffered;
-          let currentBytesLoaded = 0;
+        if (buffered.length > 0) {
+          for (let i = 0; i < buffered.length; i++) {
+            currentBytesLoaded += buffered.end(i) - buffered.start(i);
+          }
+          currentBytesLoaded *= element.duration * element.seekable.end(0); // 更精确地近似字节加载量
+        }
 
-          // 计算视频已缓存的总时长
-          let cachedDuration = 0;
-          if (buffered.length > 0) {
-            for (let i = 0; i < buffered.length; i++) {
-              currentBytesLoaded += buffered.end(i) - buffered.start(i);
-              cachedDuration += buffered.end(i) - buffered.start(i);
+        // console.log(
+        //   'progress',
+        //   currentBytesLoaded,
+        //   previousBytesLoaded,
+        //   currentBytesLoaded > previousBytesLoaded
+        // );
+        if (currentBytesLoaded > previousBytesLoaded) {
+          const timeDiff = (currentTime - previousTime) / 1000; // 时间差转换为秒
+          const bytesDiff = currentBytesLoaded - previousBytesLoaded; // 字节差值
+          const speed = bytesDiff / timeDiff; // 字节每秒
+
+          if (!element.paused) {
+            const kbps = speed / 1024;
+            const speedInKbps = kbps.toFixed(2); // 转换为千字节每秒并保留两位小数
+            if (kbps > 1024) {
+              audioForms.speedInKbps = `${Number(
+                (kbps / 1024).toFixed(2)
+              )} M/s`;
+            } else {
+              audioForms.speedInKbps = `${Number(speedInKbps)} KB/s`;
             }
-            currentBytesLoaded *= element.duration * element.seekable.end(0); // 更精确地近似字节加载量
           }
 
-          // 输出未缓存的时间段
-          // console.log('未缓存的时间段:', uncachedDuration);
-          // 计算未缓存的时间段
-          const uncachedDuration = duration - cachedDuration;
-          // 如果存在未缓存的时间段，可以根据具体情况做出相应处理
-          if (uncachedDuration > 0) {
-            // console.log('视频部分内容尚未缓存完全！');
-            if (currentBytesLoaded > previousBytesLoaded) {
-              const timeDiff = (currentTime - previousTime) / 1000; // 时间差转换为秒
-              const bytesDiff = currentBytesLoaded - previousBytesLoaded; // 字节差值
-              const speed = bytesDiff / timeDiff; // 字节每秒
-              // console.log(timeDiff, bytesDiff, speed);
-              // console.log(element.paused, 'element.paused');
-              if (!element.paused) {
-                const kbps = speed / 1024;
-                const speedInKbps = kbps.toFixed(2); // 转换为千字节每秒并保留两位小数
-                if (kbps > 1024) {
-                  audioForms.speedInKbps = `${Number(
-                    (kbps / 1024).toFixed(2)
-                  )} M/s`;
-                } else {
-                  audioForms.speedInKbps = `${Number(speedInKbps)} KB/s`;
-                }
-              }
+          previousBytesLoaded = currentBytesLoaded;
+          previousTime = currentTime;
+        }
 
-              previousBytesLoaded = currentBytesLoaded;
-              previousTime = currentTime;
-            }
+        if (!element.paused) {
+          // 如果1秒钟没有返回就重置数据
+          clearTimeout(timer);
+          resetDownloadSpeed();
+        }
 
-            if (!element.paused) {
-              // 如果1秒钟没有返回就重置数据
-              clearTimeout(timer);
-              resetDownloadSpeed();
-            }
-          } else {
-            console.log('整个视频已缓存完毕！');
-            // 如果有缓存检测计时器，则清除它
-            if (bufferTimeout) {
-              clearTimeout(bufferTimeout);
-            }
-            // 标记为正在缓存
-            isBuffering = true;
+        // 如果有缓存检测计时器，则清除它
+        if (bufferTimeout) {
+          clearTimeout(bufferTimeout);
+        }
+        // 标记为正在缓存
+        isBuffering = true;
 
-            buffterCatch();
-          }
-        });
+        buffterCatch();
       });
+
       element.addEventListener('pause', () => {
         clearTimeout(timer);
         // 如果有缓存检测计时器，则清除它

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

@@ -247,70 +247,57 @@ export default defineComponent({
         }, BUFFER_CHECK_INTERVAL);
       }
 
-      element.addEventListener('loadedmetadata', () => {
-        // 获取视频总时长
-        const duration = element.duration;
-
-        element.addEventListener('progress', () => {
-          const currentTime = Date.now();
-          const buffered = element.buffered;
-          let currentBytesLoaded = 0;
-
-          // 计算视频已缓存的总时长
-          let cachedDuration = 0;
-          if (buffered.length > 0) {
-            for (let i = 0; i < buffered.length; i++) {
-              currentBytesLoaded += buffered.end(i) - buffered.start(i);
-              cachedDuration += buffered.end(i) - buffered.start(i);
-            }
-            currentBytesLoaded *= element.duration * element.seekable.end(0); // 更精确地近似字节加载量
+      element.addEventListener('progress', () => {
+        const currentTime = Date.now();
+        const buffered = element.buffered;
+        let currentBytesLoaded = 0;
+
+        if (buffered.length > 0) {
+          for (let i = 0; i < buffered.length; i++) {
+            currentBytesLoaded += buffered.end(i) - buffered.start(i);
           }
+          currentBytesLoaded *= element.duration * element.seekable.end(0); // 更精确地近似字节加载量
+        }
 
-          // 输出未缓存的时间段
-          // console.log('未缓存的时间段:', uncachedDuration);
-          // 计算未缓存的时间段
-          const uncachedDuration = duration - cachedDuration;
-          // 如果存在未缓存的时间段，可以根据具体情况做出相应处理
-          if (uncachedDuration > 0) {
-            console.log('视频部分内容尚未缓存完全！');
-            if (currentBytesLoaded > previousBytesLoaded) {
-              const timeDiff = (currentTime - previousTime) / 1000; // 时间差转换为秒
-              const bytesDiff = currentBytesLoaded - previousBytesLoaded; // 字节差值
-              const speed = bytesDiff / timeDiff; // 字节每秒
-              // console.log(timeDiff, bytesDiff, speed);
-              // 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;
-              previousTime = currentTime;
-            }
-            if (!element.paused) {
-              // 如果1秒钟没有返回就重置数据
-              clearTimeout(timer);
-              resetDownloadSpeed();
-            }
-          } else {
-            console.log('整个视频已缓存完毕！');
-            // 如果有缓存检测计时器，则清除它
-            if (bufferTimeout) {
-              clearTimeout(bufferTimeout);
+        console.log(
+          'progress',
+          currentBytesLoaded > previousBytesLoaded,
+          '------ 加载中'
+        );
+        if (currentBytesLoaded > previousBytesLoaded) {
+          const timeDiff = (currentTime - previousTime) / 1000; // 时间差转换为秒
+          const bytesDiff = currentBytesLoaded - previousBytesLoaded; // 字节差值
+          const speed = bytesDiff / timeDiff; // 字节每秒
+          console.log(timeDiff, bytesDiff, speed);
+          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`;
             }
-            // 标记为正在缓存
-            isBuffering = true;
-
-            buffterCatch();
           }
-        });
+
+          previousBytesLoaded = currentBytesLoaded;
+          previousTime = currentTime;
+        }
+        if (!element.paused) {
+          // 如果1秒钟没有返回就重置数据
+          clearTimeout(timer);
+          resetDownloadSpeed();
+        }
+
+        // 如果有缓存检测计时器，则清除它
+        if (bufferTimeout) {
+          clearTimeout(bufferTimeout);
+        }
+        // 标记为正在缓存
+        isBuffering = true;
+        buffterCatch();
       });
 
       element.addEventListener('pause', () => {