添加

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

@@ -59,7 +59,11 @@ export default defineComponent({
       playState: 'pause' as 'play' | 'pause',
       vudio: null as any,
       afterMa3: true,
-      count: 0
+      count: 0,
+
+      // 添加缓冲状态标识
+      isBuffering: false,
+      bufferTimeout: null as any
     });
     const canvasRef: any = ref();
     const audioRef: any = ref();
@@ -107,7 +111,7 @@ export default defineComponent({
         audioRef.value.play();
         data.playState = 'play';
         //
-        nextTick(() => {
+        // nextTick(() => {
           // onInit(audioRef.value, canvasRef.value);
           // setTimeout(() => {
           //   onInit(audioRef.value, canvasRef.value);
@@ -116,7 +120,7 @@ export default defineComponent({
           // if (data.vudio) {
           //   data.vudio.dance();
           // }
-        });
+        // });
       } else {
         audioRef.value.pause();
         data.playState = 'pause';
@@ -125,7 +129,7 @@ export default defineComponent({
 
     const onInit = (audio: undefined, canvas: undefined) => {
       if (!data.vudio && data.count > 1) {
-        console.log(data.vudio, 'data.vudio');
+        // console.log(data.vudio, 'data.vudio');
         try {
           const rect = contetRef.value.getBoundingClientRect() || {
             width: 200,
@@ -462,8 +466,21 @@ export default defineComponent({
     const onChangeOnlineStatus = (val: any) => {
       if (val.type === 'online') {
         data.isOnline = true;
+
+        console.log(audioRef.value, 'audioRef.value')
+        if(audioRef.value) {
+          const currentTime = audioRef.value.currentTime;
+          audioRef.value.load()
+          audioRef.value.currentTime = currentTime || 0
+          audioRef.value.pause();
+          data.playState = 'pause';
+        }
       } else if (val.type === 'offline') {
         data.isOnline = false;
+
+        // 去掉检测加载缓存
+        data.isBuffering = false;
+        data.bufferTimeout && clearTimeout(data.bufferTimeout)
       }
     };
     onMounted(() => {
@@ -496,8 +513,28 @@ export default defineComponent({
                 }
                 // 开始拖动时也不能更新
                 if (data.timer) return;
+                console.log('timeupdate');
                 data.currentTime = audioRef.value?.currentTime;
               }}
+              onWaiting={() => {
+                data.isBuffering = true;
+                data.bufferTimeout && clearTimeout(data.bufferTimeout);
+
+                // 设置缓冲超时检测（5秒）
+                data.bufferTimeout = setTimeout(() => {
+                  if (data.isBuffering) {
+                    console.log('缓冲超时，暂停播放');
+                    audioRef.value.pause();
+                    data.playState = 'pause';
+                    showToast('网络连接不稳定，请检查网络后继续播放');
+                    audioRef.value.currentTime = audioRef.value.currentTime + 0.01;
+                  }
+                }, 15000);
+              }}
+              onCanplay={() => {
+                data.isBuffering = false;
+                data.bufferTimeout && clearTimeout(data.bufferTimeout); // 清除超时检测
+              }}
               onError={() => {
                 console.log('error');
                 audioRef.value.pause();
@@ -512,7 +549,8 @@ export default defineComponent({
               }}
               onEnded={onEnded}
               crossorigin="anonymous"
-              playsinline="false"></audio>
+              playsinline="false"
+              ></audio>
 
             {data.afterMa3 && (
               <div class={styles.tempVudio}>

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

@@ -76,7 +76,11 @@ export default defineComponent({
       speedStyle: {
         left: '1px'
       },
-      defaultSpeed: 1 // 默认速度
+      defaultSpeed: 1, // 默认速度
+
+      // 添加缓冲状态标识
+      isBuffering: false,
+      bufferTimeout: null as any
     });
     const videoRef = ref();
     const contetRef = ref();
@@ -207,7 +211,27 @@ export default defineComponent({
           data.playState = 'play';
         });
 
+        videoItem.value.on('waiting', () => {
+          console.log('waiting')
+
+          data.isBuffering = true;
+          data.bufferTimeout && clearTimeout(data.bufferTimeout);
+
+          // 设置缓冲超时检测（5秒）
+          data.bufferTimeout = setTimeout(() => {
+            if (data.isBuffering) {
+              console.log('缓冲超时，暂停播放');
+              videoItem.value.pause();
+              data.playState = 'pause';
+              showToast('网络连接不稳定，请检查网络后继续播放');
+              videoItem.value.currentTime(videoItem.value.currentTime() + 0.01);
+            }
+          }, 15000);
+        });
+
         videoItem.value.on('canplay', (e: any) => {
+          data.isBuffering = false;
+          data.bufferTimeout && clearTimeout(data.bufferTimeout); // 清除超时检测
           // console.log('canplay');
           data.duration = videoItem.value.duration();
           emit('canplay');
@@ -502,8 +526,14 @@ export default defineComponent({
         const currentTime = videoItem.value.currentTime();
         videoItem.value.load();
         videoItem.value.currentTime(currentTime);
+
+        onToggleAudio("pause");
       } else if (val.type === 'offline') {
         data.isOnline = false;
+
+        // 去掉检测加载缓存
+        data.isBuffering = false;
+        data.bufferTimeout && clearTimeout(data.bufferTimeout)
       }
     };