更新修改

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

@@ -140,7 +140,7 @@ export default defineComponent({
               loop={data.loop}
               onLoadedmetadata={onLoadedmetadata}
               onTimeupdate={() => {
-                if (data.timer) return;
+                if (data.timer && data.playState === 'pause') return;
                 data.currentTime = audioRef.value.currentTime;
               }}
               onEnded={onEnded}

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

@@ -55,10 +55,9 @@ export default defineComponent({
       duration: 0,
       loop: false,
       playState: 'pause' as 'play' | 'pause',
-      vudio: null as any
+      vudio: null as any,
+      reload: false
     });
-    const canvasRef: any = ref();
-    const elRef: any = ref();
     const contetRef = ref();
 
     watch(
@@ -82,26 +81,21 @@ export default defineComponent({
       clearTimeout(playTimer);
       if (state === 'play') {
         playTimer = setTimeout(() => {
-          videoItem.value.play();
+          videoItem.value?.play();
           data.playState = 'play';
         }, 100);
       } else {
-        videoItem.value.pause();
+        videoItem.value?.pause();
         data.playState = 'pause';
       }
       emit('togglePlay', data.playState);
     };
 
+    // 如果视屏异常后，需要重新播放视屏
     const onPlay = () => {
       if (videoItem.value) {
-        // videoItem.value.dispose();
-
-        nextTick(() => {
-          // __init();
-          console.log(videoItem.value, 'val');
-          // videoItem.value.errorDisplay.trigger();
-          videoItem.value.play();
-        });
+        videoItem.value.src(item.value.content);
+        emit('reset');
       }
     };
 
@@ -130,7 +124,7 @@ export default defineComponent({
         // 初步加载时
         videoItem.value.one('loadedmetadata', (e: any) => {
           console.log(' Loading metadata', e);
-
+          data.reload = false;
           // 获取时长
           data.duration = videoItem.value.duration();
 
@@ -158,6 +152,10 @@ export default defineComponent({
           data.playState = 'play';
         });
 
+        videoItem.value.on('canplay', (e: any) => {
+          console.log('canplay', e);
+        });
+
         // 视频播放异常
         videoItem.value.on('error', (e: any) => {
           emit('error');
@@ -177,27 +175,16 @@ export default defineComponent({
       <div class={styles.videoWrap}>
         <div class={styles.content}>
           <div ref={contetRef} class={styles.contentWrap}>
-            {/* <video
-              poster={props.item.coverImg}
-              src={isEmtry.value ? '' : item.value.content}
-              ref={elRef}
-              loop={data.loop}
-              onLoadedmetadata={onLoadedmetadata}
-              onTimeupdate={() => {
-                if (data.timer) return;
-                data.currentTime = elRef.value.currentTime;
-              }}
-              onEnded={onEnded}
-              playsinline="false"></video> */}
-            <video
-              style={{ width: '100%', height: '100%' }}
-              poster={props.item.coverImg}
-              src={isEmtry.value ? '' : item.value.content}
-              ref={elRef}
-              id={videoID}
-              preload="auto"
-              playsinline
-              webkit-playsinline></video>
+            {!data.reload && (
+              <video
+                style={{ width: '100%', height: '100%' }}
+                poster={props.item.coverImg}
+                src={isEmtry.value ? '' : item.value.content}
+                id={videoID}
+                preload="auto"
+                playsinline
+                webkit-playsinline></video>
+            )}
           </div>
           <div class={styles.videoSection}></div>
         </div>

src/views/courseware-play/index.tsx

@@ -312,9 +312,7 @@ export default defineComponent({
       if (item.type == 'MUSIC') {
         activeData.model = true;
       } else if (item.type == 'VIDEO') {
-        console.log(item, 'item');
         if (item.error) {
-          console.log(data.videoRefs[index], 'data.videoRefs[index].value');
           data.videoRefs[index].onPlay();
         }
       }
@@ -391,7 +389,11 @@ export default defineComponent({
                             handleSwipeChange(_index);
                           }
                         }}
+                        onReset={() => {
+                          m.error = false;
+                        }}
                         onError={() => {
+                          m.isprepare = true;
                           m.error = true;
                         }}
                       />