Merge branch 'iteration-20240522-download' into jenkins-test

src/views/courseware-play/component/audio-item/index.tsx

@@ -248,57 +248,122 @@ 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); // 更精确地近似字节加载量
-        }
+      element.addEventListener('loadedmetadata', () => {
+        // 获取视频总时长
+        const duration = element.duration;
+
+        element.addEventListener('progress', () => {
+          const currentTime = Date.now();
+          const buffered = element.buffered;
+          let currentBytesLoaded = 0;
 
-        // 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) {
-              data.speedInKbps = `${Number((kbps / 1024).toFixed(2))} M/s`;
-            } else {
-              data.speedInKbps = `${Number(speedInKbps)} KB/s`;
+          // 计算视频已缓存的总时长
+          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('未缓存的时间段:', 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) {
+                  data.speedInKbps = `${Number((kbps / 1024).toFixed(2))} M/s`;
+                } else {
+                  data.speedInKbps = `${Number(speedInKbps)} KB/s`;
+                }
+              }
 
-          // 如果1秒钟没有返回就重置数据
-          clearTimeout(timer);
-          resetDownloadSpeed();
-        }
+              previousBytesLoaded = currentBytesLoaded;
+              previousTime = currentTime;
+            }
 
-        // 如果有缓存检测计时器，则清除它
-        if (bufferTimeout) {
-          clearTimeout(bufferTimeout);
-        }
-        // 标记为正在缓存
-        isBuffering = true;
+            if (!element.paused) {
+              // 如果1秒钟没有返回就重置数据
+              clearTimeout(timer);
+              resetDownloadSpeed();
+            }
+          } else {
+            console.log('整个视频已缓存完毕！');
+            // 如果有缓存检测计时器，则清除它
+            if (bufferTimeout) {
+              clearTimeout(bufferTimeout);
+            }
+            // 标记为正在缓存
+            isBuffering = true;
 
-        buffterCatch();
+            buffterCatch();
+          }
+        });
       });
 
+      // 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(
+      //   //   '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) {
+      //         data.speedInKbps = `${Number((kbps / 1024).toFixed(2))} M/s`;
+      //       } else {
+      //         data.speedInKbps = `${Number(speedInKbps)} KB/s`;
+      //       }
+      //     }
+
+      //     previousBytesLoaded = currentBytesLoaded;
+      //     previousTime = currentTime;
+
+      //     // 如果1秒钟没有返回就重置数据
+      //     clearTimeout(timer);
+      //     resetDownloadSpeed();
+      //   }
+
+      //   // 如果有缓存检测计时器，则清除它
+      //   if (bufferTimeout) {
+      //     clearTimeout(bufferTimeout);
+      //   }
+      //   // 标记为正在缓存
+      //   isBuffering = true;
+
+      //   buffterCatch();
+      // });
+
       element.addEventListener('pause', () => {
         clearTimeout(timer);
         // 如果有缓存检测计时器，则清除它

src/views/courseware-play/component/video-item/index.tsx

@@ -270,53 +270,117 @@ 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); // 更精确地近似字节加载量
-        }
-
-        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);
-
-          if (!element.paused) {
-            const kbps = speed / 1024;
-            const speedInKbps = kbps.toFixed(2); // 转换为千字节每秒并保留两位小数
-            if (kbps > 1024) {
-              data.speedInKbps = `${Number((kbps / 1024).toFixed(2))} M/s`;
-            } else {
-              data.speedInKbps = `${Number(speedInKbps)} KB/s`;
+      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); // 更精确地近似字节加载量
           }
 
-          previousBytesLoaded = currentBytesLoaded;
-          previousTime = currentTime;
+          // 输出未缓存的时间段
+          // 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) {
+                  data.speedInKbps = `${Number((kbps / 1024).toFixed(2))} M/s`;
+                } else {
+                  data.speedInKbps = `${Number(speedInKbps)} KB/s`;
+                }
+              }
 
-          // 如果1秒钟没有返回就重置数据
-          clearTimeout(timer);
-          resetDownloadSpeed();
-        }
+              previousBytesLoaded = currentBytesLoaded;
+              previousTime = currentTime;
+            }
 
-        // 如果有缓存检测计时器，则清除它
-        if (bufferTimeout) {
-          clearTimeout(bufferTimeout);
-        }
-        // 标记为正在缓存
-        isBuffering = true;
+            if (!element.paused) {
+              // 如果1秒钟没有返回就重置数据
+              clearTimeout(timer);
+              resetDownloadSpeed();
+            }
+          } else {
+            console.log('整个视频已缓存完毕！');
+            // 如果有缓存检测计时器，则清除它
+            if (bufferTimeout) {
+              clearTimeout(bufferTimeout);
+            }
+            // 标记为正在缓存
+            isBuffering = true;
 
-        buffterCatch();
+            buffterCatch();
+          }
+        });
       });
+      // 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('progress', currentBytesLoaded > previousBytesLoaded);
+      //   if (currentBytesLoaded > previousBytesLoaded) {
+      //     const timeDiff = (currentTime - previousTime) / 1000; // 时间差转换为秒
+      //     const bytesDiff = currentBytesLoaded - previousBytesLoaded; // 字节差值
+      //     const speed = bytesDiff / timeDiff; // 字节每秒
+
+      //     console.log(timeDiff, bytesDiff, speed);
+
+      //     if (!element.paused) {
+      //       const kbps = speed / 1024;
+      //       const speedInKbps = kbps.toFixed(2); // 转换为千字节每秒并保留两位小数
+      //       if (kbps > 1024) {
+      //         data.speedInKbps = `${Number((kbps / 1024).toFixed(2))} M/s`;
+      //       } else {
+      //         data.speedInKbps = `${Number(speedInKbps)} KB/s`;
+      //       }
+      //     }
+
+      //     previousBytesLoaded = currentBytesLoaded;
+      //     previousTime = currentTime;
+
+      //     // 如果1秒钟没有返回就重置数据
+      //     clearTimeout(timer);
+      //     resetDownloadSpeed();
+      //   }
+
+      //   // 如果有缓存检测计时器，则清除它
+      //   if (bufferTimeout) {
+      //     clearTimeout(bufferTimeout);
+      //   }
+      //   // 标记为正在缓存
+      //   isBuffering = true;
+
+      //   buffterCatch();
+      // });
 
       element.addEventListener('pause', () => {
         clearTimeout(timer);