！

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);
@@ -85,6 +92,19 @@ export default defineComponent({
       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();
+        });
+      }
+    };
+
     /** 改变播放时间 */
     const handleChangeTime = (val: number) => {
       data.currentTime = val;
@@ -97,18 +117,19 @@ 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.duration = videoItem.value.duration();
@@ -127,7 +148,30 @@ 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('error', (e: any) => {
+          emit('error');
+          console.log(e, 'error');
+        });
       }
+    };
+
+    onMounted(() => {
+      __init();
+    });
+
+    expose({
+      onPlay
     });
     return () => (
       <div class={styles.videoWrap}>

src/views/courseware-play/index.tsx

@@ -311,6 +311,12 @@ export default defineComponent({
       popupData.itemName = item.name;
       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();
+        }
       }
     };
 
@@ -369,6 +375,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 +383,7 @@ export default defineComponent({
                         isEmtry={isEmtry}
                         onLoadedmetadata={() => {
                           m.isprepare = true;
+                          m.error = false;
                         }}
                         onEnded={() => {
                           const _index = popupData.activeIndex + 1;
@@ -383,6 +391,9 @@ export default defineComponent({
                             handleSwipeChange(_index);
                           }
                         }}
+                        onError={() => {
+                          m.error = true;
+                        }}
                       />
                     )}
                     {m.type === 'SONG' && (