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

298da579 · haojie · 9be8cbdd · 298da579 · 298da579 · 298da579
Commit 298da579 authored Aug 04, 2023 by haojie
Hide whitespace changes
Inline Side-by-side

Showing with 125 additions and 34 deletions

src/components/AddVideoPlay.vue
+59 -28

src/components/MultipleUpload/index.less
+0 -2

src/layouts/components/Content.vue
+0 -1

src/pages/OnlyVideoLive/index.vue
+66 -3

No files found.
--- a/src/components/AddVideoPlay.vue
+++ b/src/components/AddVideoPlay.vue
 <template>
  <div class="add-video-play">
    <!-- <button @click="onPlay">开始播放</button> -->
-    <video
+    <div class="main-video-play" v-show="showFirstVideo">
-      v-show="showFirstVideo"
+      <template v-for="(item, index) in mainVideoList" :key="item.name">
-      :volume="firstVideoVolume"
+        <video
-      ref="videoFirst"
+          v-show="item.show"
-      class="video-default"
+          :volume="firstVideoVolume"
-      :src="video1"
+          ref="videoFirst"
-      :loop="loop"
+          class="video-default"
-      @canplay="canplay"
+          :src="item.url"
-      @ended="firstVideoEnded"
+          :loop="loop"
-    ></video>
+          @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;
+  let mainVideoTotalTime = videoFirst.value[index].duration;
-  console.log('本次主视频总时长', total.value);
+  emit('mainVideoListChange', index, 'total', mainVideoTotalTime);
-  emit('update:totalTime', total.value);
  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) {
+    if (v.play === false) {
-      loading.value = false;
+      //
-      footerStatus.value = null;
+      onStop();
    }
  },
-  {
+);
-    immediate: true,
+watch(
+  () => props.playMainIndex,
+  (v) => {
+    currentPlayMainIndex.value = v;
  },
 );
 watch(
-  () => liveVideoStatus.value,
+  () => currentPlayMainIndex.value,
  (v) => {
-    if (v.play === false) {
+    emit('update:playMainIndex', v);
-      //
-      onStop();
-    }
  },
 );
@@ -294,5 +321,9 @@ onBeforeUnmount(() => {
    width: 100%;
    height: 100%;
  }
+  .main-video-play {
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>
--- a/src/components/MultipleUpload/index.less
+++ b/src/components/MultipleUpload/index.less
@@ -109,7 +109,5 @@
        }
      }
    }
-    .keep-upload-btn {
-    }
  }
 }
--- a/src/layouts/components/Content.vue
+++ b/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);
  },

--- a/src/pages/OnlyVideoLive/index.vue
+++ b/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('回调格式错误');