修改播放

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

@@ -59,7 +59,12 @@ export default defineComponent({
       () => props.show,
       val => {
         if (val) {
+          data.vudio = null;
+          console.log(audioRef.value, 'audioRef.value');
           // onToggleAudio();
+          audioRef.value?.addEventListener('loaded', () => {
+            console.log('111');
+          });
         } else {
           audioRef.value.pause();
           data.playState = 'pause';
@@ -78,9 +83,12 @@ export default defineComponent({
 
     // 切换音频播放
     const onToggleAudio = () => {
+      console.log(audioRef.value.paused, 'audioRef.value.paused');
       if (audioRef.value.paused) {
         onInit(audioRef.value, canvasRef.value);
-        audioRef.value.play();
+        audioRef.value.play().catch(e => {
+          console.log(e, '1111');
+        });
         data.playState = 'play';
       } else {
         audioRef.value.pause();
@@ -89,33 +97,53 @@ export default defineComponent({
     };
 
     const onInit = (audio: undefined, canvas: undefined) => {
+      console.log(audio, canvas, data.vudio, 'Audio');
       if (!data.vudio) {
-        const rect = contetRef.value.getBoundingClientRect() || {
-          width: 200,
-          height: 200
-        };
-        data.vudio = new Vudio(audio, canvas, {
-          effect: 'waveform',
-          accuracy: 128,
-          width: rect.width,
-          height: rect.height,
-          waveform: {
-            maxHeight: 160,
-            color: [
-              [0, '#44D1FF'],
-              [0.5, '#44D1FF'],
-              [0.5, '#198CFE'],
-              [1, '#198CFE']
-            ],
-            prettify: false
-          }
-        });
-        data.vudio.dance();
+        try {
+          const rect = contetRef.value.getBoundingClientRect() || {
+            width: 200,
+            height: 200
+          };
+          data.vudio = new Vudio(audio, canvas, {
+            effect: 'waveform',
+            accuracy: 128,
+            width: rect.width,
+            height: rect.height,
+            waveform: {
+              maxHeight: 160,
+              color: [
+                [0, '#44D1FF'],
+                [0.5, '#44D1FF'],
+                [0.5, '#198CFE'],
+                [1, '#198CFE']
+              ],
+              prettify: false
+            }
+          });
+          data.vudio.dance();
+        } catch (e) {
+          console.log(e, 'e');
+        }
       }
     };
     /** 加载成功 */
     const onLoadedmetadata = () => {
-      data.duration = audioRef.value.duration;
+      data.duration = audioRef.value?.duration;
+
+      // if (props.item.autoPlay && audioRef.value && props.show) {
+      //   data.vudio = null;
+      //   onToggleAudio();
+      // }
+
+      // if (audioRef.value) {
+      //   audioRef.value.stop = () => {
+      //     audioRef.value?.pause();
+      //   };
+      //   audioRef.value.onPlay = () => {
+      //     audioRef.value?.play();
+      //     onInit(audioRef.value, canvasRef.value);
+      //   };
+      // }
     };
 
     /** 改变播放时间 */
@@ -175,7 +203,7 @@ export default defineComponent({
 
                 // 开始拖动时也不能更新
                 if (data.dragStatus) return;
-                data.currentTime = audioRef.value.currentTime;
+                data.currentTime = audioRef.value?.currentTime;
               }}
               onError={() => {
                 console.log('error');

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

@@ -71,7 +71,7 @@ export default defineComponent({
     watch(
       () => props.show,
       val => {
-        onToggleAudio('pause');
+        onToggleAudio(val ? 'play' : 'pause');
       }
     );
     watch(
@@ -122,6 +122,27 @@ export default defineComponent({
       }, 300);
     };
 
+    let videoTimer = null as any;
+    let videoTimerErrorCount = 0;
+    const handlePlayVideo = () => {
+      if (videoTimerErrorCount > 5) {
+        return;
+      }
+      clearTimeout(videoTimer);
+      nextTick(() => {
+        videoItem.value?.play().catch((err: any) => {
+          // console.log('🚀 ~ err:', err)
+          videoTimer = setTimeout(() => {
+            if (err?.message?.includes('play()')) {
+              // emit('play');
+            }
+            handlePlayVideo();
+          }, 1000);
+        });
+      });
+      videoTimerErrorCount++;
+    };
+
     const __init = () => {
       if (videoItem.value) {
         // console.log(videoItem.value);
@@ -136,6 +157,15 @@ export default defineComponent({
           data.duration = videoItem.value.duration();
 
           emit('canplay', videoItem.value);
+
+          if (item.value.autoPlay && videoItem.value) {
+            // videoItem.value?.play()
+            nextTick(() => {
+              videoTimerErrorCount = 0;
+              videoItem.value.currentTime(0);
+              nextTick(handlePlayVideo);
+            });
+          }
         });
         // 视频开始播放
         videoItem.value.on('play', () => {
@@ -180,15 +210,20 @@ export default defineComponent({
     watch(
       () => props.item,
       () => {
+        console.log(props.item, 'watch ---- item');
+        videoItem.value.pause();
         videoItem.value.currentTime(0);
-        __init();
-        data.playState = 'pause';
+        if (item.value?.id) {
+          __init();
+          data.playState = 'pause';
+        } else {
+          videoItem.value.pause();
+        }
       }
     );
     watch(
       () => props.showModel,
       () => {
-        console.log(props.showModel, 'showModel');
         data.speedControl = false;
       }
     );

src/views/courseware-play/index.tsx

@@ -319,7 +319,7 @@ export default defineComponent({
           ...m,
           iframeRef: null,
           videoEle: null,
-          autoPlay: false, //加载完成是否自动播放
+          autoPlay: data.currentCourse.autoPlay || false, //加载完成是否自动播放
           isprepare: false, // 视频是否加载完成
           isRender: false // 是否渲染了
         };
@@ -1348,14 +1348,16 @@ export default defineComponent({
             }}
           />
         </Popup>
+        {showSelectCourseware.value && (
+          <SelectCoursewarePop
+            list={data.coursewareList}
+            kjId={data.kjId}
+            onClose={() => {
+              showSelectCourseware.value = false;
+            }}
+            onSelect={item => loadNewCourseware(item)}></SelectCoursewarePop>
+        )}
         {showMember.value && (
-          // <SelectCoursewarePop
-          //   list={data.coursewareList}
-          //   kjId={data.kjId}
-          //   onClose={() => {
-          //     showSelectCourseware.value = false;
-          //   }}
-          //   onSelect={item => loadNewCourseware(item)}></SelectCoursewarePop>
           <SelectCoursewareMember
             onClose={() => {
               showSelectCourseware.value = false;