perf(src/packages/external/Informations): 修改多个摄像头，也支持gbt28181视频播放

-<template>
-  <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
-    <video crossOrigin="anonymous" :id="`my-player${index}`" ref="videoRef"
-      class="video-js my-video vjs-theme-city vjs-big-play-centered">
-    </video>
-  </div>
-</template>
-<script setup lang="ts">
-import { onMounted, ref, onUnmounted, watch, unref } from 'vue'
-import videojs from 'video.js'
-import 'videojs-flvjs-es6'
-import type { VideoJsPlayerOptions } from 'video.js'
-import 'video.js/dist/video-js.min.css'
-import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
-import { isShareMode } from '@/views/share/hook'
-import { getOpenFlvPlayUrl, closeFlvPlay } from '@/api/external/flvPlay'
-import { useFingerprint } from '@/utils/external/useFingerprint'
-import { GetResult } from '@fingerprintjs/fingerprintjs'
-
-const props = defineProps({
-  sourceSrc: {
-    type: String
-  },
-  name: {
-    type: String
-  },
-  avatar: {
-    type: String
-  },
-  w: {
-    type: Number,
-    default: 300
-  },
-  h: {
-    type: Number,
-    default: 300
-  },
-  index: {
-    type: Number
-  }
-})
-
-enum VideoPlayerType {
-  m3u8 = 'application/x-mpegURL',
-  mp4 = 'video/mp4',
-  webm = 'video/webm',
-  flv = 'video/x-flv',
-}
-
-const isRtspProtocol = (url: string) => {
-  const reg = /^rtsp:\/\//g;
-  return reg.test(url);
-};
-
-const getVideoTypeByUrl = (url = '') => {
-  try {
-    const { protocol, pathname } = new URL(url)
-
-    if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv
-
-    const reg = /[^.]\w*$/
-    const mathValue = pathname.match(reg) || []
-    const ext = mathValue[0] as keyof typeof VideoPlayerType || 'webm'
-    const type = VideoPlayerType[ext]
-    return type ? type : VideoPlayerType.webm
-  } catch (error) {
-    console.error(error)
-    return VideoPlayerType.webm
-  }
-};
-
-
-// video标签
-const videoRef = ref<HTMLElement | null>(null)
-
-// video实例对象
-let videoPlayer: videojs.Player | null = null
-
-const fingerprintResult = ref<Nullable<GetResult>>(null)
-
-//options配置
-const options: VideoJsPlayerOptions & Recordable = {
-  language: 'zh-CN', // 设置语言
-  controls: true, // 是否显示控制条
-  preload: 'auto', // 预加载
-  autoplay: true, // 是否自动播放
-  fluid: false, // 自适应宽高
-  poster: props?.avatar || '',
-  // src: getSource() || '', // 要嵌入的视频源的源 URL
-  sources: [],
-  muted: true,
-  userActions: {
-    hotkeys: true
-  },
-  techOrder: ['html5', 'flvjs'],
-  flvjs: {
-    mediaDataSource: {
-      isLive: true,
-      cors: true,
-      withCredentials: false,
-      hasAudio: false
-    },
-    config: {
-      autoCleanupSourceBuffer: true,
-    }
-  },
-}
-
-
-const { getResult } = useFingerprint()
-async function getSource() {
-  fingerprintResult.value = await getResult()
-  let src = props.sourceSrc || ''
-
-  if (isRtspProtocol(props.sourceSrc!)) {
-    src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
-  }
-
-  return [
-    {
-      type: getVideoTypeByUrl(props.sourceSrc),
-      src
-    }
-  ]
-}
-
-// 初始化videojs
-const initVideo = async () => {
-  if (videoRef.value) {
-    // 创建 video 实例   
-    options.sources = await getSource()
-    if (options.sources && options.sources.length) {
-
-      if (isRtspProtocol(props.sourceSrc || '')) {
-        options.flvjs = {
-          ...(options.flvjs || {}),
-          config: {
-            headers: {
-              'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-            }
-          }
-        }
-      }
-      videoPlayer = videojs(videoRef.value, options)
-    }
-  }
-}
-
-watch(
-  () => props.sourceSrc,
-  async (newData: any) => {
-    const result = await getSource()
-    // props.sourceSrc = newData
-    videoPlayer?.src(result) as any
-    videoPlayer?.play()
-  },
-  {
-    immediate: true
-  }
-)
-
-onMounted(() => {
-  initVideo()
-})
-
-onUnmounted(() => {
-  if (props.sourceSrc) {
-    closeFlvPlay(props.sourceSrc, unref(fingerprintResult)!.visitorId!)
-  }
-  handleVideoDispose()
-})
-
-//播放
-const handleVideoPlay = () => videoPlayer?.play()
-
-const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
-//暂停
-defineExpose({
-  handleVideoPlay,
-  handleVideoDispose
-})
-</script>
-
-<style lang="scss" scoped>
-.go-content-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .my-video {
-    width: 100% !important;
-    height: 100% !important;
-    position: relative;
-  }
-}
-</style>
+<template>
+  <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
+    <video
+      crossOrigin="anonymous"
+      :id="`my-player${index}`"
+      ref="videoRef"
+      class="video-js my-video vjs-theme-city vjs-big-play-centered"
+    ></video>
+  </div>
+</template>
+<script setup lang="ts" name="VideoPlay">
+import { onMounted, ref, onUnmounted, watch, unref, nextTick } from 'vue'
+import videojs from 'video.js'
+import 'videojs-flvjs-es6'
+import type { VideoJsPlayerOptions } from 'video.js'
+import 'video.js/dist/video-js.min.css'
+import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
+import { isShareMode } from '@/views/share/hook'
+import { getOpenFlvPlayUrl, closeFlvPlay } from '@/api/external/flvPlay'
+import { useFingerprint } from '@/utils/external/useFingerprint'
+import { GetResult } from '@fingerprintjs/fingerprintjs'
+import { VideoPlayerType } from '../config'
+
+const props = defineProps({
+  sourceSrc: {
+    type: String
+  },
+  autoPlay: {
+    type: Boolean
+  },
+  name: {
+    type: String
+  },
+  avatar: {
+    type: String
+  },
+  w: {
+    type: Number,
+    default: 300
+  },
+  h: {
+    type: Number,
+    default: 300
+  },
+  index: {
+    type: Number
+  }
+})
+
+const isRtspProtocol = (url: string) => {
+  const reg = /^rtsp:\/\//g
+  return reg.test(url)
+}
+
+const getVideoTypeByUrl = (url = '') => {
+  if(!url) return;
+  try {
+    const { protocol, pathname } = new URL(url)
+    if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv
+    const reg = /[^.]\w*$/
+    const mathValue = pathname.match(reg) || []
+    const ext = (mathValue[0] as keyof typeof VideoPlayerType) || 'webm'
+    const type = VideoPlayerType[ext]
+    return type ? type : VideoPlayerType.webm
+  } catch (error) {
+    console.error(error)
+    return VideoPlayerType.webm
+  }
+}
+
+// video标签
+const videoRef = ref<HTMLElement | null>(null)
+
+// video实例对象
+let videoPlayer: videojs.Player | null = null
+
+const fingerprintResult = ref<Nullable<GetResult>>(null)
+
+//options配置
+const options: VideoJsPlayerOptions & Recordable = {
+  language: 'zh-CN', // 设置语言
+  controls: true, // 是否显示控制条
+  preload: 'auto', // 预加载
+  autoplay: props.autoPlay ? true : false, // 是否自动播放
+  fluid: false, // 自适应宽高
+  poster: props?.avatar || '',
+  sources: [],
+  muted: props.autoPlay ? true : false,
+  userActions: {
+    hotkeys: true
+  },
+  techOrder: ['html5', 'flvjs'],
+  flvjs: {
+    mediaDataSource: {
+      isLive: true,
+      cors: true,
+      withCredentials: false,
+      hasAudio: false
+    },
+    config: {
+      autoCleanupSourceBuffer: true
+    }
+  }
+}
+
+const { getResult } = useFingerprint()
+
+async function getSource() {
+  fingerprintResult.value = await getResult()
+  let src = props.sourceSrc || ''
+  if (isRtspProtocol(props.sourceSrc!)) {
+    src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
+  }
+  return [
+    {
+      type: getVideoTypeByUrl(props.sourceSrc),
+      src
+    }
+  ]
+}
+
+// 初始化videojs
+const initVideo = async () => {
+  await nextTick()
+  try {
+    if (videoRef.value) {
+      // 创建 video 实例
+      options.sources = await getSource()
+      if (options.sources && options.sources.length) {
+        if (isRtspProtocol(props.sourceSrc || '')) {
+          options.flvjs = {
+            ...(options.flvjs || {}),
+            config: {
+              headers: {
+                'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`
+              }
+            }
+          }
+        }
+        if (options.sources.at(-1)?.src){
+          videoPlayer = videojs(videoRef.value, options)
+          //fix 修复videojs解决直播延时的问题
+          videoPlayer?.on('timeupdate', function () {
+            // 计算表最新推流的时间和现在播放器播放推流的时间
+            let differTime =
+              (videoPlayer as any as videojs.Player)?.buffered()?.end(0) -
+              (videoPlayer as any as videojs.Player)?.currentTime() // 差值小于1.5s时根据1倍速进行播放
+            if (differTime < 1.5) {
+              videoPlayer?.playbackRate(1)
+            } // 差值大于1.5s小于10s根据1.2倍速进行播放
+            if (differTime < 10 && differTime > 1.5) {
+              videoPlayer?.playbackRate(1.2)
+            } // 差值大于10s时进行重新加载直播流
+            if (differTime > 10) {
+              initVideo()
+            }
+          }) //
+        }
+      }
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+watch(
+  () => props.sourceSrc,
+  async () => {
+    (props as any ).sourceSrc = ''
+    if(!props.sourceSrc) return;
+    await nextTick()
+    if(unref(fingerprintResult)!.visitorId!) {
+       closeFlvPlay(props.sourceSrc!, unref(fingerprintResult)!.visitorId!)
+    }
+    videoPlayer?.src('');
+    initVideo()
+    videoPlayer?.src({
+      type: getVideoTypeByUrl(props.sourceSrc),
+      src: props.sourceSrc!
+    })
+    videoPlayer?.load()
+    videoPlayer?.play()
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => props.autoPlay,
+  async (newData: boolean) => {
+    if (newData) {
+      handleVideoPlay()
+    } else {
+      videoPlayer?.pause()
+    }
+  }
+)
+
+onMounted(() => {
+  initVideo()
+})
+
+onUnmounted(() => {
+  if (props.sourceSrc) {
+    closeFlvPlay(props.sourceSrc, unref(fingerprintResult)!.visitorId!)
+  }
+  handleVideoDispose()
+})
+
+//播放
+const handleVideoPlay = () => videoPlayer?.play()
+
+//暂停和销毁
+const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
+
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .my-video {
+    width: 100% !important;
+    height: 100% !important;
+    position: relative;
+  }
+}
+</style>

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

@@ -3,26 +3,70 @@ import { CreateComponentType } from '@/packages/index.d'
 import { CameraConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
+export enum VideoPlayerType {
+  m3u8 = 'application/x-mpegURL',
+  mp4 = 'video/mp4',
+  webm = 'video/webm',
+  flv = 'video/x-flv',
+}
+
 export enum sourceTypeEnum {
   CUSTOM = 'custom',
   PLATFORM = 'platform'
 }
 
+export enum sourceTypeNameEnum {
+  CUSTOM = '自定义',
+  PLATFORM = '平台获取'
+}
+
+export interface datasetList {
+  url: string | null
+  sourceType: string
+  organization: string
+  autoPlay: boolean
+  className?: string[] & string,
+  sty?: Recordable
+}
+
+export enum AccessModeEnum {
+  ManuallyEnter = 0, //手动输入
+  Streaming = 1, //流媒体
+  GBT28181 = 2 //GBT28181
+}
+
+export interface GBT28181Params {
+  channelNo: string
+  deviceId: string
+  deviceName: string
+}
+
+export interface videoList {
+  name: string
+  accessMode: number
+  id: string
+  videoUrl: string
+  label: string
+  value: string
+  sn: string
+  channelId: string
+  deviceId: string
+  customUrl: string
+  params: GBT28181Params
+}
+
 export const option = {
-  autoSwitch: false,
+  autoSwitch: false, //开启切换
+  interval: 2000, // 自动播放的间隔（ms）
   dataset: [
     {
-      byIdUrl: '', //通过接口获取的url
-      url: '', //直接获取视频列表的url
-      sourceType: 'custom',
-      organization: ''
+      id: null,
+      url: null,
+      sourceType: sourceTypeEnum.CUSTOM,
+      organization: '',
+      autoPlay: true
     }
-  ] as any,
-  // 自动播放的间隔（ms）
-  interval: 2000,
-  autoplay: true,
-  effect: 'slide',
-  displayMode: 'singleGrid'
+  ],
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -11,11 +11,16 @@
       </setting-item>
     </setting-item-box>
     <template v-for="(item, index) in optionData.dataset" :key="index">
+      <setting-item-box name="自动播放" :alone="true">
+        <setting-item>
+          <n-switch v-model:value="item.autoPlay" size="small"></n-switch>
+        </setting-item>
+      </setting-item-box>
       <setting-item-box name="源类型" :alone="true">
         <setting-item>
           <n-radio-group @change="handleChecked($event, item, index)" v-model:value="item.sourceType" name="radiogroup">
             <n-space>
-              <n-radio v-for="(item, index) in sourceTypes" :key="item.value" :value="item.value">
+              <n-radio v-for="(item, index) in sourceTypes" :key="item.value + index" :value="item.value">
                 {{ item.label }}
               </n-radio>
             </n-space>
@@ -45,8 +50,8 @@
       <setting-item-box v-if="item.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true">
         <setting-item>
           <n-select
-            v-model:value="item.url"
-            @update:value="(value:string,e:any) => handleSelect(value,e, index)"
+            v-model:value="item.id"
+            @update:value="(value: string, e: videoList) => handleSelect(value, e, index)"
             :options="videoOptions"
           />
         </setting-item>
@@ -57,7 +62,15 @@
       style="margin-left: 10px"
       v-if="optionData.dataset.length < 9"
       size="small"
-      @click="optionData.dataset.push({ url: '', sourceType: 'custom', organization: '', byIdUrl: '' })"
+      @click="
+        optionData.dataset.push({
+          url: null,
+          id: null,
+          sourceType: sourceTypeEnum.CUSTOM,
+          organization: '',
+          autoPlay: true
+        })
+      "
     >
       +
     </n-button>
@@ -66,10 +79,11 @@
 
 <script setup lang="ts">
 import { PropType, ref, onMounted } from 'vue'
-import { option, sourceTypeEnum } from './config'
+import { AccessModeEnum, datasetList, option, sourceTypeEnum, sourceTypeNameEnum, videoList } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { getOrganizationList, getVideoList, getVideoUrl } from '@/api/external/common/index'
 import { NTreeSelect } from 'naive-ui'
+import { getVideoControlStart } from '@/api/external/flvPlay'
 
 const props = defineProps({
   optionData: {
@@ -80,66 +94,99 @@ const props = defineProps({
 
 const sourceTypes = [
   {
-    value: 'custom',
-    label: '自定义'
+    value: sourceTypeEnum.CUSTOM,
+    label: sourceTypeNameEnum.CUSTOM
   },
   {
-    value: 'platform',
-    label: '平台获取'
+    value: sourceTypeEnum.PLATFORM,
+    label: sourceTypeNameEnum.PLATFORM
   }
 ]
 
-const originationOption = ref([])
+const originationOption = ref<Recordable[]>([])
 
-const videoOptions = ref([])
+const videoOptions = ref<videoList[]>([])
 
 const getOriginationList = async () => {
   const res = await getOrganizationList()
   originationOption.value = res
 }
 
-const handleUpdateTreeValue = (e: any) => {
+const handleUpdateTreeValue = (e: string) => {
   getVideoLists(e)
 }
 
 const getVideoLists = async (organizationId: string) => {
   const res = await getVideoList({ organizationId })
-  videoOptions.value = res?.data?.map((item: any) => ({
+  if (!res) return
+  videoOptions.value = res?.data?.map((item: videoList) => ({
     label: item.name,
-    value: item.accessMode === 1 ? item.id : item.videoUrl,
+    value: item.id,
     id: item.id,
-    accessMode: item.accessMode
+    accessMode: item.accessMode,
+    customUrl: item.accessMode === AccessModeEnum.ManuallyEnter ? item.videoUrl: '', //参数只给自定义视频流使用
+    channelId: item.accessMode === AccessModeEnum.GBT28181 ? item?.params?.channelNo : '', //参数只给gbt28181使用
+    deviceId: item.accessMode === AccessModeEnum.GBT28181 ? item?.params?.deviceId : '' //参数只给gbt28181使用
   }))
 }
 
-const handleChecked = ({ target }: any, values: object, index: number) => {
-  const { value } = target
-  if (value === sourceTypeEnum.PLATFORM) {
-    getOriginationList()
-  }
-  props.optionData.dataset[index].url = ''
-}
-
-const getVideoUrlById = async (e: any, id: string, index: number) => {
+//针对萤石云或者海康威视，根据视频id获取播放流地址
+const getVideoUrlById = async (_: videoList, id: string, index: number) => {
   const res = await getVideoUrl(id)
   if (!res) return
   const { url } = res.data
-  props.optionData.dataset.forEach((item: any, itemIndex: number) => {
+  props.optionData.dataset.forEach((item: datasetList, itemIndex: number) => {
     if (itemIndex === index) {
-      item.byIdUrl = url
+      item.url = url
     }
   })
 }
 
-const handleSelect = (value: string, e: any, index: number) => {
-  const { accessMode, id } = e
-  if (accessMode === 1) {
+//针对gbt28181，根据设备id和通道号获取播放流地址
+const getVideoControlList = async (deviceId: string, channelId: string, index: number) => {
+  const {
+    data: { flv }
+  } = await getVideoControlStart({
+    deviceId,
+    channelId
+  })
+  props.optionData.dataset.forEach((item: datasetList, itemIndex: number) => {
+    if (itemIndex === index) {
+      item.url = flv
+    }
+  })
+}
+
+//针对自定义地址，直接获取地址
+const getCustomUrl= async (url:string, index: number) => {
+  props.optionData.dataset.forEach((item: datasetList, itemIndex: number) => {
+    if (itemIndex === index) {
+      item.url = url
+    }
+  })
+}
+
+const handleChecked = ({ target }: Recordable, _: object, index: number) => {
+  const { value } = target
+  if (value === sourceTypeEnum.PLATFORM) {
+    getOriginationList()
+  }
+  props.optionData.dataset[index].url = null
+}
+
+const handleSelect = (_: string, e: videoList, index: number) => {
+  const { accessMode, id, channelId, deviceId, customUrl } = e
+  if (accessMode === AccessModeEnum.Streaming) {
     getVideoUrlById(e, id, index)
+  } else if (accessMode === AccessModeEnum.GBT28181) {
+    getVideoControlList(deviceId, channelId, index)
+  } else {
+    getCustomUrl(customUrl, index)
   }
 }
 
 onMounted(() => {
-  props.optionData.dataset.forEach((item: any) => {
+  props.optionData.dataset.forEach((item: datasetList) => {
     if (item.sourceType === sourceTypeEnum.PLATFORM) {
       getOriginationList()
       if (item.organization) {

 <template>
   <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="banner-box" ref="root">
     <div class="wrapper">
-      <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
-        <CameraItem
-          ref="cameraRef"
+      <div v-for="(item, index) in option.dataset" :key="index" :class="item.className" :style="item.sty">
+        <VideoPlay
+          :autoPlay="item.autoPlay"
           :name="item.name"
           :avatar="item.avatar"
           :key="item + index"
-          :sourceSrc="!item.byIdUrl ? item.url : item.byIdUrl"
+          :sourceSrc="item.url"
           :w="w"
           :h="h"
           :index="index"
@@ -23,8 +23,8 @@
 import { PropType, watch, toRefs, shallowReactive, onMounted, ref } 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 { option as typeOption } from './config'
+import VideoPlay from './components'
 
 const props = defineProps({
   chartConfig: {
@@ -39,15 +39,14 @@ const { w, h } = toRefs(props.chartConfig.attr)
 
 const { autoSwitch, interval } = toRefs(props.chartConfig.option)
 
-const option = shallowReactive({
-  dataset: configOption.dataset
+//暂定 any类型
+const option = shallowReactive<{ ['dataset']: any }>({
+  dataset: typeOption.dataset
 })
 
-const cameraRef = ref<InstanceType<typeof CameraItem>>()
-
 let initial = ref(0)
 
-const computedFunc = (initial: number, source: any) => {
+const computedFunc = (initial: number, source: Recordable[]) => {
   if (initial < 0) initial = 0
   if (Array.isArray(source)) {
     let len = source.length,
@@ -56,14 +55,14 @@ const computedFunc = (initial: number, source: any) => {
       temp3 = initial,
       temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
       temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
-    return source?.map((item: any, index: number) => {
+    return source?.map((item: Recordable, index: number) => {
       let transform = `translateX(-50%) scale(0.7)`,
         zIndex = 0,
         className = 'slide'
       switch (index) {
         case temp3:
           transform = `translateX(-50%) scale(1)`
-          className = ['slide', 'activate'] as any
+          className = ['slide', 'activate'] as string[] & string
           zIndex = 300
           break
         case temp1:
@@ -114,6 +113,7 @@ watch(
 )
 
 // 处理自动轮播
+// 暂定 any类型
 let timer: any = null
 
 const autoPlay = () => {
@@ -126,15 +126,14 @@ const autoPlay = () => {
 }
 
 // 鼠标移入移除效果
-let root = ref(null)
+let root = ref<HTMLElement>()
 
 onMounted(() => {
   clearInterval(timer)
-  const box: any = root.value
-  box.onmouseenter = () => clearInterval(timer)
+  root.value!.onmouseenter = () => clearInterval(timer)
   if (autoSwitch.value) {
     autoPlay()
-    box.onmouseleave = () => autoPlay()
+    root.value!.onmouseleave = () => autoPlay()
   }
 })
 
@@ -155,6 +154,20 @@ function changeSlide(dir: string) {
   changeVideo(dir)
 }
 
+watch(
+  () => autoSwitch.value,
+  (newV: boolean) => {
+    if (newV) {
+      autoPlay()
+    } else {
+      clearInterval(timer)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
 const handleMouseenter = () => {
   isShowSvg.value = true
 }

@@ -9,7 +9,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted, watch, unref, PropType } from 'vue'
+import { onMounted, ref, onUnmounted, watch, unref, PropType, nextTick } from 'vue'
 import videojs from 'video.js'
 import 'videojs-flvjs-es6'
 import type { VideoJsPlayerOptions } from 'video.js'
@@ -45,6 +45,7 @@ const isRtspProtocol = (url: string) => {
 }
 
 const getVideoTypeByUrl = (url = '') => {
+  if(!url) return;
   try {
     const { protocol, pathname } = new URL(url)
     if (protocol.startsWith('rtsp:')) return VideoPlayerTypeEnum.flv
@@ -112,6 +113,7 @@ async function getSource() {
 
 // 初始化videojs
 const initVideo = async () => {
+  await nextTick()
   if (videoRef.value) {
     // 创建 video 实例
     options.sources = await getSource()
@@ -126,22 +128,24 @@ const initVideo = async () => {
           }
         }
       }
-      videoPlayer = videojs(videoRef.value, options) //fix 修复videojs解决直播延时的问题
-      videoPlayer?.on('timeupdate', function () {
-        // 计算表最新推流的时间和现在播放器播放推流的时间
-        let differTime =
-          (videoPlayer as any as videojs.Player)?.buffered()?.end(0) -
-          (videoPlayer as any as videojs.Player)?.currentTime() // 差值小于1.5s时根据1倍速进行播放
-        if (differTime < 1.5) {
-          videoPlayer?.playbackRate(1)
-        } // 差值大于1.5s小于10s根据1.2倍速进行播放
-        if (differTime < 10 && differTime > 1.5) {
-          videoPlayer?.playbackRate(1.2)
-        } // 差值大于10s时进行重新加载直播流
-        if (differTime > 10) {
-          initVideo()
-        }
-      }) //
+      if (options.sources.at(-1)?.src){
+        videoPlayer = videojs(videoRef.value, options) //fix 修复videojs解决直播延时的问题
+        videoPlayer?.on('timeupdate', function () {
+          // 计算表最新推流的时间和现在播放器播放推流的时间
+          let differTime =
+            (videoPlayer as any as videojs.Player)?.buffered()?.end(0) -
+            (videoPlayer as any as videojs.Player)?.currentTime() // 差值小于1.5s时根据1倍速进行播放
+          if (differTime < 1.5) {
+            videoPlayer?.playbackRate(1)
+          } // 差值大于1.5s小于10s根据1.2倍速进行播放
+          if (differTime < 10 && differTime > 1.5) {
+            videoPlayer?.playbackRate(1.2)
+          } // 差值大于10s时进行重新加载直播流
+          if (differTime > 10) {
+            initVideo()
+          }
+        }) //
+      }
     }
   }
 }
@@ -149,12 +153,20 @@ const initVideo = async () => {
 watch(
   () => props.sourceSrc,
   async () => {
+    (props as any ).sourceSrc = ''
+    if(!props.sourceSrc) return;
+    await nextTick();
+    if(unref(fingerprintResult)!.visitorId!) {
+       closeFlvPlay(props.sourceSrc!, unref(fingerprintResult)!.visitorId!)
+    }
+    videoPlayer?.src('');
+    initVideo()
     videoPlayer?.src({
       type: getVideoTypeByUrl(props.sourceSrc),
       src: props.sourceSrc!
     });
     videoPlayer?.load();
-    videoPlayer?.play()
+    videoPlayer?.play();
   },
   {
     immediate: true
@@ -170,9 +182,6 @@ watch(
       videoPlayer?.pause()
     }
   },
-  {
-    immediate: true
-  }
 )
 
 onMounted(() => {
@@ -191,10 +200,7 @@ const handleVideoPlay = () => videoPlayer?.play()
 
 //暂停和销毁
 const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
-defineExpose({
-  handleVideoPlay,
-  handleVideoDispose
-})
+
 </script>
 
 <style lang="scss" scoped>

@@ -8,6 +8,11 @@ export enum sourceTypeEnum {
   PLATFORM = 'platform'
 }
 
+export enum sourceTypeNameEnum {
+  CUSTOM = '自定义',
+  PLATFORM = '平台获取'
+}
+
 export enum VideoPlayerTypeEnum {
   m3u8 = 'application/x-mpegURL',
   mp4 = 'video/mp4',
@@ -25,6 +30,7 @@ export interface videoListInterface {
   sn: string
   channelId: string
   deviceId: string
+  customUrl: string
   params: GBT28181Params
 }
 
@@ -44,9 +50,9 @@ export const option = {
   dataset: '',
   autoplay: true,
   poster: '',
-  sourceType: 'custom',
+  sourceType: sourceTypeEnum.CUSTOM,
   organization: '',
-  videoId: ''
+  videoId: null
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -40,7 +40,7 @@
       <setting-item>
         <n-select
           @update:value="handleSelect"
-          v-model:value="url"
+          v-model:value="optionData.videoId"
           :options="videoOptions"
           placeholder="请选择视频地址"
         />
@@ -56,7 +56,7 @@
 
 <script setup lang="ts">
 import { PropType, ref, onMounted } from 'vue'
-import { AccessMode, option, sourceTypeEnum, videoListInterface } from './config'
+import { AccessMode, option, sourceTypeEnum, videoListInterface, sourceTypeNameEnum } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { NTreeSelect } from 'naive-ui'
 import { getOrganizationList, getVideoList, getVideoUrl } from '@/api/external/common/index'
@@ -72,18 +72,16 @@ const props = defineProps({
 
 const sourceTypes = [
   {
-    value: 'custom',
-    label: '自定义'
+    value: sourceTypeEnum.CUSTOM,
+    label: sourceTypeNameEnum.CUSTOM
   },
   {
-    value: 'platform',
-    label: '平台获取'
+    value: sourceTypeEnum.PLATFORM,
+    label: sourceTypeNameEnum.PLATFORM
   }
 ]
 
-const originationOption = ref([])
-
-const url = ref<string | null>(null)
+const originationOption = ref<Recordable[]>([])
 
 const videoOptions = ref<videoListInterface[]>([])
 
@@ -103,15 +101,17 @@ const getVideoLists = async (organizationId: string) => {
   videoOptions.value = res?.data?.map((item: videoListInterface) => {
     return {
       label: item.name,
-      value: item.accessMode === AccessMode.Streaming ? item.id : item.accessMode === AccessMode.ManuallyEnter ? item.videoUrl : item.id,
+      value: item.id,
+      customUrl: item.accessMode === AccessMode.ManuallyEnter ? item.videoUrl : '', //参数只给自定义视频流使用
       id: item.id,
       accessMode: item.accessMode,
-      channelId: item.accessMode === AccessMode.GBT28181 ? item?.params?.channelNo :'',
-      deviceId: item.accessMode === AccessMode.GBT28181 ? item?.params?.deviceId :'',
+      channelId: item.accessMode === AccessMode.GBT28181 ? item?.params?.channelNo : '', //参数只给gbt28181使用
+      deviceId: item.accessMode === AccessMode.GBT28181 ? item?.params?.deviceId : '' //参数只给gbt28181使用
     }
   })
 }
 
+//针对萤石云或者海康威视，根据视频id获取播放流地址
 const getVideoUrlById = async (id: string) => {
   const res = await getVideoUrl(id)
   if (!res) return
@@ -119,46 +119,49 @@ const getVideoUrlById = async (id: string) => {
   props.optionData.dataset = url
 }
 
+//针对gbt28181，根据设备id和通道号获取播放流地址
+const getVideoControlList = async (deviceId: string, channelId: string) => {
+  const {
+    data: { flv }
+  } = await getVideoControlStart({
+    deviceId,
+    channelId
+  })
+  props.optionData.dataset = flv
+}
+
+//针对自定义地址，直接获取地址
+const getCustomUrl = (url: string) => {
+  props.optionData.dataset = url
+}
+
 const handleChecked = (value: string) => {
   props.optionData.dataset = ''
   props.optionData.organization = ''
-  url.value = null
+  props.optionData.videoId = null
   if (value === sourceTypeEnum.PLATFORM) {
     getOriginationList()
   }
 }
 
-const getVideoControlList = async (deviceId: string, channelId: string) => {
-    const { data: { flv } } = await getVideoControlStart({
-      deviceId,
-      channelId
-    })
-    props.optionData.dataset = flv || ''
-}
-
-const handleSelect =  (_: string, e: videoListInterface) => {
-  const { accessMode, id, value , channelId, deviceId } = e
-  //流媒体，需要从服务端调取接口换取播放的地址
+const handleSelect = (_: string, e: videoListInterface) => {
+  const { accessMode, id, customUrl, channelId, deviceId, value } = e
+  props.optionData.videoId = value as any
   if (accessMode === AccessMode.Streaming) {
     getVideoUrlById(id)
-    url.value = id
-    props.optionData.videoId = id
   } else if (accessMode === AccessMode.GBT28181) {
-    //gbt28181，需要调用接口获取flv播放地址
     getVideoControlList(deviceId, channelId)
-    props.optionData.videoId = id
   } else {
-    props.optionData.dataset = value as string
+    getCustomUrl(customUrl)
   }
 }
 
-onMounted(async () => {
+onMounted(() => {
   if (props.optionData.sourceType === sourceTypeEnum.PLATFORM) {
     getOriginationList()
     if (props.optionData.organization) {
-      await getVideoLists(props.optionData.organization)
+      getVideoLists(props.optionData.organization)
     }
-    url.value = props.optionData.videoId
   }
 })