添加

src/components/layout/imGroup.tsx

@@ -14,6 +14,8 @@ export default defineComponent({
     // const renderSuccess = ref(false);
     const origin = /(localhost|192)/.test(location.host)
       ? 'https://test.lexiaoya.cn'
+      : /online.lexiaoya.cn/.test(location.href)
+      ? 'https://kt.colexiu.com'
       : location.origin;
     const src = `${origin}/classroom-im/?userID=${userStore.getUserInfo.imUserId}&Authorization=${userStore.getToken}`;
 

src/views/attend-class/component/video-play.tsx

@@ -24,7 +24,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
+  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset', 'error'],
   setup(props, { emit, expose }) {
     const { item, isEmtry } = toRefs(props);
     const videoFroms = reactive({
@@ -50,6 +50,14 @@ export default defineComponent({
       }
     };
 
+    // 如果视屏异常后，需要重新播放视屏
+    const onPlay = () => {
+      if (videoItem.value) {
+        videoItem.value.src(item.value.content);
+        emit('reset');
+      }
+    };
+
     //
     const toggleHideControl = (isShow: false) => {
       videoFroms.showBar = isShow;
@@ -107,9 +115,30 @@ export default defineComponent({
           videoFroms.paused = true;
           emit('ended');
         });
+
+        //
+        videoItem.value.on('pause', () => {
+          videoFroms.paused = true;
+        });
+
+        videoItem.value.on('playing', () => {
+          videoFroms.paused = false;
+        });
+
+        // 视频播放异常
+        videoItem.value.on('error', (e: any) => {
+          emit('error');
+          console.log(e, 'error');
+        });
       }
     });
+    const stop = () => {
+      videoItem.value.currentTime(0);
+      videoItem.value.pause();
+    };
     expose({
+      onPlay,
+      stop,
       // changePlayBtn,
       toggleHideControl
     });

src/views/attend-class/index.module.less

@@ -531,4 +531,34 @@
       }
     }
   }
-}
+}
+
+.removeVisiable {
+  width: 500px;
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: max(18px, 16px);
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}

src/views/attend-class/index.tsx

@@ -5,7 +5,8 @@ import {
   onUnmounted,
   ref,
   Transition,
-  computed
+  computed,
+  nextTick
 } from 'vue';
 import styles from './index.module.less';
 import 'plyr/dist/plyr.css';
@@ -100,7 +101,10 @@ export default defineComponent({
       modelAttendStatus: false, // 布置作业提示弹窗
       modalAttendMessage: '本节课未设置课后训练，是否继续？',
       modelTrainStatus: false, // 训练设置
-      homeworkStatus: true // 布置作业完成时
+      homeworkStatus: true, // 布置作业完成时
+      removeVisiable: false,
+      removeTitle: '',
+      removeContent: ''
     });
     const activeData = reactive({
       // isAutoPlay: false, // 是否自动播放
@@ -332,11 +336,12 @@ export default defineComponent({
       for (let i = 0; i < data.itemList.length; i++) {
         const activeItem = data.itemList[i];
         if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
-          activeItem.videoEle.stop();
+          console.log(activeItem.videoEle, 'activeItem.videoEle');
+          activeItem.videoEle?.pause();
         }
 
         if (activeItem.type === 'SONG' && activeItem.audioEle) {
-          activeItem.audioEle.stop();
+          activeItem.audioEle?.stop();
         }
         // console.log('🚀 ~ activeItem:', activeItem)
         // 停止曲谱的播放
@@ -505,9 +510,12 @@ export default defineComponent({
               clearTimeout(activeData.timer);
               message.destroyAll();
               // item.autoPlay = false;
-              // nextTick(() => {
-              //   item.videoEle?.play();
-              // });
+              nextTick(() => {
+                if (item.error) {
+                  item.videoEle?.src(item.content);
+                  //   item.videoEle?.onPlay();
+                }
+              });
             }
           }
           //   requestAnimationFrame(() => {
@@ -591,10 +599,10 @@ export default defineComponent({
       const activeItem = data.itemList[popupData.activeIndex];
       // 暂停视频和曲谱的播放
       if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
-        activeItem.videoEle.pause();
+        activeItem.videoEle?.stop();
       }
       if (activeItem.type === 'SONG' && activeItem.audioEle) {
-        activeItem.audioEle.stop();
+        activeItem.audioEle?.stop();
       }
       if (activeItem.type === 'MUSIC') {
         activeItem.iframeRef?.contentWindow?.postMessage(
@@ -723,6 +731,9 @@ export default defineComponent({
                               setModelOpen();
                             }
                           }}
+                          onError={() => {
+                            m.error = true;
+                          }}
                         />
                         <Transition name="van-fade">
                           {!m.isprepare && (
@@ -1078,18 +1089,13 @@ export default defineComponent({
           </div>
         </NModal>
 
-
-
-        <NModal
-          class={['background']}
-          v-model:show={showModalTone.value}
-          >
-            <div>
-            <PlaceholderTone onClose={()=>{
-              showModalTone.value = false
-            }}></PlaceholderTone>
-            </div>
-
+        <NModal class={['background']} v-model:show={showModalTone.value}>
+          <div>
+            <PlaceholderTone
+              onClose={() => {
+                showModalTone.value = false;
+              }}></PlaceholderTone>
+          </div>
         </NModal>
         <NModal
           v-model:show={showModalTime.value}
@@ -1101,6 +1107,30 @@ export default defineComponent({
             <TimerMeter></TimerMeter>
           </div>
         </NModal>
+
+        <NModal
+          v-model:show={data.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={data.removeTitle}>
+          <div class={styles.studentRemove}>
+            <p>{data.removeContent}</p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  //
+                }}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (data.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
       </div>
     );
   }