解决闪屏问题

src/components/AddVideoPlay.vue

 <template>
   <div class="add-video-play">
-    <!-- <button @click="onPlay">开始播放</button> -->
     <div class="main-video-play" v-show="showFirstVideo">
       <template v-for="(item, index) in mainVideoList" :key="item.name">
         <video
@@ -11,7 +10,7 @@
           :src="item.url"
           :loop="loop"
           @canplay="mainVideoCanplay(index)"
-          @ended="firstVideoEnded"
+          @ended="firstVideoEnded(index)"
         ></video>
       </template>
     </div>
@@ -52,42 +51,32 @@ import Loading from '@/components/Loading/FirstCircle.vue';
 import { onBeforeRouteLeave } from 'vue-router';
 import { injectWindow } from '@/utils/pyqt';
 import { show_message } from '@/utils/tool';
+import { scriptTypePhonetics } from '@/service/CreateLive';
 
 const props = withDefaults(
   defineProps<{
     playMainIndex: number | null;
-    video1: string;
     video2: string;
     playId?: any;
     progress: number;
-    mainIndex?: number | null;
-    totalTime: number;
     liveDetail: any;
     eplay?: number;
     mainVideoList: any[];
     loading: boolean;
   }>(),
   {
-    mainIndex: null,
     eplay: 0,
   },
 );
 
-const emit = defineEmits([
-  'update:totalTime',
-  'currentTime',
-  'playEnd',
-  'mainVideoStartPlay',
-  'mainVideoPlayEnd',
-  'update:progress',
-  'update:playMainIndex',
-  'mainVideoListChange',
-]);
+const emit = defineEmits(['currentTime', 'playEnd', 'update:progress', 'update:playMainIndex', 'mainVideoListChange']);
 
 const store = useStore();
 const videoNum = computed(() => store.getters['live/getVideoNum']);
 const liveVideoStatus = computed(() => store.getters['live/getLiveVideoStatus']);
 
+// 视频类型
+const liveInfo = ref({});
 const loop = ref(false);
 const footerStatus = ref(false);
 const showFirstVideo = ref(true);
@@ -148,26 +137,79 @@ const closeInterval = () => {
 const confirm = () => {
   openInterval();
   onPlay();
-  videoFirstPlay.value = false;
-  emit('mainVideoStartPlay', props.mainIndex);
 };
 
 // 主视频可以播放
 const mainVideoCanplay = (index: number) => {
   // 获取视频总时长
   let mainVideoTotalTime = videoFirst.value[index].duration;
-  emit('mainVideoListChange', index, 'total', mainVideoTotalTime);
-  if (!videoFirstPlay.value) {
-    //
-    onPlay();
-    emit('mainVideoStartPlay', props.mainIndex);
-  }
+
+  emit('mainVideoListChange', {
+    index: index,
+    key: 'total',
+    value: mainVideoTotalTime,
+  });
+};
+
+// 主视频播放要更新的状态
+const mainVideoPlayStatus = (index: number) => {
+  emit('mainVideoListChange', {
+    index: index,
+    key: 'play',
+    value: true,
+  });
+  emit('mainVideoListChange', {
+    index: index,
+    key: 'show',
+    value: true,
+  });
+};
+
+// 下一个要播放的视频
+const nextVideoToPlay = () => {
+  const { mainVideoList } = props;
+  return mainVideoList.findIndex((item: any) => item.url && !item.playEnd && !item.play);
 };
 
 // 主视频播放完毕
-const firstVideoEnded = () => {
-  if (videoFirst.value.ended) {
-    emit('mainVideoPlayEnd', props.mainIndex);
+const firstVideoEnded = (index: number) => {
+  if (videoFirst.value[index].ended) {
+    // 播放状态
+    emit('mainVideoListChange', {
+      index: index,
+      key: 'play',
+      value: false,
+    });
+    // 播放结束
+    emit('mainVideoListChange', {
+      index: index,
+      key: 'playEnd',
+      value: true,
+    });
+    // 视频状态(完成)
+    emit('mainVideoListChange', {
+      index: index,
+      type: 'videoIndex',
+      videoKey: 'status',
+      videoValue: true,
+    });
+
+    if (!loop.value) {
+      // 找到下一个要播放的
+      let nextIndex = nextVideoToPlay();
+      if (nextIndex !== -1) {
+        console.log('开始播放下一个主视频');
+        mainVideoPlayStatus(nextIndex);
+        videoFirst.value[nextIndex].play();
+        // 更新当前正在播放的video标签下标
+        emit('update:playMainIndex', nextIndex);
+      } else {
+        console.log(props.mainVideoList);
+        console.log('未找到下一条视频');
+      }
+    } else {
+      console.log('循环播放不需要找下一个视频');
+    }
   }
 };
 
@@ -176,7 +218,7 @@ const secondVideoEnded = () => {
   if (videoSecond.value?.ended) {
     emit('playEnd', props.playId);
     showFirstVideo.value = true;
-    videoFirst.value?.play();
+    videoFirst.value[currentPlayMainIndex.value].play();
   }
 };
 
@@ -194,21 +236,22 @@ const canplay2 = () => {
 };
 
 const secondPlay = () => {
-  videoFirst.value?.pause();
+  videoFirst.value[currentPlayMainIndex.value].pause();
   videoSecond.value?.play();
 };
 
 // 主视频播放
 const onPlay = () => {
-  console.log('执行几次');
   // 找到要播放的
   const { mainVideoList } = props;
   let index = mainVideoList.findIndex((item: any) => !item.playEnd && item.url && !item.play);
   if (index !== -1) {
+    // 更新状态
+    mainVideoPlayStatus(index);
+    console.log(index, '开始播放', mainVideoList[index]);
     // 开始播放
     videoFirst.value[index].play();
-    // 更新状态
-    emit('mainVideoListChange', index, 'play', true);
+    emit('update:playMainIndex', index);
   }
   // 第一个视频连带着第二个视频一起播放--立马暂停是为了处理后续进来的视频
   videoSecond.value.play();
@@ -217,7 +260,7 @@ const onPlay = () => {
 };
 
 const onStop = () => {
-  videoFirst.value.pause();
+  videoFirst.value[currentPlayMainIndex.value].pause();
 };
 
 watch(
@@ -233,9 +276,9 @@ watch(
 watch(
   () => props.eplay,
   (v) => {
-    videoFirst.value.currentTime = 0;
+    videoFirst.value[currentPlayMainIndex.value].currentTime = 0;
     // 播放video
-    videoFirst.value.play();
+    videoFirst.value[currentPlayMainIndex.value].play();
   },
 );
 
@@ -243,13 +286,18 @@ watch(
 watch(
   () => props.liveDetail,
   (v) => {
-    if (v && v.is_disorganize === 0) {
+    if (v) {
+      liveInfo.value = v;
+      if (v.type == scriptTypePhonetics) {
+        // 音频类型--不洗稿，但是要获取轮询获取下一个视频
+      } else if (v.is_disorganize === 0) {
         // 不洗稿，开启循环播放
         console.log('不洗稿，开启循环播放');
         loop.value = true;
       } else {
         console.log('需要洗稿,loop设置false');
       }
+    }
   },
 );
 
@@ -278,11 +326,15 @@ watch(
 );
 
 const updateTime = () => {
-  if (total.value) {
+  let row = videoFirst.value[currentPlayMainIndex.value];
+  // 获取当前下标的total
+  const { mainVideoList } = props;
+  let total = mainVideoList[currentPlayMainIndex.value].total;
+  if (total) {
     // 计算百分比
-    emit('update:progress', Math.floor((videoFirst.value.currentTime / total.value) * 100));
+    emit('update:progress', Math.floor((row.currentTime / total) * 100));
     // 提交当前进度
-    emit('currentTime', videoFirst.value.currentTime);
+    emit('currentTime', currentPlayMainIndex.value, row.currentTime);
   }
 };
 // 减小正在播放的视频音量

src/components/MultipleUpload/index.tsx

@@ -172,9 +172,11 @@ export default defineComponent({
         if (item.url) {
           list.push(item.url);
           // 计算文件大小
+          if (item.file) {
             totalSize += item.file.size;
           }
         }
+      }
       submitList(list, false);
       if (list.length === fileList.value.length) {
         // 全部上传成功才提交change事件

src/pages/createLive/components/scripts.vue

@@ -434,7 +434,14 @@ const updateInfo = (info: any) => {
     } else if (info.content) {
       // 草稿
       type = info.content.type;
+      console.log(type);
+      if (type == scriptTypeText) {
+        // 文本
+        type_content = info.content.content;
+      } else {
+        // 音频
         type_content = info.content.type_content;
+      }
       phonetic_timbres_id = info.content.phonetic_timbres_id ? info.content.phonetic_timbres_id : '';
       tone_id = info.content.tone_id ? info.content.tone_id : '';
     }
@@ -452,7 +459,7 @@ const updateInfo = (info: any) => {
     } else {
       // 音频
       currentOption.value = scriptTypePhonetics;
-      // mp3Url.value = type_content;
+      if (route.query.type == 'edit') {
         if (type_content) {
           audioScriptList.value = type_content.map((item: any) => {
             return {
@@ -462,6 +469,23 @@ const updateInfo = (info: any) => {
         } else {
           audioScriptList.value = [];
         }
+      } else {
+        // 草稿
+        if (type_content) {
+          audioScriptList.value = type_content.map((item: any) => {
+            item.forEach((it: any) => {
+              it.audio_url = it.content;
+              it.status = true;
+              it.url = it.content;
+            });
+            return {
+              data: item,
+            };
+          });
+        } else {
+          audioScriptList.value = [];
+        }
+      }
 
       if (phonetic_timbres_id) {
         phoneticsValue.value = phonetic_timbres_id;

src/pages/createLive/index.vue

@@ -219,17 +219,17 @@ const getEditInfo = async (id: any, type: string) => {
           [createLiveKeys.commentMethod]: 1,
           [createLiveKeys.interactiveLibrary]: content.interaction_ids,
         };
-        if (res.data.type == '2') {
+        if (content.type == '2') {
           // 文本
           params[createLiveKeys.textSoundColor] = content.phonetic_timbres_id ? content.phonetic_timbres_id : '';
-          if (content.type_content) {
-            params[createLiveKeys.textScriptList] = [content.type_content];
+          if (content.content) {
+            params[createLiveKeys.textScriptList] = [content.content];
           }
         } else {
           // 音频音色
           params[createLiveKeys.phoneticsSoundColor] = content.phonetic_timbres_id ? content.phonetic_timbres_id : '';
           if (content.type_content) {
-            params[createLiveKeys.phoneticsFile] = content.type_content.map((item: any) => {
+            params[createLiveKeys.audioScriptList] = content.type_content.map((item: any) => {
               return {
                 data: item,
               };

src/utils/request.ts

@@ -11,8 +11,8 @@ const getBaseUrl = () => {
     // return 'http://156.247.11.21:92/';
     return '';
   }
-  return 'http://video-assistant.test';
-  // return 'http://156.247.11.21:92/';
+  // return 'http://video-assistant.test';
+  return 'http://156.247.11.21:92/';
 };
 
 const instance = axios.create({

vite.config.ts

@@ -26,9 +26,9 @@ export default defineConfig(({ command, mode }) => {
     plugins: [
       createVuePlugin(),
       vueJsx(),
-      eslintPlugin({
-        include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue'],
-      }),
+      // eslintPlugin({
+      //   include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue'],
+      // }),
       viteMockServe({
         mockPath: 'mock',
         localEnabled: true,