处理标签切换视频暂停的BUG

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

@@ -64,7 +64,14 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, toRaw } from 'vue';
+import {
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+  toRaw,
+} from 'vue';
 import { Loading, Page } from '@vben/common-ui';
 import ChannelTree from './channel-tree.vue';
 import mpegts from 'mpegts.js';
@@ -363,7 +370,7 @@ function doPlayer(nodeData: any, index: number = 0) {
     streamProxy(nodeData, (res: AddStreamProxyResult) => {
       const host = window.location.host;
       const url = `ws://${host}/${res.app}/${res.streamId}.live.flv`;
-      // const url = `ws://183.230.235.66:11010/${res.app}/${res.streamId}.live.flv`;
+      // const url = `ws://192.168.24.101:28080/${res.app}/${res.streamId}.live.flv`;
       // 将url 绑定到 nodeData
       nodeData.url = url;
       closePlayer(index);
@@ -402,13 +409,13 @@ function doPlayer(nodeData: any, index: number = 0) {
   }
 }
 
-function closePlayVieo(plInfo: any) {
+function closePlayVieo(player: any) {
-  if (plInfo) {
+  if (player) {
     try {
-      plInfo.pause(); // 暂停
+      player.pause(); // 暂停
-      plInfo.unload(); // 卸载
+      player.unload(); // 卸载
-      plInfo.detachMediaElement();
+      player.detachMediaElement();
-      plInfo.destroy(); // 销毁
+      player.destroy(); // 销毁
       treeSelectHandle();
     } catch (e) {
       console.log('播放器关闭失败，e=', e);
@@ -448,6 +455,28 @@ onUnmounted(() => {
   }
 });
 
+onActivated(() => {
+  if (cachePlayerData.length != 0) {
+    cachePlayerData.forEach((v, k) => {
+      doPlayer(v, k);
+    });
+  }
+  cachePlayerData = [];
+});
+
+let cachePlayerData: any[] = [];
+// 离开页面触发
+onDeactivated(() => {
+  // 为了避免浪费带宽和性能，离开页面的时候默认关闭当前播放的视频
+  playerList.forEach((playerInfo) => {
+    if (playerInfo) {
+      const { data, player } = playerInfo;
+      cachePlayerData.push(data);
+      closePlayer(player);
+    }
+  });
+});
+
 function catchUp() {
   playerList.forEach((playerData) => {
     if (playerData) {