视频播放操作逻辑优化

apps/web-antd/src/views/sis/video/index.vue

@@ -19,29 +19,43 @@
             v-for="i in playerNum"
             :style="playerStyle"
             class="player"
-            :class="`layer-${i} ${currentSelectPlayerIndex == i ? selected : ''}`"
-            @click="playerSelect(i)"
+            :class="`layer-${i - 1} ${currentSelectPlayerIndex == i - 1 ? selected : ''}`"
+            @click="playerSelect(i - 1)"
           >
-            <video
-              style="width: 100%; height: 100%"
-              :ref="setItemRef"
-              muted
-              autoplay
-            ></video>
+            <Loading
+              :spinning="playerLoading[i - 1]"
+              text="加载中..."
+              class="flex h-full w-full items-center justify-center"
+            >
+              <video
+                style="width: 100%; height: 100%"
+                :ref="(el) => setItemRef(i - 1, el)"
+                muted
+                autoplay
+              ></video>
+            </Loading>
           </div>
         </div>
         <div class="player-area flex h-[30px] gap-[5px]">
-          <div @click="onPlayerNumChanged(1)" class="h-[20px] w-[20px]">
-            <Svg1FrameIcon style="width: 100%; height: 100%" />
-          </div>
-          <div @click="onPlayerNumChanged(2)" class="h-[20px] w-[20px]">
-            <Svg4FrameIcon style="width: 100%; height: 100%" />
-          </div>
-          <div @click="onPlayerNumChanged(3)" class="h-[20px] w-[20px]">
-            <Svg9FrameIcon style="width: 100%; height: 100%" />
-          </div>
-          <div @click="onPlayerNumChanged(4)" class="h-[20px] w-[20px]">
-            <Svg16FrameIcon style="width: 100%; height: 100%" />
+          <div
+            v-for="key in 4"
+            @click="onPlayerNumChanged(key)"
+            :class="playerSelectItemIndex == key ? selected : ''"
+            class="btn-item h-[20px] w-[20px]"
+          >
+            <Svg1FrameIcon v-if="key == 1" style="width: 100%; height: 100%" />
+            <Svg4FrameIcon
+              v-else-if="key == 2"
+              style="width: 100%; height: 100%"
+            />
+            <Svg9FrameIcon
+              v-else-if="key == 3"
+              style="width: 100%; height: 100%"
+            />
+            <Svg16FrameIcon
+              v-else-if="key == 4"
+              style="width: 100%; height: 100%"
+            />
           </div>
         </div>
       </div>
@@ -51,7 +65,7 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, toRaw } from 'vue';
-import { Page } from '@vben/common-ui';
+import { Loading, Page } from '@vben/common-ui';
 import ChannelTree from './channel-tree.vue';
 import mpegts from 'mpegts.js';
 import { message } from 'ant-design-vue';
@@ -67,30 +81,41 @@ import type { AddStreamProxyResult } from '#/api/sis/stream/model';
 
 const selected = 'selected';
 
-const itemRefs = ref<HTMLVideoElement[]>([]);
-const setItemRef = (el: any) => {
-  if (el) {
-    itemRefs.value.push(el);
-  }
+const itemRefs: any[] = [];
+const setItemRef = (index: number, el: any) => {
+  itemRefs[index] = el;
 };
 
-/**
- * 屏幕播放器数量
- */
-const playerNum = ref(1);
-/**
- * 屏幕播放器样式
- */
+//屏幕播放器样式
 const playerStyle = ref({
   width: '100%',
   height: '100%',
 });
+// 播放器配置
+const playerConfig = {
+  enableErrorRecover: true, // 启用错误恢复
+  autoCleanupMaxBackwardDuration: 30,
+  autoCleanupMinBackwardDuration: 10,
+};
+//屏幕播放器数量
+const playerNum = ref(1);
+// 播放器数量控制按钮组索引
+const playerSelectItemIndex = ref(1);
+// 当前选择的播放器索引,默认选中第一个
+const currentSelectPlayerIndex = ref(0);
+// 播放器数据, 每一个位置代表页面上行的一个矩形
+const playerList: any[] = [];
+// 播放器loading
+const playerLoading = ref<boolean[]>([]);
 
-const currentSelectPlayerIndex = ref(1);
+// 当前选择播放器的key
+const currentSelectKey = ref('');
+// 当前所有的播放设备key
+const selectKeys = ref<string[]>([]);
 
 function playerSelect(index: number) {
   currentSelectPlayerIndex.value = index;
-  const player = playerList[index - 1];
+  const player = playerList[index];
   if (player) {
     currentSelectKey.value = player.key;
   } else {
@@ -104,8 +129,8 @@ function playerSelect(index: number) {
  */
 function onPlayerNumChanged(val: number) {
   // 1个屏幕
-  const changeBeforeNum = playerNum.value;
   let changeNum = 1;
+  playerSelectItemIndex.value = val;
   if (val === 1) {
     playerStyle.value = {
       width: '100%',
@@ -137,26 +162,18 @@ function onPlayerNumChanged(val: number) {
     changeNum = 16;
   }
   playerNum.value = changeNum;
-  // 缩小布局
-  if (changeBeforeNum > changeNum) {
-    const playerArr = [];
-    for (let i = 0; i < playerList.length; i++) {
-      const playerBox = playerList[i];
-      if (playerBox) {
-        playerArr.push(playerBox);
-      }
-      playerList[i] = null;
-    }
-    for (let i = 0; i < playerArr.length; i++) {
-      const play = playerArr[i];
-      if (i < changeNum) {
-        // 获取播放元素
-        changeElPlayer(play, i);
-      } else {
-        closePlayVieo(play.player);
+  // 缩小布局,超过当前播放器的都关闭
+  for (let i = 0; i < playerList.length; i++) {
+    const playInfo = playerList[i];
+    if (i >= changeNum) {
+      if (playInfo) {
+        closePlayVieo(playInfo.player);
       }
     }
   }
+
+  // 处理树节点状态
+  treeSelectHandle();
 }
 
 /**
@@ -177,13 +194,6 @@ function handleParentNoe(node: any, newNode: any[] = []) {
   }
 }
 
-// 播放器数据, 每一个位置代表页面上行的一个矩形
-const playerList: any[] = [];
-// 当前选择播放器的key
-const currentSelectKey = ref('');
-// 当前所有的播放设备key
-const selectKeys = ref<string[]>([]);
-
 function onTreeSelect(_key: any, selectNode: any) {
   const {
     selected,
@@ -193,7 +203,7 @@ function onTreeSelect(_key: any, selectNode: any) {
   if (level === 2) {
     // 播放
     if (selected) {
-      doPlayer(data, currentSelectPlayerIndex.value - 1);
+      doPlayer(data, currentSelectPlayerIndex.value);
     }
     // 取消播放
     else {
@@ -211,7 +221,7 @@ function onTreeSelect(_key: any, selectNode: any) {
 
 function treeSelectHandle() {
   // 此处player可能已经释放所以不可能在取到只
-  const player = playerList[currentSelectPlayerIndex.value - 1];
+  const player = playerList[currentSelectPlayerIndex.value];
   currentSelectKey.value = player ? player.key : '';
   const arr: string[] = [];
   playerList.forEach((item: any) => {
@@ -245,7 +255,7 @@ function onNodeChecked(
      * 如果当前页面有选择播放未知，并且播放视频只有一个，则播放到制定位置
      */
     if (currentSelectPlayerIndex.value !== -1 && checkNode.length == 1) {
-      doPlayer(checkNode[0], currentSelectPlayerIndex.value - 1);
+      doPlayer(checkNode[0], currentSelectPlayerIndex.value);
     }
     // 批量播放 currentSelectPlayerIndex 将不再生效
     else {
@@ -284,40 +294,33 @@ function onNodeChecked(
   }
 }
 
-function changeElPlayer(playerInfo: any, index: number) {
-  const playerData = playerInfo.data;
-  const oldPlayer = playerInfo.player;
-  if (oldPlayer) {
-    closePlayVieo(oldPlayer);
-  }
-  const videoConfig = {
-    type: 'flv',
-    url: playerData.url,
-    isLive: true,
-    hasAudio: false,
-    hasVideo: true,
-    enableWorker: true, // 启用分离的线程进行转码
-    enableStashBuffer: false, // 关闭IO隐藏缓冲区
-    stashInitialSize: 256, // 减少首帧显示等待时长
-  };
-  const playerConfig = {
-    enableErrorRecover: true, // 启用错误恢复
-    autoCleanupMaxBackwardDuration: 30,
-    autoCleanupMinBackwardDuration: 10,
-  };
-  const player = mpegts.createPlayer(videoConfig, playerConfig);
-  const videoElement = itemRefs.value[index];
-  if (videoElement) {
-    player.attachMediaElement(videoElement);
-    player.load();
-    player.play();
-    playerList[index] = {
-      player,
-      data: playerData,
-    };
-  } else {
-    console.log('视频播放元素获取异常');
-  }
+/**
+ * 添加媒体播放器事件监听
+ * @param index 媒体索引
+ * @param player 播放器对象
+ */
+function addPlayerListener(index: number, player: any) {
+  // 播放结束。
+  player.on(mpegts.Events.LOADING_COMPLETE, (...args: any[]) => {
+    console.log('LOADING_COMPLETE', args);
+  });
+  // 播放媒体数据
+  player.on(mpegts.Events.MEDIA_INFO, (...args: any[]) => {
+    console.log('MEDIA_INFO', args);
+    loading(index, 1);
+  });
+  // 播放媒体元数据到到达
+  player.on(mpegts.Events.METADATA_ARRIVED, (...args: any[]) => {
+    console.log('METADATA_ARRIVED', args);
+  });
+  // 统计播放数据
+  // player.on(mpegts.Events.STATISTICS_INFO, (...args: any[]) => {
+  // console.log('STATISTICS_INFO', args);
+  // });
+  // 播放异常
+  player.on(mpegts.Events.ERROR, (...args: any[]) => {
+    console.log('ERROR', args);
+  });
 }
 
 function streamProxy(nodeData: any, cb: Function) {
@@ -353,7 +356,6 @@ function streamProxy(nodeData: any, cb: Function) {
  * 开始播放视频流
  * @param nodeData 播放的节点数据
  * @param index 播放器的索引信息
- * @param callback 视频播放后的回调
  */
 function doPlayer(nodeData: any, index: number = 0) {
   console.log('index=', index);
@@ -375,13 +377,11 @@ function doPlayer(nodeData: any, index: number = 0) {
         enableStashBuffer: false, // 关闭IO隐藏缓冲区
         stashInitialSize: 256, // 减少首帧显示等待时长
       };
-      const playerConfig = {
-        enableErrorRecover: true, // 启用错误恢复
-        autoCleanupMaxBackwardDuration: 30,
-        autoCleanupMinBackwardDuration: 10,
-      };
+      // 开启loading
+      loading(index);
       const player = mpegts.createPlayer(videoConfig, playerConfig);
-      const videoElement = itemRefs.value[index];
+      addPlayerListener(index, player);
+      const videoElement = itemRefs[index];
       if (videoElement) {
         player.attachMediaElement(videoElement);
         player.load();
@@ -407,6 +407,7 @@ function closePlayVieo(plInfo: any) {
     try {
       plInfo.pause(); // 暂停
       plInfo.unload(); // 卸载
+      plInfo.detachMediaElement();
       plInfo.destroy(); // 销毁
       treeSelectHandle();
     } catch (e) {
@@ -419,31 +420,19 @@ function closePlayer(index: number) {
   // 如果播放器存在，尝试关闭
   const pData = playerList[index];
   if (pData) {
-    try {
-      const player = pData.player;
-      player.pause(); // 暂停
-      player.unload(); // 卸载
-      player.destroy(); // 销毁
-      playerList[index] = null;
-      treeSelectHandle();
-    } catch (e) {
-      console.log('播放器关闭失败，e=', e);
-    }
+    closePlayVieo(pData.player);
   }
 }
 
-function catchUp() {
-  playerList.forEach((playerData) => {
-    if (playerData) {
-      const { player, el } = playerData;
-      const end = player.buffered.end(player.buffered.length - 1);
-      const diff = end - el.currentTime;
-      if (diff > 2) {
-        // 如果延迟超过2秒
-        el.currentTime = end - 0.5; // 跳转到接近直播点
-      }
-    }
-  });
+/**
+ * 开启或关闭播放器loading
+ * @param index 播放器索引
+ * @param cmd 0:开启，1:关闭
+ */
+function loading(index: number, cmd: Number = 0) {
+  const loadinArr = [...playerLoading.value];
+  loadinArr[index] = cmd === 0;
+  playerLoading.value = loadinArr;
 }
 
 let isSupportH265 = false;
@@ -458,6 +447,20 @@ onUnmounted(() => {
     closePlayer(i);
   }
 });
+
+function catchUp() {
+  playerList.forEach((playerData) => {
+    if (playerData) {
+      const { player, el } = playerData;
+      const end = player.buffered.end(player.buffered.length - 1);
+      const diff = end - el.currentTime;
+      if (diff > 2) {
+        // 如果延迟超过2秒
+        el.currentTime = end - 0.5; // 跳转到接近直播点
+      }
+    }
+  });
+}
 </script>
 
 <style scoped>
@@ -484,5 +487,9 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   cursor: pointer;
+
+  .btn-item.selected {
+    color: #00a8ff;
+  }
 }
 </style>

apps/web-antd/vite.config.mts

@@ -27,7 +27,7 @@ export default defineConfig(async () => {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            target: 'http://localhost:8080',
+            target: 'http://183.230.235.66:11010/api/',
             ws: true,
           },
         },