直播页面切换视频闪烁问题，未解决

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
-      v-show="showFirstVideo"
+          v-show="item.show"
           :volume="firstVideoVolume"
           ref="videoFirst"
           class="video-default"
-      :src="video1"
+          :src="item.url"
           :loop="loop"
-      @canplay="canplay"
+          @canplay="mainVideoCanplay(index)"
           @ended="firstVideoEnded"
         ></video>
+      </template>
+    </div>
+    <!--  -->
     <video
       v-show="!showFirstVideo"
       ref="videoSecond"
@@ -20,7 +25,12 @@
       @ended="secondVideoEnded"
       @canplay="canplay2"
     ></video>
-    <ConfirmDialog v-model="confirmVisible" :closeOnOverlayClick="false" :footer="footerStatus" @confirm="confirm">
+    <ConfirmDialog
+      v-model="confirmVisible"
+      :closeOnOverlayClick="false"
+      :footer="loading === false ? null : false"
+      @confirm="confirm"
+    >
       <template #body>
         <template v-if="loading">
           <Loading></Loading>
@@ -45,6 +55,7 @@ import { show_message } from '@/utils/tool';
 
 const props = withDefaults(
   defineProps<{
+    playMainIndex: number | null;
     video1: string;
     video2: string;
     playId?: any;
@@ -53,6 +64,8 @@ const props = withDefaults(
     totalTime: number;
     liveDetail: any;
     eplay?: number;
+    mainVideoList: any[];
+    loading: boolean;
   }>(),
   {
     mainIndex: null,
@@ -67,6 +80,8 @@ const emit = defineEmits([
   'mainVideoStartPlay',
   'mainVideoPlayEnd',
   'update:progress',
+  'update:playMainIndex',
+  'mainVideoListChange',
 ]);
 
 const store = useStore();
@@ -74,7 +89,6 @@ const videoNum = computed(() => store.getters['live/getVideoNum']);
 const liveVideoStatus = computed(() => store.getters['live/getLiveVideoStatus']);
 
 const loop = ref(false);
-const loading = ref(true);
 const footerStatus = ref(false);
 const showFirstVideo = ref(true);
 // 第二个视频是否播放
@@ -88,6 +102,9 @@ const videoFirstPlay = ref(true);
 // 第二个视频是否首次播放
 const videoSecondFirstPlay = ref(true);
 
+// 当前正在播放的主视频下标
+const currentPlayMainIndex = ref(props.playMainIndex);
+
 /**
  * element
  */
@@ -136,11 +153,10 @@ const confirm = () => {
 };
 
 // 主视频可以播放
-const canplay = () => {
+const mainVideoCanplay = (index: number) => {
   // 获取视频总时长
-  total.value = videoFirst.value.duration;
-  console.log('本次主视频总时长', total.value);
-  emit('update:totalTime', total.value);
+  let mainVideoTotalTime = videoFirst.value[index].duration;
+  emit('mainVideoListChange', index, 'total', mainVideoTotalTime);
   if (!videoFirstPlay.value) {
     //
     onPlay();
@@ -182,8 +198,18 @@ const secondPlay = () => {
   videoSecond.value?.play();
 };
 
+// 主视频播放
 const onPlay = () => {
-  videoFirst.value.play();
+  console.log('执行几次');
+  // 找到要播放的
+  const { mainVideoList } = props;
+  let index = mainVideoList.findIndex((item: any) => !item.playEnd && item.url && !item.play);
+  if (index !== -1) {
+    // 开始播放
+    videoFirst.value[index].play();
+    // 更新状态
+    emit('mainVideoListChange', index, 'play', true);
+  }
   // 第一个视频连带着第二个视频一起播放--立马暂停是为了处理后续进来的视频
   videoSecond.value.play();
   videoSecond.value.pause();
@@ -228,25 +254,26 @@ watch(
 );
 
 watch(
-  () => props.video1,
+  () => liveVideoStatus.value,
   (v) => {
-    if (v) {
-      loading.value = false;
-      footerStatus.value = null;
+    if (v.play === false) {
+      //
+      onStop();
     }
   },
-  {
-    immediate: true,
+);
+
+watch(
+  () => props.playMainIndex,
+  (v) => {
+    currentPlayMainIndex.value = v;
   },
 );
 
 watch(
-  () => liveVideoStatus.value,
+  () => currentPlayMainIndex.value,
   (v) => {
-    if (v.play === false) {
-      //
-      onStop();
-    }
+    emit('update:playMainIndex', v);
   },
 );
 
@@ -294,5 +321,9 @@ onBeforeUnmount(() => {
     width: 100%;
     height: 100%;
   }
+  .main-video-play {
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>

src/components/MultipleUpload/index.less

@@ -109,7 +109,5 @@
         }
       }
     }
-    .keep-upload-btn {
-    }
   }
 }

src/layouts/components/Content.vue

@@ -42,7 +42,6 @@ const currentCacheList = ref(getCacheList());
 watch(
   () => keepAliveList.value,
   (v) => {
-    console.log('监听改变了');
     currentCacheList.value = getCacheList();
     console.log(currentCacheList.value);
   },

src/pages/OnlyVideoLive/index.vue

@@ -2,18 +2,22 @@
   <div class="custom-start-only-video-page">
     <div class="start-only-video-live">
       <AddVideoPlay
+        v-model:playMainIndex="currentPlayMainIndex"
         v-model:progress="progress"
         v-model:totalTime="totalTime"
+        :loading="loading"
         :mainIndex="mainVideoIndex"
         :playId="addVideoId"
         :video1="getCurrentMainVideo"
         :liveDetail="liveDetail"
         :video2="addVideo"
+        :mainVideoList="mainVideoList"
         :eplay="eplay"
         @playEnd="playEnd"
         @mainVideoPlayEnd="mainVideoPlayEnd"
         @mainVideoStartPlay="mainVideoStartPlay"
         @currentTime="currentTimeChange"
+        @mainVideoListChange="mainVideoListChange"
       ></AddVideoPlay>
     </div>
   </div>
@@ -41,6 +45,9 @@ const route = useRoute();
 const router = useRouter();
 const routeQuery = route.query;
 
+// 视频加载loading
+const loading = ref(true);
+
 const progress = ref(0);
 const eplay = ref(0);
 
@@ -84,6 +91,42 @@ const addVideoId = ref('');
 // 直播详情
 const liveDetail = ref({});
 
+// 当前正在播放的主视频下标
+const currentPlayMainIndex = ref(null);
+
+// 主视频列表
+const mainVideoList = ref([
+  {
+    name: 'mainVideo1',
+    // 播放链接
+    url: '',
+    // 当前视频是否播放完毕
+    playEnd: true,
+    // 是否正在播放
+    play: false,
+    show: true,
+    total: 0,
+    videoIndex: null,
+  },
+  {
+    name: 'mainVideo2',
+    // 播放链接
+    url: '',
+    // 当前视频是否播放完毕
+    playEnd: true,
+    play: false,
+    show: false,
+    total: 0,
+    videoIndex: null,
+  },
+]);
+
+// 主视频列表状态更新
+const mainVideoListChange = (index: number, key: string, value: any) => {
+  mainVideoList.value[index][key] = value;
+  console.log(mainVideoList.value[index], '状态');
+};
+
 const submitAudioTask = async (list: any[]) => {
   for (let i = 0; i < list.length; i++) {
     let params = {
@@ -173,7 +216,7 @@ const currentTimeChange = (value: number) => {
 
 // 主视频开始播放
 const mainVideoStartPlay = (index: number) => {
-  realVideoList.value[index].play = true;
+  // realVideoList.value[index].play = true;
 };
 
 // 主视频播放完毕
@@ -402,7 +445,7 @@ const submitVideo = () => {
   }
 };
 
-// 取主视频
+// 取主视频(v1)
 const takeMainVideo = () => {
   let index = realVideoList.value.findIndex((item: any) => !item.remove && item.result && !item.status);
   if (index !== -1) {
@@ -422,6 +465,25 @@ const takeMainVideo = () => {
   }
 };
 
+// 取主视频(v2)
+const takeMainVideoV2 = () => {
+  // 找到第一个播放完毕的
+  let index = mainVideoList.value.findIndex((item: any) => item.playEnd);
+  if (index !== -1) {
+    let videoIndex = realVideoList.value.findIndex((item: any) => !item.remove && item.result && !item.status);
+    if (videoIndex !== -1) {
+      // 存入视频
+      mainVideoList.value[index].url = realVideoList.value[videoIndex].result;
+      // 更新状态
+      mainVideoList.value[index].playEnd = false;
+      // 视频已被取走
+      realVideoList.value[videoIndex].remove = true;
+      // 视频加载完毕
+      loading.value = false;
+    }
+  }
+};
+
 // python 回调
 const mergeCallback = (params: any) => {
   try {
@@ -438,7 +500,8 @@ const mergeCallback = (params: any) => {
       let list = realVideoList.value.filter((item: any) => item.remove === true);
       if (!list.length) {
         console.log('首次播放');
-        takeMainVideo();
+        // takeMainVideo();
+        takeMainVideoV2();
       }
     } else {
       console.log('回调格式错误');