Merge branch 'video-tcplayer'

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

@@ -1,4 +1,11 @@
-import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  toRefs,
+  watch
+} from 'vue';
 import { ref } from 'vue';
 import styles from './index.module.less';
 
@@ -37,8 +44,8 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset', 'close'],
-  setup(props, { emit }) {
+  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset', 'close', 'error'],
+  setup(props, { emit, expose }) {
     const videoID = 'video' + Date.now() + Math.floor(Math.random() * 100);
     const videoItem = ref();
     const { item, isEmtry } = toRefs(props);
@@ -48,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(
@@ -75,16 +81,24 @@ 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.src(item.value.content);
+        emit('reset');
+      }
+    };
+
     /** 改变播放时间 */
     const handleChangeTime = (val: number) => {
       data.currentTime = val;
@@ -97,19 +111,20 @@ export default defineComponent({
       }, 300);
     };
 
-    onMounted(() => {
+    const __init = () => {
       videoItem.value = TCPlayer(videoID, {
         appID: '',
         controls: false
       }); // player-container-id 为播放器容器 ID，必须与 html 中一致
       if (videoItem.value) {
+        console.log(videoItem.value);
         videoItem.value.poster(props.item.coverImg); // 封面
         videoItem.value.src(isEmtry.value ? '' : item.value.content); // url 播放地址
 
         // 初步加载时
-        videoItem.value.one('loadedmetadata', () => {
-          console.log(' Loading metadata');
-
+        videoItem.value.one('loadedmetadata', (e: any) => {
+          console.log(' Loading metadata', e);
+          data.reload = false;
           // 获取时长
           data.duration = videoItem.value.duration();
 
@@ -127,33 +142,49 @@ export default defineComponent({
           data.playState = 'pause';
           emit('ended');
         });
+
+        //
+        videoItem.value.on('pause', () => {
+          data.playState = 'pause';
+        });
+
+        videoItem.value.on('playing', () => {
+          data.playState = 'play';
+        });
+
+        videoItem.value.on('canplay', (e: any) => {
+          console.log('canplay', e);
+        });
+
+        // 视频播放异常
+        videoItem.value.on('error', (e: any) => {
+          emit('error');
+          console.log(e, 'error');
+        });
       }
+    };
+
+    onMounted(() => {
+      __init();
+    });
+
+    expose({
+      onPlay
     });
     return () => (
       <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

@@ -311,6 +311,10 @@ export default defineComponent({
       popupData.itemName = item.name;
       if (item.type == 'MUSIC') {
         activeData.model = true;
+      } else if (item.type == 'VIDEO') {
+        if (item.error) {
+          data.videoRefs[index].onPlay();
+        }
       }
     };
 
@@ -369,6 +373,7 @@ export default defineComponent({
                     {m.type === 'IMG' && <img src={m.content} />}
                     {m.type === 'VIDEO' && (
                       <VideoItem
+                        ref={(v: any) => (data.videoRefs[mIndex] = v)}
                         item={m}
                         show={popupData.activeIndex === mIndex}
                         pageVisibility={pageVisibility.value}
@@ -376,6 +381,7 @@ export default defineComponent({
                         isEmtry={isEmtry}
                         onLoadedmetadata={() => {
                           m.isprepare = true;
+                          m.error = false;
                         }}
                         onEnded={() => {
                           const _index = popupData.activeIndex + 1;
@@ -383,6 +389,13 @@ export default defineComponent({
                             handleSwipeChange(_index);
                           }
                         }}
+                        onReset={() => {
+                          m.error = false;
+                        }}
+                        onError={() => {
+                          m.isprepare = true;
+                          m.error = true;
+                        }}
                       />
                     )}
                     {m.type === 'SONG' && (