修改显示逻辑

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

@@ -4,7 +4,8 @@ import {
   ref,
   nextTick,
   onMounted,
-  watch
+  watch,
+  onUnmounted
 } from 'vue';
 import styles from './audio.module.less';
 import iconplay from '../image/icon-pause.png';
@@ -42,6 +43,7 @@ export default defineComponent({
       paused: true,
       speedInKbps: '',
       currentTimeNum: 0,
+      isOnline: false,
       currentTime: '00:00',
       durationNum: 0,
       duration: '00:00',
@@ -182,104 +184,137 @@ export default defineComponent({
         }, BUFFER_CHECK_INTERVAL);
       }
 
-      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); // 更精确地近似字节加载量
+      function resetBuffterCatch() {
+        // 如果有缓存检测计时器，则清除它
+        if (bufferTimeout) {
+          clearTimeout(bufferTimeout);
         }
+        // 标记为正在缓存
+        isBuffering = true;
+
+        buffterCatch();
+      }
 
-        // console.log(
-        //   'progress',
-        //   currentBytesLoaded,
-        //   previousBytesLoaded,
-        //   currentBytesLoaded > previousBytesLoaded
-        // );
-        if (currentBytesLoaded > previousBytesLoaded) {
-          const timeDiff = (currentTime - previousTime) / 1000; // 时间差转换为秒
-          const bytesDiff = currentBytesLoaded - previousBytesLoaded; // 字节差值
-          const speed = bytesDiff / timeDiff; // 字节每秒
+      element.addEventListener('loadedmetadata', () => {
+        // 获取视频总时长
+        const duration = element.duration;
 
-          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`;
+        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); // 更精确地近似字节加载量
           }
 
-          previousBytesLoaded = currentBytesLoaded;
-          previousTime = currentTime;
-        }
+          // console.log(
+          //   'progress',
+          //   currentBytesLoaded,
+          //   previousBytesLoaded,
+          //   currentBytesLoaded > previousBytesLoaded
+          // );
+          // 计算未缓存的时间段
+          const uncachedDuration = duration - cachedDuration;
+          console.log(uncachedDuration, duration, cachedDuration, 'duration');
+          // 如果存在未缓存的时间段，可以根据具体情况做出相应处理
+          if (uncachedDuration > 0) {
+            if (
+              currentBytesLoaded > previousBytesLoaded &&
+              audioForms.isOnline
+            ) {
+              const timeDiff = (currentTime - previousTime) / 1000; // 时间差转换为秒
+              const bytesDiff = currentBytesLoaded - previousBytesLoaded; // 字节差值
+              const speed = bytesDiff / timeDiff; // 字节每秒
 
-        if (!element.paused) {
-          // 如果1秒钟没有返回就重置数据
-          clearTimeout(timer);
-          resetDownloadSpeed();
-        }
+              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`;
+                }
+              }
 
-        // 如果有缓存检测计时器，则清除它
-        if (bufferTimeout) {
-          clearTimeout(bufferTimeout);
-        }
-        // 标记为正在缓存
-        isBuffering = true;
+              previousBytesLoaded = currentBytesLoaded;
+              previousTime = currentTime;
+            }
 
-        buffterCatch();
-      });
-      element.addEventListener('waiting', () => {
-        console.log('waiting');
-        isWaiting = true;
+            if (!element.paused && audioForms.isOnline) {
+              // 如果1秒钟没有返回就重置数据
+              clearTimeout(timer);
+              resetDownloadSpeed();
+            } else {
+              audioForms.speedInKbps = '';
+            }
 
-        if (!element.paused) {
-          // 如果1秒钟没有返回就重置数据
-          clearTimeout(timer);
-          resetDownloadSpeed();
-        }
+            resetBuffterCatch();
+          } else {
+            resetBuffterCatch();
+          }
+        });
+        element.addEventListener('waiting', () => {
+          console.log('waiting');
+          isWaiting = true;
 
-        // 如果有缓存检测计时器，则清除它
-        if (bufferTimeout) {
-          clearTimeout(bufferTimeout);
-        }
-      });
-      element.addEventListener('canplay', () => {
-        console.log('canplay');
-        isWaiting = false;
-        // 如果有缓存检测计时器，则清除它
-        if (bufferTimeout) {
-          clearTimeout(bufferTimeout);
-        }
-        // 标记为正在缓存
-        isBuffering = true;
-        buffterCatch();
-      });
+          if (!element.paused) {
+            // 如果1秒钟没有返回就重置数据
+            clearTimeout(timer);
+            resetDownloadSpeed();
+          }
 
-      element.addEventListener('pause', () => {
-        clearTimeout(timer);
-        // 如果有缓存检测计时器，则清除它
-        if (bufferTimeout) {
-          clearTimeout(bufferTimeout);
-        }
-        audioForms.speedInKbps = '';
+          // 如果有缓存检测计时器，则清除它
+          if (bufferTimeout) {
+            clearTimeout(bufferTimeout);
+          }
+        });
+        element.addEventListener('canplay', () => {
+          console.log('canplay');
+          isWaiting = false;
+          resetBuffterCatch();
+        });
+
+        element.addEventListener('pause', () => {
+          clearTimeout(timer);
+          // 如果有缓存检测计时器，则清除它
+          if (bufferTimeout) {
+            clearTimeout(bufferTimeout);
+          }
+          audioForms.speedInKbps = '';
+        });
+        // element.addEventListener('error', () => {
+        //   element.pause();
+        // });
       });
-      // element.addEventListener('error', () => {
-      //   element.pause();
-      // });
     };
 
+    const onChangeOnlineStatus = (val: any) => {
+      if (val.type === 'online') {
+        audioForms.isOnline = true;
+      } else if (val.type === 'offline') {
+        audioForms.isOnline = false;
+      }
+    };
     onMounted(() => {
       nextTick(() => {
         calculateSpeed(audio.value);
       });
+      window.addEventListener('online', onChangeOnlineStatus);
+      window.addEventListener('offline', onChangeOnlineStatus);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('online', onChangeOnlineStatus);
+      window.removeEventListener('offline', onChangeOnlineStatus);
     });
 
     expose({

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

@@ -58,6 +58,7 @@ export default defineComponent({
     const videoFroms = reactive({
       paused: true,
       speedInKbps: '',
+      isOnline: true, // 是否在线
       currentTimeNum: 0,
       currentTime: '00:00',
       durationNum: 0,
@@ -251,94 +252,183 @@ export default defineComponent({
         }, BUFFER_CHECK_INTERVAL);
       }
 
-      element.addEventListener('progress', () => {
-        const currentTime = Date.now();
-        const buffered = element.buffered;
-        let currentBytesLoaded = 0;
+      function resetBuffterCatch() {
+        // 如果有缓存检测计时器，则清除它
+        if (bufferTimeout) {
+          clearTimeout(bufferTimeout);
+        }
+        // 标记为正在缓存
+        isBuffering = true;
+
+        buffterCatch();
+      }
 
-        if (buffered.length > 0) {
-          for (let i = 0; i < buffered.length; i++) {
-            currentBytesLoaded += buffered.end(i) - buffered.start(i);
+      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); // 更精确地近似字节加载量
           }
-          currentBytesLoaded *= element.duration * element.seekable.end(0); // 更精确地近似字节加载量
-        }
 
-        // 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`;
+          // 计算未缓存的时间段
+          const uncachedDuration = duration - cachedDuration;
+          console.log(uncachedDuration, duration, cachedDuration, 'duration');
+          // 如果存在未缓存的时间段，可以根据具体情况做出相应处理
+          if (uncachedDuration > 0) {
+            // console.log(
+            //   'progress',
+            //   currentBytesLoaded > previousBytesLoaded,
+            //   '------ 加载中'
+            // );
+            if (
+              currentBytesLoaded > previousBytesLoaded &&
+              videoFroms.isOnline
+            ) {
+              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 && videoFroms.isOnline) {
+              // 如果1秒钟没有返回就重置数据
+              clearTimeout(timer);
+              resetDownloadSpeed();
             } else {
-              videoFroms.speedInKbps = `${Number(speedInKbps)} KB/s`;
+              videoFroms.speedInKbps = '';
             }
-          }
 
-          previousBytesLoaded = currentBytesLoaded;
-          previousTime = currentTime;
-        }
-        if (!element.paused) {
-          // 如果1秒钟没有返回就重置数据
-          clearTimeout(timer);
-          resetDownloadSpeed();
-        }
+            if (!isWaiting) {
+              resetBuffterCatch();
+            }
+          } else {
+            resetBuffterCatch();
+          }
+        });
+        element.addEventListener('waiting', () => {
+          console.log('waiting');
+          isWaiting = true;
+          if (!element.paused && videoFroms.isOnline) {
+            // 如果1秒钟没有返回就重置数据
+            clearTimeout(timer);
+            resetDownloadSpeed();
+          }
 
-        if (!isWaiting) {
           // 如果有缓存检测计时器，则清除它
           if (bufferTimeout) {
             clearTimeout(bufferTimeout);
           }
-          // 标记为正在缓存
-          isBuffering = true;
-          buffterCatch();
-        }
-      });
-      element.addEventListener('waiting', () => {
-        console.log('waiting');
-        isWaiting = true;
+        });
+        element.addEventListener('canplay', () => {
+          console.log('canplay');
+          isWaiting = false;
+          resetBuffterCatch();
+        });
 
-        if (!element.paused) {
-          // 如果1秒钟没有返回就重置数据
+        element.addEventListener('pause', () => {
           clearTimeout(timer);
-          resetDownloadSpeed();
-        }
-
-        // 如果有缓存检测计时器，则清除它
-        if (bufferTimeout) {
-          clearTimeout(bufferTimeout);
-        }
-      });
-      element.addEventListener('canplay', () => {
-        console.log('canplay');
-        isWaiting = false;
-        // 如果有缓存检测计时器，则清除它
-        if (bufferTimeout) {
-          clearTimeout(bufferTimeout);
-        }
-        // 标记为正在缓存
-        isBuffering = true;
-        buffterCatch();
-      });
-
-      element.addEventListener('pause', () => {
-        clearTimeout(timer);
-        // 如果有缓存检测计时器，则清除它
-        if (bufferTimeout) {
-          clearTimeout(bufferTimeout);
-        }
-        videoFroms.speedInKbps = '';
+          // 如果有缓存检测计时器，则清除它
+          if (bufferTimeout) {
+            clearTimeout(bufferTimeout);
+          }
+          videoFroms.speedInKbps = '';
+        });
+        //   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); // 更精确地近似字节加载量
+        //     }
+
+        //     // 输出未缓存的时间段
+        //     // 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);
+        //       }
+        //       // 标记为正在缓存
+        //       isBuffering = true;
+
+        //       buffterCatch();
+        //     }
+        //   });
+        // });
+
+        // element.addEventListener('pause', () => {
+        //   clearTimeout(timer);
+        //   // 如果有缓存检测计时器，则清除它
+        //   if (bufferTimeout) {
+        //     clearTimeout(bufferTimeout);
+        //   }
+        //   videoFroms.speedInKbps = '';
+        // });
       });
 
       // element.addEventListener('error', () => {
@@ -347,6 +437,13 @@ export default defineComponent({
       // });
     };
 
+    const onChangeOnlineStatus = (val: any) => {
+      if (val.type === 'online') {
+        videoFroms.isOnline = true;
+      } else if (val.type === 'offline') {
+        videoFroms.isOnline = false;
+      }
+    };
     onMounted(() => {
       videoItem.value = TCPlayer(videoID.value, {
         appID: '',
@@ -358,6 +455,9 @@ export default defineComponent({
       nextTick(() => {
         calculateSpeed(videoRef.value);
       });
+
+      window.addEventListener('online', onChangeOnlineStatus);
+      window.addEventListener('offline', onChangeOnlineStatus);
     });
     const stop = () => {
       videoItem.value.currentTime(0);
@@ -374,6 +474,9 @@ export default defineComponent({
         videoItem.value.src('');
         videoItem.value.dispose();
       }
+
+      window.removeEventListener('online', onChangeOnlineStatus);
+      window.removeEventListener('offline', onChangeOnlineStatus);
     });
 
     watch(