perf: use video.js refactor camera manage split mode

ww
1 parent b7ab75dd
Showing 2 changed files with 36 additions and 72 deletions
src/components/Video/src/VideoPlay.vue
src/views/camera/manage/SplitScreenMode.vue
--- a/src/components/Video/src/VideoPlay.vue
View file @6529af9
+++ b/src/components/Video/src/VideoPlay.vue
View file @6529af9
@@ -26,6 +26,7 @@
       muted: true,
       liveui: true,
       controls: true,
+      fluid: true,
     };
     return { ...defaultOptions, ...options };
   });
@@ -57,7 +58,7 @@
   <div :class="prefixCls" class="w-full h-full" :style="getWidthHeight">
     <video
       ref="videoPlayEl"
-      class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause w-full h-full"
+      class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-full !h-full"
     ></video>
   </div>
 </template>
--- a/src/views/camera/manage/SplitScreenMode.vue
View file @6529af9
+++ b/src/views/camera/manage/SplitScreenMode.vue
View file @6529af9
@@ -5,21 +5,27 @@
   import { Spin, Button, Pagination, Space, List } from 'ant-design-vue';
   import { cameraPage } from '/@/api/camera/cameraManager';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
-  import { videoPlay as VideoPlay } from 'vue3-video-play';
   import 'vue3-video-play/dist/style.css';
   import { useFullscreen } from '@vueuse/core';
   import CameraDrawer from './CameraDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
-  import { AccessMode, MediaType, PageMode } from './config.data';
+  import { AccessMode, PageMode } from './config.data';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
-  import { isDef } from '/@/utils/is';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
   import { buildUUID } from '/@/utils/uuid';
+  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
+  import { VideoJsPlayerOptions } from 'video.js';
   type CameraRecordItem = CameraRecord & {
     canPlay?: boolean;
-    type?: string;
     isTransform?: boolean;
+    videoPlayerOptions?: VideoJsPlayerOptions;
+  };
+
+  const basicVideoPlayOptions: VideoJsPlayerOptions = {
+    width: '100%' as unknown as number,
+    height: '100%' as unknown as number,
+    autoplay: true,
   };
   const emit = defineEmits(['switchMode']);
@@ -36,32 +42,6 @@
     total: 0,
   });
-  const options = reactive({
-    width: '200px',
-    height: '200px',
-    color: '#409eff',
-    muted: true, //静音
-    webFullScreen: false,
-    autoPlay: true, //自动播放
-    currentTime: 0,
-    loop: false, //循环播放
-    mirror: false, //镜像画面
-    ligthOff: false, //关灯模式
-    volume: 0.3, //默认音量大小
-    control: true, //是否显示控制器
-    type: 'm3u8',
-    controlBtns: [
-      'audioTrack',
-      'quality',
-      'speedRate',
-      'volume',
-      'setting',
-      'pip',
-      'pageFullScreen',
-      'fullScreen',
-    ],
-  });
-
   // 树形选择器
   const handleSelect = (orgId: string) => {
     organizationId.value = orgId;
@@ -80,7 +60,6 @@
       pagination.total = total;
       for (const item of items) {
-        // await beforeVideoPlay(item);
         (item as CameraRecordItem).isTransform = false;
         beforeVideoPlay(item);
       }
@@ -91,36 +70,46 @@
         }));
         items = [...items, ...fillArr];
       }
+      console.log(items);
       cameraList.value = items;
     } catch (error) {
     } finally {
       loading.value = false;
     }
   };
-  const getMediaType = (suffix: string) => {
-    return suffix === MediaType.M3U8 ? suffix : `video/${suffix}`;
-  };
   const beforeVideoPlay = async (record: CameraRecordItem) => {
-    let reg = /(?:.*)(?<=\.)/;
     if (record.accessMode === AccessMode.ManuallyEnter) {
       if (record.videoUrl) {
-        const type = record.videoUrl.replace(reg, '');
-        record.type = getMediaType(type);
+        (record as CameraRecordItem).videoPlayerOptions = {
+          ...basicVideoPlayOptions,
+          sources: [
+            {
+              src: record.videoUrl,
+              type: getVideoTypeByUrl(record.videoUrl),
+            },
+          ],
+        };
         record.isTransform = true;
       }
     }
     if (record.accessMode === AccessMode.Streaming) {
       try {
         const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
-        const type = url.replace(reg, '');
         const index = unref(cameraList).findIndex((item) => item.id === record.id);
         if (~index) {
           const oldRecord = unref(cameraList).at(index)!;
           unref(cameraList)[index] = {
             ...oldRecord,
-            videoUrl: url,
-            type: getMediaType(type),
+            videoPlayerOptions: {
+              ...basicVideoPlayOptions,
+              sources: [
+                {
+                  src: url,
+                  type: getVideoTypeByUrl(url),
+                },
+              ],
+            },
             isTransform: true,
           };
         }
@@ -160,20 +149,6 @@
     }
   };
-  const handleLoadStart = (record: CameraRecordItem) => {
-    const index = unref(cameraList).findIndex((item) => item.id === record.id);
-    setTimeout(() => {
-      ~index &&
-        !unref(cameraList).at(index)!.canPlay &&
-        (unref(cameraList).at(index)!.canPlay = false);
-    }, 30000);
-  };
-
-  const handleLoadData = (record: CameraRecordItem) => {
-    const index = unref(cameraList).findIndex((item) => item.id === record.id);
-    ~index && (unref(cameraList).at(index)!.canPlay = true);
-  };
-
   const [registerDrawer, { openDrawer }] = useDrawer();
   const handleAddCamera = () => {
@@ -264,24 +239,12 @@
                     v-if="!item.placeholder"
                     class="bg-black w-full h-full overflow-hidden relative video-container"
                   >
-                    <Spin v-show="!item.isTransform" :spinning="!item.isTransform">
-                      <div class="bg-black text-light-50"> </div>
-                    </Spin>
-                    <VideoPlay
-                      v-show="item.isTransform"
-                      @loadstart="handleLoadStart(item)"
-                      @loadeddata="handleLoadData(item)"
-                      v-bind="options"
-                      :src="item.videoUrl"
-                      :title="item.name"
-                      :type="item.type"
+                    <Spin
+                      class="!absolute top-1/2 left-1/2 transform -translate-1/2"
+                      v-show="!item.isTransform"
+                      :spinning="!item.isTransform"
                     />
-                    <div
-                      v-if="item.isTransform && isDef(item.canPlay) && !item.canPlay"
-                      class="video-container-error-msk absolute top-0 left-0 text-lg w-full h-full text-light-50 flex justify-center items-center z-50 bg-black"
-                    >
-                      视频加载出错了！
-                    </div>
+                    <BasicVideoPlay v-if="item.isTransform" :options="item.videoPlayerOptions" />
                     <div
                       class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
                       style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"