Update video-play.tsx

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

@@ -19,7 +19,7 @@ import iconpause from '../image/icon-play.png';
 import iconLoop from '../image/icon-loop.svg';
 import iconLoopActive from '../image/icon-loop-active.svg';
 import iconSpeed from '../image/icon-speed.png';
-import { NSlider } from 'naive-ui';
+import { NSlider, useMessage } from 'naive-ui';
 
 export default defineComponent({
   name: 'video-play',
@@ -55,6 +55,7 @@ export default defineComponent({
   ],
   setup(props, { emit, expose }) {
     const { item, isEmtry } = toRefs(props);
+    const message = useMessage();
     const videoFroms = reactive({
       paused: true,
       speedInKbps: '',
@@ -70,7 +71,11 @@ export default defineComponent({
       speedStyle: {
         left: '1px'
       },
-      defaultSpeed: 1 // 默认速度
+      defaultSpeed: 1, // 默认速度
+
+      // 添加缓冲状态标识
+      isBuffering: false,
+      bufferTimeout: null as any
     });
     const videoRef = ref();
     const videoItem = ref();
@@ -147,7 +152,7 @@ export default defineComponent({
       if (videoItem.value) {
         console.log(item.value, 'item.value');
         videoItem.value.poster(props.item.coverImg); // 封面
-        videoItem.value.src(item.value.content); // url 播放地址
+        videoItem.value.src(item.value.content + '?t=' + Date.now()); // url 播放地址
         videoItem.value.playbackRate(videoFroms.defaultSpeed);
         // 初步加载时
         videoItem.value.one('loadedmetadata', () => {
@@ -193,6 +198,33 @@ export default defineComponent({
           emit('ended');
         });
 
+        videoItem.value.on('waiting', () => {
+          console.log('waiting')
+
+          videoFroms.isBuffering = true;
+
+          // 设置缓冲超时检测（5秒）
+          videoFroms.bufferTimeout = setTimeout(() => {
+            if (videoFroms.isBuffering) {
+              console.log('缓冲超时，暂停播放');
+              videoItem.value.pause();
+              videoFroms.paused = true;
+              // window.$message.warning('网络连接不稳定，请检查网络后继续播放');
+              message.info('网络连接不稳定，请检查网络后继续播放', {
+                showIcon: false,
+                render: (props: any) => {
+                  return (
+                    <div style="background: rgba(0,0,0,.6); color: #fff; border-radius: 8px; padding: 6px 16px;">
+                      {props.content}
+                    </div>
+                  );
+                }
+              });
+              videoItem.value.currentTime(videoItem.value.currentTime() + 0.01);
+            }
+          }, 15000);
+        });
+
         //
         videoItem.value.on('pause', () => {
           videoFroms.paused = true;
@@ -204,12 +236,17 @@ export default defineComponent({
         });
 
         videoItem.value.on('canplay', (e: any) => {
+          console.log('canplay', new Date())
+
+          videoFroms.isBuffering = false;
+          clearTimeout(videoFroms.bufferTimeout); // 清除超时检测
           // 获取时长
           videoFroms.duration = timeFormat(
             Math.round(videoItem.value.duration())
           );
           videoFroms.durationNum = videoItem.value.duration();
           emit('canplay');
+
         });
 
         // 视频播放异常
@@ -248,7 +285,7 @@ export default defineComponent({
         bufferTimeout = setTimeout(() => {
           if (isBuffering) {
             // 如果计时器到达且isBuffering仍为true，则认为缓存停止
-            console.log('停止缓存数据。');
+            // console.log('停止缓存数据。');
             isBuffering = false;
             videoFroms.speedInKbps = '';
           }
@@ -402,7 +439,7 @@ export default defineComponent({
               setTimeout(() => {
                 if (isBuffering) {
                   // 如果计时器到达且isBuffering仍为true，则认为缓存停止
-                  console.log('停止缓存数据-。');
+                  // console.log('停止缓存数据-。');
                   isBuffering = false;
                   videoFroms.speedInKbps = '';
                 }
@@ -426,7 +463,7 @@ export default defineComponent({
       };
 
       const onWaiting = () => {
-        console.log('waiting');
+        // console.log('waiting');
         isWaiting = true;
         let uncachedTime = true; // 没有缓存时间
         buffterCatchArray.forEach((item: any) => {
@@ -448,7 +485,7 @@ export default defineComponent({
       };
 
       const onCanplay = () => {
-        console.log('canplay');
+        // console.log('canplay');
         isWaiting = false;
         resetBuffterCatch();
       };
@@ -485,9 +522,11 @@ export default defineComponent({
         const currentTime = videoItem.value.currentTime();
         videoItem.value.load();
         videoItem.value.currentTime(currentTime);
+        console.log('online')
         pause();
       } else if (val.type === 'offline') {
         videoFroms.isOnline = false;
+        console.log('offline')
       }
     };
     onMounted(() => {