解决闪屏问题

7227ad85 · haojie · 298da579 · 7227ad85 · 7227ad85 · 7227ad85
Commit 7227ad85 authored Aug 07, 2023 by haojie
7 changed files
--- a/src/components/AddVideoPlay.vue
+++ b/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([
+const emit = defineEmits(['currentTime', 'playEnd', 'update:progress', 'update:playMainIndex', 'mainVideoListChange']);
-  'update:totalTime',
-  'currentTime',
-  'playEnd',
-  'mainVideoStartPlay',
-  'mainVideoPlayEnd',
-  '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) {
+  emit('mainVideoListChange', {
-    //
+    index: index,
-    onPlay();
+    key: 'total',
-    emit('mainVideoStartPlay', props.mainIndex);
+    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 = () => {
+const firstVideoEnded = (index: number) => {
-  if (videoFirst.value.ended) {
+  if (videoFirst.value[index].ended) {
-    emit('mainVideoPlayEnd', props.mainIndex);
+    // 播放状态
+    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('update:playMainIndex', index);
-    emit('mainVideoListChange', index, 'play', true);
  }
  // 第一个视频连带着第二个视频一起播放--立马暂停是为了处理后续进来的视频
  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);
  }
 };
 // 减小正在播放的视频音量

--- a/src/components/MultipleUpload/index.tsx
+++ b/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事件

--- a/src/pages/OnlyVideoLive/index.vue
+++ b/src/pages/OnlyVideoLive/index.vue
--- a/src/pages/createLive/components/scripts.vue
+++ b/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;

--- a/src/pages/createLive/index.vue
+++ b/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) {
+          if (content.content) {
-            params[createLiveKeys.textScriptList] = [content.type_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,
              };

--- a/src/utils/request.ts
+++ b/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://video-assistant.test';
-  // return 'http://156.247.11.21:92/';
+  return 'http://156.247.11.21:92/';
 };
 const instance = axios.create({

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