fix(external/Componse): 修复摄像头更换源地址无法播放问题

@@ -4,7 +4,7 @@ import { CameraConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
 
 
 export const option = {
 export const option = {
-  dataset: 'http://113.204.115.250:83/openUrl/4itVrfG/live.m3u8'
+  dataset: 'http://113.204.115.250:83/openUrl/zXuPw5y/live.m3u8'
 }
 }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <template>
 <template>
   <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
   <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
     <video id="my-player" ref="videoRef" class="video-js my-video">
     <video id="my-player" ref="videoRef" class="video-js my-video">
-      <source :src="props.chartConfig.option.dataset" />
+      <source :src="dataset" />
     </video>
     </video>
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, onMounted, ref, watch, toRefs } from 'vue'
+import { PropType, onMounted, ref, watch, toRefs, onUnmounted } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import videojs from 'video.js'
 import videojs from 'video.js'
 import type { VideoJsPlayerOptions } from 'video.js'
 import type { VideoJsPlayerOptions } from 'video.js'
@@ -21,44 +21,49 @@ const props = defineProps({
 
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 
 
+const { dataset } = toRefs(props.chartConfig.option)
+
 // video标签
 // video标签
 const videoRef = ref<HTMLElement | null>(null)
 const videoRef = ref<HTMLElement | null>(null)
 
 
 // video实例对象
 // video实例对象
 let videoPlayer: videojs.Player | null = null
 let videoPlayer: videojs.Player | null = null
 
 
+//options配置
+const options: VideoJsPlayerOptions = {
+  language: 'zh-CN', // 设置语言
+  controls: true, // 是否显示控制条
+  preload: 'auto', // 预加载
+  autoplay: true, // 是否自动播放
+  fluid: false, // 自适应宽高
+  src: dataset?.value, // 要嵌入的视频源的源 URL
+  userActions: {
+    hotkeys: true
+  }
+}
+
 // 初始化videojs
 // 初始化videojs
 const initVideo = () => {
 const initVideo = () => {
-  const options: VideoJsPlayerOptions = {
-    language: 'zh-CN', // 设置语言
-    controls: true, // 是否显示控制条
-    preload: 'auto', // 预加载
-    autoplay: true, // 是否自动播放
-    fluid: false, // 自适应宽高
-    src: props.chartConfig.option.dataset, // 要嵌入的视频源的源 URL
-    userActions: {
-      hotkeys: true
-    }
-  }
   if (videoRef.value) {
   if (videoRef.value) {
     // 创建 video 实例
     // 创建 video 实例
-    videoPlayer = videojs(videoRef.value, options, onPlayerReady)
+    videoPlayer = videojs(videoRef.value, options)
   }
   }
 }
 }
 
 
-// video初始化完成的回调函数
-const onPlayerReady = () => {}
-
 onMounted(() => {
 onMounted(() => {
   initVideo()
   initVideo()
 })
 })
 
 
+onUnmounted(() => {
+  videoPlayer?.dispose()
+})
+
 watch(
 watch(
   () => props.chartConfig.option.dataset,
   () => props.chartConfig.option.dataset,
   newData => {
   newData => {
-    console.log(newData)
     props.chartConfig.option.dataset = newData
     props.chartConfig.option.dataset = newData
-    initVideo()
+    videoPlayer?.src(newData)
+    videoPlayer?.play()
   }
   }
 )
 )
 </script>
 </script>