perf(src/packages): 优化单个摄像头

-<template>
-  <video
-    crossOrigin="anonymous"
-    :id="`my-player${index}`"
-    ref="videoRef"
-    class="video-js my-video vjs-theme-city vjs-big-play-centered"
-  >
-    <source :src="sourceSrc" />
-  </video>
-</template>
-<script setup lang="ts">
-import { onMounted, ref, onUnmounted, watch } from 'vue'
-import videojs from 'video.js'
-import type { VideoJsPlayerOptions } from 'video.js'
-import 'video.js/dist/video-js.min.css'
-
-const props = defineProps({
-  sourceSrc: {
-    type: String
-  },
-  name: {
-    type: String
-  },
-  avatar: {
-    type: String
-  },
-  index: {
-    type: Number
-  },
-  autoplay: {
-    type: Boolean,
-    default: false
-  }
-})
-
-// video标签
-const videoRef = ref<HTMLElement | null>(null)
-
-// video实例对象
-let videoPlayer: videojs.Player | null = null
-
-//options配置
-const options: VideoJsPlayerOptions = {
-  language: 'zh-CN', // 设置语言
-  controls: true, // 是否显示控制条
-  preload: 'auto', // 预加载
-  autoplay: props.autoplay, // 是否自动播放
-  fluid: false, // 自适应宽高
-  poster: props?.avatar || '',
-  src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
-  muted: true,
-  userActions: {
-    hotkeys: true
-  }
-}
-
-// 初始化videojs
-const initVideo = () => {
-  if (videoRef.value) {
-    // 创建 video 实例
-    videoPlayer = videojs(videoRef.value, options)
-  }
-}
-
-watch(
-  () => props.sourceSrc,
-  (newData: any) => {
-    // props.sourceSrc = newData
-    videoPlayer?.src(newData) as any
-    videoPlayer?.play()
-  },
-  {
-    immediate: true
-  }
-)
-
-onMounted(() => {
-  initVideo()
-})
-
-onUnmounted(() => {
-  handleVideoDispose()
-})
-
-//播放
-const handleVideoPlay = () => videoPlayer?.play()
-
-const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
-//暂停
-defineExpose({
-  handleVideoPlay,
-  handleVideoDispose
-})
-</script>
-
-<style lang="scss" scoped>
-.my-video {
-  width: 100%;
-  height: 100%;
-}
-</style>

+<template>
+  <div class="videoPlay">
+    <video crossOrigin="anonymous" ref="videoRef" class="video-js vjs-default-skin vjs-big-play-centered" controls>
+      <source :src="path" />
+    </video>
+  </div>
+</template>
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import videojs, { VideoJsPlayer } from 'video.js'
+import type { VideoJsPlayerOptions } from 'video.js'
+import 'video.js/dist/video-js.css'
+import zh from 'video.js/dist/lang/zh-CN.json'
+
+const props = withDefaults(
+  defineProps<{
+    path: string
+    autoPlay?: boolean
+    h?: number
+  }>(),
+  { autoPlay: false }
+)
+
+const videoRef = ref()
+
+let player: VideoJsPlayer
+
+const initPlay = async () => {
+  videojs.addLanguage('zh-CN', zh)
+  await nextTick()
+  const options: VideoJsPlayerOptions = {
+    muted: true,
+    controls: true,
+    autoplay: props.autoPlay,
+    src: props?.path,
+    language: 'zh-CN',
+    techOrder: ['html5']
+  }
+  player = videojs(videoRef.value, options, () => {
+    videojs.log('播放器已经准备好了!')
+    if (props.autoPlay) {
+      player.play()
+    }
+    player.on('ended', () => {
+      videojs.log('播放结束了!')
+    })
+    player.on('error', () => {
+      videojs.log('播放器解析出错!')
+    })
+  })
+}
+
+onMounted(() => {
+  initPlay()
+})
+
+//直接改变路径测试
+watch(
+  () => props.path,
+  () => {
+    player?.pause()
+    player?.src(props.path)
+    player?.load()
+    if (props.path) {
+      player?.play()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+onBeforeUnmount(() => {
+  player?.dispose()
+})
+</script>
+<style lang="scss" scoped>
+.videoPlay {
+  flex: 1;
+  height: v-bind('`${h}px`');
+
+  .video-js {
+    height: 100%;
+    width: 100%;
+  }
+}
+</style>

-import CameraItem from './CameraItem.vue'
+import VideoPlay from './VideoPlay.vue'
 
-export { CameraItem }
+export { VideoPlay }

@@ -4,11 +4,7 @@ import { SingleCameraConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  dataset: [
-    {
-      url: ''
-    }
-  ] as any,
+  dataset: '',
   autoplay: false,
 }
 

 <template>
   <CollapseItem name="播放器配置" :expanded="true">
     <setting-item-box name="源地址" :alone="true">
-      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
+      <setting-item>
         <n-input-group>
-          <n-input v-model:value="item.url" size="small" placeholder="请输入源地址"></n-input>
+          <n-input v-model:value="optionData.dataset" size="small" placeholder="请输入源地址"></n-input>
         </n-input-group>
       </setting-item>
     </setting-item-box>

 <template>
-  <div class="banner-box" ref="root">
-    <n-grid x-gap="12" :y-gap="12" :cols="computedCols">
-      <n-gi v-for="(item, index) in option.dataset" :key="index + item">
-        <div class="camera-container">
-          <CameraItem
-            ref="cameraRef"
-            :name="item.name"
-            :avatar="item.avatar"
-            :key="item + index"
-            :sourceSrc="item.url"
-            :index="index"
-            :autoplay="autoplay"
-          />
-        </div>
-      </n-gi>
-    </n-grid>
+  <div>
+    <VideoPlay :h="h" :path="option.dataset" :autoPlay="autoplay" />
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs, watch, shallowReactive, ref, computed } from 'vue'
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import 'video.js/dist/video-js.min.css'
 import { option as configOption } from './config'
-import { CameraItem } from './components'
+import { VideoPlay } from './components'
 
 const props = defineProps({
   chartConfig: {
@@ -33,54 +18,21 @@ const props = defineProps({
 
 const { h } = toRefs(props.chartConfig.attr)
 
-const { autoplay } = toRefs(props.chartConfig.option)
-
-const responsiveComputeValue = ref(0)
+const { autoplay, dataset } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
   dataset: configOption.dataset
 })
 
-const computedCols = computed(() => {
-  if (option.dataset.length <= 1) return 1
-  if (option.dataset.length <= 4) return 2
-  return 3
-})
-
-const cameraRef = ref<InstanceType<typeof CameraItem>>()
-
-const responsive = (value: number) => {
-  responsiveComputeValue.value = value
-  if (option.dataset.length <= 2) responsiveComputeValue.value = value
-  if (option.dataset.length > 2 && option.dataset.length <= 4) responsiveComputeValue.value = value / 2.03
-  if (option.dataset.length > 4 && option.dataset.length <= 9) responsiveComputeValue.value = value / 3.1
-}
-
 watch(
-  () => props.chartConfig.option.dataset,
-  newData => {
+  () => dataset?.value,
+  (newData: string) => {
     option.dataset = newData
-    responsive(h.value)
   },
   {
     immediate: true,
-    deep: true
-  }
-)
-
-watch(
-  () => h.value,
-  newData => responsive(newData),
-  {
-    immediate: true
   }
 )
 </script>
 
-<style lang="scss" scoped>
-.banner-box {
-  .camera-container {
-    height: v-bind('`${responsiveComputeValue}px`');
-  }
-}
-</style>
+<style lang="scss" scoped></style>