perf: 切换视频播放器为xgplaery

@@ -72,14 +72,16 @@
     "sortablejs": "^1.14.0",
     "tinymce": "^5.8.2",
     "vditor": "^3.8.6",
-    "video.js": "^7.20.3",
-    "videojs-flvjs-es6": "^1.0.1",
     "vue": "3.3.4",
     "vue-i18n": "9.1.7",
     "vue-json-pretty": "^2.0.4",
     "vue-router": "^4.0.11",
     "vue-types": "^4.0.3",
     "vue3-grid-layout": "^1.0.0",
+    "xgplayer": "^3.0.14",
+    "xgplayer-flv": "^3.0.14",
+    "xgplayer-hls": "^3.0.14",
+    "xgplayer-mp4": "^3.0.14",
     "xlsx": "^0.17.0"
   },
   "devDependencies": {
@@ -101,7 +103,6 @@
     "@types/qrcode": "^1.4.1",
     "@types/qs": "^6.9.7",
     "@types/sortablejs": "^1.10.7",
-    "@types/video.js": "^7.3.49",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
     "@vitejs/plugin-legacy": "^1.5.1",

@@ -109,7 +109,7 @@ export const deleteStreamingMediaRecord = (params: StreamingMediaDeleteParam) =>
  * @returns
  */
 export const getStreamingPlayUrl = (entityId: string) => {
-  return defHttp.get(
+  return defHttp.get<{ data: { url: string } }>(
     {
       url: `${CameraManagerApi.STREAMING_PLAY_GET_URL}/${entityId}`,
     },

@@ -35,6 +35,7 @@ export interface CameraModel {
     deviceId: string;
     deviceName: string;
   };
+  playProtocol?: number;
 }
 
 export interface StreamingManageRecord {
@@ -106,4 +107,14 @@ export interface CameraRecord {
     channelNo: string;
     deviceId: string;
   };
+  videoPlatformDTO?: VideoPlatformDTO;
+}
+
+interface VideoPlatformDTO {
+  enabled: boolean;
+  type: number;
+  host: string;
+  appKey: string;
+  appSecret: string;
+  ssl: number;
 }

-import { withInstall } from '/@/utils/index';
-import VideoPlay from './src/VideoPlay.vue';
+export { default as XGPlayer } from './src/XGPlayer.vue';
 
 export { getVideoTypeByUrl } from './src/utils';
-
-export const BasicVideoPlay = withInstall(VideoPlay);

-<script lang="ts" setup>
-  import { isNumber } from 'lodash';
-  import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
-  import 'video.js/dist/video-js.css';
-  import { computed, CSSProperties, onMounted, onUnmounted, ref, toRaw, unref } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
-  import { isShareMode } from '/@/views/sys/share/hook';
-  import 'videojs-flvjs-es6';
-  const { prefixCls } = useDesign('basic-video-play');
-
-  const props = withDefaults(
-    defineProps<{
-      options?: VideoJsPlayerOptions;
-      withToken?: boolean;
-      immediateInitOnMounted?: boolean;
-    }>(),
-    {
-      immediateInitOnMounted: true,
-    }
-  );
-
-  const emit = defineEmits<{
-    (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
-    (event: 'onUnmounted'): void;
-  }>();
-
-  const videoPlayEl = ref<HTMLVideoElement>();
-
-  const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
-
-  const getOptions = computed(() => {
-    const { options, withToken } = props;
-
-    const defaultOptions: VideoJsPlayerOptions & Recordable = {
-      language: 'zh',
-      muted: true,
-      liveui: true,
-      controls: true,
-      techOrder: ['html5', 'flvjs'],
-      flvjs: {
-        mediaDataSource: {
-          isLive: true,
-          cors: true,
-          hasAudio: false,
-          withCredentials: false,
-        },
-        config: {
-          headers: {
-            ...(withToken
-              ? {
-                  'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-                }
-              : {}),
-          },
-          autoCleanupSourceBuffer: true,
-        },
-      },
-    };
-    return videoJs.mergeOptions(defaultOptions, options);
-  });
-
-  const getWidthHeight = computed(() => {
-    let { width = 300, height = 150 } = unref(getOptions);
-    width = isNumber(width) ? (`${width}px` as unknown as number) : width;
-    height = isNumber(height) ? (`${height}px` as unknown as number) : height;
-    return { width, height } as CSSProperties;
-  });
-
-  const init = () => {
-    if (unref(videoPlayInstance)) unref(videoPlayInstance)?.dispose();
-    videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
-      emit('ready', unref(videoPlayInstance));
-    });
-    //fix 修复videojs解决直播延时的问题
-    videoPlayInstance.value?.on('timeupdate', function () {
-      // 计算表最新推流的时间和现在播放器播放推流的时间
-      let differTime =
-        (videoPlayInstance.value as any as VideoJsPlayer)?.buffered()?.end(0) -
-        (videoPlayInstance.value as any as VideoJsPlayer)?.currentTime();
-      // 差值小于1.5s时根据1倍速进行播放
-      if (differTime < 1.5) {
-        videoPlayInstance.value?.playbackRate(1);
-      }
-      // 差值大于1.5s小于10s根据1.2倍速进行播放
-      if (differTime < 10 && differTime > 1.5) {
-        videoPlayInstance.value?.playbackRate(1.2);
-      }
-      // 差值大于10s时进行重新加载直播流
-      if (differTime > 10) {
-        init();
-      }
-    });
-    //
-  };
-
-  const customInit = (getOptionsFn: (optios: VideoJsPlayerOptions) => VideoJsPlayerOptions) => {
-    return (videoPlayInstance.value = videoJs(
-      unref(videoPlayEl)!,
-      getOptionsFn(toRaw(unref(getOptions))),
-      () => {
-        emit('ready', unref(videoPlayInstance));
-      }
-    ));
-  };
-
-  onMounted(() => {
-    props.immediateInitOnMounted && init();
-  });
-
-  onUnmounted(() => {
-    unref(videoPlayInstance)?.dispose();
-    videoPlayInstance.value = null;
-    emit('onUnmounted');
-  });
-
-  defineExpose({
-    customInit,
-    reloadPlayer: init,
-    getInstance: () => unref(videoPlayInstance),
-  });
-</script>
-
-<template>
-  <div :class="prefixCls" class="!w-full h-full" :style="getWidthHeight" style="min-height: 100%">
-    <video
-      ref="videoPlayEl"
-      class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-full !h-full"
-      muted
-    >
-    </video>
-  </div>
-</template>
-
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-video-play';
-
-  .@{prefix-cls} {
-    .vjs-error-display {
-      .vjs-modal-dialog-content::after {
-        content: '无法加载视频,原因可能是服务器或网络故障,也可能是格式不支持.';
-      }
-    }
-  }
-</style>

+<script setup lang="ts">
+  import Player, { Events, IError } from 'xgplayer';
+  import { FlvPlugin } from 'xgplayer-flv';
+  import Mp4Plugin from 'xgplayer-mp4';
+  import { HlsPlugin } from 'xgplayer-hls';
+  import { onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch } from 'vue';
+  import PresetPlayer from 'xgplayer';
+  import { IPlayerOptions } from 'xgplayer/es/player';
+  import 'xgplayer/dist/index.min.css';
+  import { isShareMode } from '/@/views/sys/share/hook';
+  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
+  import { XGPlayerProps } from '/@/components/Video/src/types';
+  import { StreamType } from './types';
+
+  const props = withDefaults(defineProps<XGPlayerProps>(), {
+    streamType: 'auto',
+    autoPlay: true,
+    config: () => ({}),
+  });
+
+  const emits = defineEmits<{
+    (eventName: 'ready', player: PresetPlayer): void;
+    (eventName: 'onUnmounted', player: PresetPlayer): void;
+  }>();
+
+  function getStreamTypeByUrl(url = ''): StreamType | undefined {
+    if (url.endsWith('.m3u8')) return 'hls';
+    else if (url.endsWith('.mp4')) return 'mp4';
+    else if (url.endsWith('.flv')) {
+      return 'flv';
+    } else return;
+  }
+
+  const getPluginByStreamType = (): IPlayerOptions => {
+    let { url, withToken } = props;
+    let { streamType } = props;
+    streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType;
+
+    const liveConfig = {
+      targetLatency: 10,
+      maxLatency: 20,
+      disconnectTime: 0,
+      fetchOptions: withToken
+        ? {
+            headers: {
+              'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+            },
+          }
+        : {},
+    };
+    const config: IPlayerOptions = {
+      flv: liveConfig,
+      hls: liveConfig,
+    };
+    switch (streamType) {
+      case 'hls':
+        config.plugins = [HlsPlugin];
+        break;
+      case 'mp4':
+        config.plugins = [Mp4Plugin];
+        break;
+      case 'flv':
+        config.plugins = [FlvPlugin];
+        break;
+    }
+    return config;
+  };
+
+  const videoElRef = shallowRef<Nullable<HTMLDivElement>>();
+
+  const playerRef = shallowRef<Nullable<PresetPlayer>>();
+
+  const propsRef = ref<XGPlayerProps>({});
+
+  const getPlayerConfig = computed<IPlayerOptions>(() => {
+    const { url, autoPlay, config } = props;
+
+    const basicConfig: IPlayerOptions = {
+      ...config,
+      ...propsRef,
+      url,
+      lang: 'zh',
+      isLive: true,
+      autoplay: autoPlay,
+      autoplayMuted: autoPlay,
+      ...getPluginByStreamType(),
+    };
+    return basicConfig;
+  });
+
+  function onDecodeError() {
+    console.warn('player happend decode error');
+    playerRef.value?.destroy?.();
+    initializePlayer();
+  }
+
+  function initializePlayer() {
+    if (unref(playerRef)) {
+      playerRef.value?.destroy?.();
+      playerRef.value = null;
+    }
+
+    const config = toRaw(unref(getPlayerConfig));
+
+    if (!unref(videoElRef)) return;
+
+    const player = (playerRef.value = new Player(Object.assign(config, { el: unref(videoElRef) })));
+
+    player.on(Events.READY, () => {
+      emits('ready', player);
+    });
+
+    player.on(Events.ERROR, (error: IError) => {
+      // https://h5player.bytedance.com/api/error.html#type
+      if (error.errorCode === 5103) {
+        onDecodeError();
+      }
+    });
+  }
+
+  onMounted(() => {
+    initializePlayer();
+  });
+
+  onUnmounted(() => {
+    emits('onUnmounted', unref(playerRef)!);
+    playerRef.value?.destroy?.();
+  });
+
+  watch(
+    () => props.url,
+    () => {
+      initializePlayer();
+    }
+  );
+
+  defineExpose({
+    getPlayerInstance: () => unref(playerRef),
+  });
+</script>
+
+<template>
+  <div ref="videoElRef"></div>
+</template>

+import { IPlayerOptions } from 'xgplayer/es/player';
+
+export type StreamType = 'flv' | 'mp4' | 'hls' | 'auto';
+export interface XGPlayerProps {
+  streamType?: StreamType;
+  autoPlay?: boolean;
+  url?: string;
+  withToken?: boolean;
+  config?: Omit<IPlayerOptions, 'url'>;
+}

-<template>
-  <div>
-    <BasicModal
-      v-bind="$attrs"
-      width="55rem"
-      destroyOnClose
-      :height="heightNum"
-      @register="register"
-      title="视频预览"
-      :showOkBtn="false"
-      @cancel="handleCancel"
-    >
-      <div
-        class="flex items-center justify-center bg-dark-900 w-full h-full min-h-96 video-container"
-      >
-        <BasicVideoPlay
-          v-if="showVideo"
-          :options="(options as any)"
-          :withToken="withToken"
-          @on-unmounted="handleCloseFlvPlayUrl"
-        />
-      </div>
-    </BasicModal>
-  </div>
-</template>
-<script setup lang="ts">
-  import { ref, reactive, unref } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
-  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
-  import { AccessMode } from './config.data';
-  import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl } from '/@/api/camera/cameraManager';
-  import { isRtspProtocol } from '/@/components/Video/src/utils';
-  import { VideoJsPlayerOptions } from 'video.js';
-  import { useFingerprint } from '/@/utils/useFingerprint';
-  import { GetResult } from '@fingerprintjs/fingerprintjs';
-
-  const heightNum = ref(800);
-  const showVideo = ref(false);
-
-  const playUrl = ref('');
-
-  const withToken = ref(false);
-
-  const videoId = ref<string>();
-
-  const fingerprintResult = ref<Nullable<GetResult>>(null);
-
-  const options = reactive<VideoJsPlayerOptions>({
-    width: '100%' as unknown as number,
-    height: 384 as unknown as number,
-    autoplay: true,
-  });
-
-  const setSources = (url: string, fingerprintResult: GetResult) => {
-    const flag = isRtspProtocol(url);
-    options.sources = [
-      {
-        src: flag ? getFlvPlayUrl(url, fingerprintResult.visitorId) : url,
-        type: getVideoTypeByUrl(url),
-      },
-    ];
-  };
-
-  const { getResult } = useFingerprint();
-  const [register] = useModalInner(
-    async (data: { record: CameraModel | StreamingManageRecord }) => {
-      const { record } = data;
-      videoId.value = record.id || '';
-      const result = await getResult();
-      fingerprintResult.value = result;
-      if (record.accessMode === AccessMode.ManuallyEnter) {
-        if ((record as CameraModel).videoUrl) {
-          if (isRtspProtocol((record as CameraModel).videoUrl)) {
-            playUrl.value = (record as CameraModel).videoUrl;
-            closeFlvPlay(unref(playUrl), result.visitorId);
-            withToken.value = true;
-          }
-          setSources((record as CameraModel).videoUrl, result);
-        }
-      } else {
-        try {
-          const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
-          setSources(url, result);
-        } catch (error) {}
-      }
-      showVideo.value = true;
-    }
-  );
-
-  const handleCloseFlvPlayUrl = () => {
-    if (isRtspProtocol(unref(playUrl))) {
-      closeFlvPlay(unref(playUrl)!, unref(fingerprintResult)!.visitorId!);
-    }
-  };
-
-  const handleCancel = () => {
-    showVideo.value = false;
-    withToken.value = false;
-  };
-</script>
-
-<style lang="less" scoped>
-  .video-container:deep(.vben-basic-video-play) {
-    min-height: 13rem;
-  }
-
-  .video-container:deep(.video-js) {
-    min-height: 13rem;
-  }
-</style>

@@ -80,8 +80,7 @@
       </BasicTable>
     </PageWrapper>
     <CameraDrawer @register="registerDrawer" @success="handleSuccess" />
-    <VideoPreviewModal @register="registerModal" />
-    <VideoModal @register="registerModal1" />
+    <VideoModal @register="registerModal" />
     <GBTDrawer @register="registerGBTDrawer" @success="handleGBTSuccess" />
   </div>
 </template>
@@ -103,14 +102,16 @@
     CameraPermission,
     VideoPlatformEnum,
     accessModeConfig,
+    getPlayUrl,
   } from './config.data';
-  import VideoPreviewModal from './DialogPreviewVideo.vue';
   import { useModal } from '/@/components/Modal';
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Popconfirm } from 'ant-design-vue';
   import { Tag } from 'ant-design-vue';
   import VideoModal from '/@/views/device/list/cpns/tabs/VideoChannel/videoModal.vue';
+  import { VideoCancelModalParamsType } from '/@/views/device/list/cpns/tabs/VideoChannel/config';
+  import { CameraRecord } from '/@/api/camera/model/cameraModel';
 
   export default defineComponent({
     components: {
@@ -119,7 +120,6 @@
       BasicTable,
       TableAction,
       CameraDrawer,
-      VideoPreviewModal,
       VideoModal,
       TableImg,
       Authority,
@@ -131,9 +131,8 @@
     setup(_, { emit }) {
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-      const [registerModal, { openModal }] = useModal(); //手动输入
 
-      const [registerModal1, { openModal: openModal1 }] = useModal(); //流媒体获取
+      const [registerModal, { openModal }] = useModal(); //流媒体获取
       // 表格hooks
       const [registerTable, { reload, setProps, clearSelectedRowKeys }] = useTable({
         title: '视频列表',
@@ -197,28 +196,25 @@
         searchInfo.organizationId = organizationId;
         handleSuccess();
       };
-      const handleViewVideo = (record) => {
-        const { videoPlatformDTO } = record;
+      const handleViewVideo = (record: CameraRecord) => {
+        const { videoPlatformDTO, params } = record;
         const { type } = videoPlatformDTO || {};
-        const commonRecord = {
-          isUpdate: true,
-          record,
-        };
-        // 新增一个判断，GBT28181也弹出云台控制界面
-        // if (record.accessMode === AccessMode.Streaming && type === VideoPlatformEnum.ISC) {
-        //   openModal1(true, commonRecord);
-        // } else if (record.accessMode === AccessMode.GBT28181) {
-        //   openModal1(true, { ...commonRecord, ifShowGBT: true });
-        // } else openModal(true, commonRecord);
 
-        if (
-          record.accessMode === AccessMode.ManuallyEnter ||
-          (record.accessMode === AccessMode.Streaming && type === VideoPlatformEnum.FLUORITE)
-        ) {
-          openModal(true, commonRecord);
-        } else if (record.accessMode === AccessMode.GBT28181) {
-          openModal1(true, { ...commonRecord, ifShowGBT: true });
-        } else openModal1(true, commonRecord);
+        openModal(true, {
+          record: {
+            id: record.id,
+            canControl:
+              [AccessMode.Streaming, AccessMode.GBT28181].includes(record.accessMode) &&
+              type !== VideoPlatformEnum.FLUORITE,
+            isGBT: record.accessMode === AccessMode.GBT28181,
+            channelId: params?.channelNo,
+            tbDeviceId: params?.deviceId,
+            getPlayUrl: async () => {
+              const result = await getPlayUrl(record);
+              return result;
+            },
+          } as VideoCancelModalParamsType,
+        });
       };
 
       const handleSwitchMode = () => {
@@ -252,7 +248,6 @@
         organizationIdTreeRef,
         handleViewVideo,
         registerModal,
-        registerModal1,
         AccessMode,
         handleSwitchMode,
         CameraPermission,

@@ -3,24 +3,21 @@
   import OrganizationIdTree from '../../common/organizationIdTree/src/OrganizationIdTree.vue';
   import { onMounted, reactive, Ref, ref, unref, watch } from 'vue';
   import { Spin, Button, Pagination, Space, List } from 'ant-design-vue';
-  import { cameraPage, closeFlvPlay, getFlvPlayUrl } from '/@/api/camera/cameraManager';
+  import { cameraPage, closeFlvPlay } from '/@/api/camera/cameraManager';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
   import { useFullscreen } from '@vueuse/core';
   import CameraDrawer from './CameraDrawer.vue';
   import GBTDrawer from './components/GBTDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
-  import { AccessMode, CameraPermission, PageMode } from './config.data';
+  import { CameraPermission, getPlayUrl, PageMode } from './config.data';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
-  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
   import { buildUUID } from '/@/utils/uuid';
-  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
-  import { VideoJsPlayerOptions } from 'video.js';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import { Authority } from '/@/components/Authority';
   import { isRtspProtocol } from '/@/components/Video/src/utils';
   import { useFingerprint } from '/@/utils/useFingerprint';
   import { GetResult } from '@fingerprintjs/fingerprintjs';
-  import { getVideoControlStart } from '/@/api/device/videoChannel';
+  import XGPlayer from '/@/components/Video/src/XGPlayer.vue';
 
   const props = defineProps({
     mode: {
@@ -29,17 +26,12 @@
     },
   });
   type CameraRecordItem = CameraRecord & {
+    placeholder?: boolean;
     canPlay?: boolean;
     isTransform?: boolean;
     withToken?: boolean;
-    videoPlayerOptions?: VideoJsPlayerOptions;
     playSourceUrl?: string;
-  };
-
-  const basicVideoPlayOptions: VideoJsPlayerOptions = {
-    width: '100%' as unknown as number,
-    height: '100%' as unknown as number,
-    autoplay: true,
+    streamType?: string;
   };
 
   const emit = defineEmits(['switchMode']);
@@ -88,10 +80,7 @@
 
       for (const item of unref(cameraList)) {
         (item as CameraRecordItem).isTransform = false;
-        (item as CameraRecordItem).videoPlayerOptions = {
-          ...basicVideoPlayOptions,
-        };
-        beforeVideoPlay(item as CameraRecordItem, result);
+        beforeVideoPlay(item as CameraRecordItem);
       }
     } catch (error) {
     } finally {
@@ -100,75 +89,11 @@
   };
 
   const { getResult } = useFingerprint();
-  const beforeVideoPlay = async (record: CameraRecordItem, fingerprintResult: GetResult) => {
-    if (record.accessMode === AccessMode.ManuallyEnter) {
-      if (record.videoUrl) {
-        const isFlvPlay = isRtspProtocol(record.videoUrl);
-        const type = getVideoTypeByUrl(record.videoUrl);
-        record.playSourceUrl = record.videoUrl;
-        if (isFlvPlay) {
-          // handleFlvPlayerUnload(record, fingerprintResult!.visitorId);
-          record.playSourceUrl = getFlvPlayUrl(record.videoUrl, fingerprintResult.visitorId);
-          record.withToken = true;
-        }
-
-        (record as CameraRecordItem).videoPlayerOptions = {
-          ...basicVideoPlayOptions,
-          sources: [
-            {
-              src: record.playSourceUrl,
-              type,
-            },
-          ],
-        };
-        record.isTransform = true;
-      }
-    }
-    if (record.accessMode === AccessMode.GBT28181) {
-      try {
-        const { params } = record;
-        if (params?.channelNo && params.deviceId) {
-          const result = await getVideoControlStart({
-            deviceId: params.deviceId,
-            channelId: params.channelNo,
-          });
-
-          (record as CameraRecordItem).videoPlayerOptions = {
-            ...basicVideoPlayOptions,
-            sources: [{ src: result.data.flv, type: getVideoTypeByUrl(result.data.flv) }],
-          };
-        }
-      } finally {
-        record.isTransform = true;
-      }
-    }
-    if (record.accessMode === AccessMode.Streaming) {
-      try {
-        const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
-        const index = unref(cameraList).findIndex((item) => item.id === record.id);
-        if (~index) {
-          const oldRecord = unref(cameraList).at(index)!;
-          unref(cameraList)[index] = {
-            ...oldRecord,
-
-            videoPlayerOptions: {
-              ...basicVideoPlayOptions,
-              sources: [
-                {
-                  src: url,
-                  type: getVideoTypeByUrl(url),
-                },
-              ],
-            } as any,
-            isTransform: true,
-          };
-        }
-      } catch (error) {
-      } finally {
-        const index = unref(cameraList).findIndex((item) => item.id === record.id);
-        if (~index) unref(cameraList)[index].isTransform = true;
-      }
-    }
+  const beforeVideoPlay = async (record: CameraRecordItem) => {
+    const { url, type } = await getPlayUrl(record);
+    record.playSourceUrl = url;
+    record.streamType = type;
+    record.isTransform = true;
   };
 
   const gridLayout = ref({ gutter: 1, column: 2 });
@@ -316,7 +241,7 @@
             :grid="(gridLayout as any)"
             :style="{ '--height': `${100 / pagination.colNumber}%` }"
           >
-            <template #renderItem="{ item }">
+            <template #renderItem="{ item }: { item: CameraRecordItem }">
               <List.Item>
                 <div class="box-border w-full !h-full p-1px">
                   <div
@@ -332,10 +257,12 @@
                       v-show="!item.isTransform"
                       :spinning="!item.isTransform"
                     />
-                    <BasicVideoPlay
+                    <XGPlayer
                       v-if="item.isTransform"
-                      :options="item.videoPlayerOptions"
+                      :url="item.playSourceUrl"
+                      :stream-type="item.streamType"
                       :with-token="item.withToken"
+                      :config="{ width: '100%', height: '100%' }"
                       @on-unmounted="handleCloseFlvPlayUrl(item)"
                     />
                     <div

@@ -6,7 +6,6 @@ import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
 import SnHelpMessage1 from './SnHelpMessage1.vue';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
-import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 import { createImgPreview } from '/@/components/Preview';
 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 import { findDictItemByCode } from '/@/api/system/dict';
@@ -15,7 +14,24 @@ import { DataSourceField } from '../../visual/packages/config/common.config';
 import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { TransportTypeEnum } from '../../device/profiles/components/TransportDescript/const';
-import { getDeviceChannelList } from '/@/api/camera/cameraManager';
+import {
+  getDeviceChannelList,
+  getFlvPlayUrl,
+  getStreamingPlayUrl,
+} from '/@/api/camera/cameraManager';
+import { CameraRecord } from '/@/api/camera/model/cameraModel';
+import { isRtspProtocol } from '/@/components/Video/src/utils';
+import { useFingerprint } from '/@/utils/useFingerprint';
+import { getVideoControlStart } from '/@/api/device/videoChannel';
+import { StreamType as PlayerStreamType } from '/@/components/Video/src/types';
+
+interface FileItem {
+  uid: string;
+  name: string;
+  status?: string;
+  response?: string;
+  url?: string;
+}
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
@@ -604,3 +620,37 @@ export const formGBTSchema: QFormSchema[] = [
       values.allDevice === GBT28181DeviceSelectMethod.PARTIAL,
   },
 ];
+
+export async function getPlayUrl(
+  params: CameraRecord
+): Promise<{ url: string; type: PlayerStreamType }> {
+  const { accessMode } = params;
+  if (accessMode === AccessMode.ManuallyEnter) {
+    const { videoUrl } = params;
+    if (params.videoUrl) {
+      const isRTSPPlay = isRtspProtocol(videoUrl);
+
+      if (isRTSPPlay) {
+        const { getResult } = useFingerprint();
+        const fingerprint = await getResult();
+        return { url: getFlvPlayUrl(videoUrl, fingerprint.visitorId), type: 'flv' };
+      } else {
+        return { url: videoUrl, type: 'auto' };
+      }
+    }
+  } else if (accessMode === AccessMode.GBT28181) {
+    const { deviceId, channelNo } = params?.params || {};
+    const result = await getVideoControlStart({ channelId: channelNo!, deviceId: deviceId! });
+    return { url: result.data.flv, type: 'flv' };
+  } else {
+    const { id, playProtocol } = params;
+    const result = await getStreamingPlayUrl(id);
+    const type: PlayerStreamType =
+      playProtocol === FluoriteMideaProtocolEnum.FLV
+        ? 'flv'
+        : playProtocol === FluoriteMideaProtocolEnum.HLS
+        ? 'hls'
+        : 'auto';
+    return { url: result.data.url, type };
+  }
+}

 import { h } from 'vue';
 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { Tag } from 'ant-design-vue';
-import { withInstall } from '/@/utils/index';
-
-import VideoPlay from './video.vue';
-export const Video = withInstall(VideoPlay);
+export type VideoCancelModalParamsType = {
+  canControl?: boolean;
+  isGBT?: boolean;
+  tbDeviceId?: string;
+  channelId?: string;
+  id?: string;
+  playerProps?: Recordable;
+  getPlayUrl: () => Promise<Record<'url' | 'type', string>>;
+};
 
 //视频通道权限标识枚举
 export enum GBT28181_DEVICE_PERMISSION_ENUM {

@@ -8,7 +8,7 @@
         <a-button type="primary" @click="handleSyncPlay">通道同步</a-button>
       </Authority>
     </template>
-    <template #hasAudio="{ record }">
+    <template #hasAudio="{ record }: { record: VideoChannelItemType }">
       <Switch
         :checked="record.status === 1"
         :loading="record.pendingStatus"
@@ -41,16 +41,22 @@
 </template>
 
 <script lang="ts" setup>
-  import { configColumns, searchFormSchema, GBT28181_DEVICE_PERMISSION_ENUM } from './config';
+  import {
+    configColumns,
+    searchFormSchema,
+    GBT28181_DEVICE_PERMISSION_ENUM,
+    VideoCancelModalParamsType,
+  } from './config';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { Switch } from 'ant-design-vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import VideoModal from './videoModal.vue';
   import { useModal } from '/@/components/Modal';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { getVideoChannelList } from '/@/api/device/videoChannel';
+  import { getVideoChannelList, getVideoControlStart } from '/@/api/device/videoChannel';
   import { stopOnDemandVideoApiGet, syncVideoApiGet } from '/@/api/camera/cameraManager';
   import { Authority } from '/@/components/Authority';
+  import { VideoChannelItemType } from '/@/api/device/model/videoChannelModel';
 
   const props = defineProps<{ deviceDetail: DeviceRecord }>();
 
@@ -91,10 +97,20 @@
     }
   };
 
-  const handlePlay = (record: Recordable) => {
+  const handlePlay = (record: VideoChannelItemType) => {
+    const { channelId } = record;
     openModal(true, {
-      record,
-      ifShowGBT: true,
+      record: {
+        canControl: true,
+        isGBT: true,
+        channelId,
+        tbDeviceId: props.deviceDetail.tbDeviceId,
+        getPlayUrl: async () => {
+          const { deviceId, channelId } = record;
+          const result = await getVideoControlStart({ deviceId, channelId });
+          return { type: 'flv', url: result.data.flv };
+        },
+      } as VideoCancelModalParamsType,
     });
   };
 

 <script lang="ts" setup>
-  import { isNumber } from 'lodash';
-  import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
-  import 'video.js/dist/video-js.css';
   import { Tooltip } from 'ant-design-vue';
-  import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
-  import { isShareMode } from '/@/views/sys/share/hook';
-  import 'videojs-flvjs-es6';
+  import { ref, unref } from 'vue';
   import { QuestionCircleOutlined } from '@ant-design/icons-vue';
   import {
     CaretUpOutlined,
@@ -19,106 +12,49 @@
     ZoomOutOutlined,
   } from '@ant-design/icons-vue';
   import { Button, Slider } from 'ant-design-vue';
-  import { nextTick } from 'vue';
   import { controlling } from '/@/api/camera/cameraManager';
   import { setVideoControl } from '/@/api/device/videoChannel';
-
-  const { prefixCls } = useDesign('basic-video-play');
-  interface IGbtOption {
-    tbDeviceId: string;
-    channelId: string;
-  }
+  import XGPlayer from '/@/components/Video/src/XGPlayer.vue';
 
   const props = defineProps<{
-    options?: VideoJsPlayerOptions;
-    withToken?: boolean;
-    isGBT?: boolean;
-    GBTOption: IGbtOption;
-  }>();
-
-  const emit = defineEmits<{
-    (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
-    (event: 'onUnmounted'): void;
-  }>();
-
-  const videoPlayEl = ref<HTMLVideoElement>();
-
-  const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
-
-  const getGBT = computed(() => {
-    const { isGBT } = props;
-    return isGBT;
-  });
-
-  const getOptions = computed(() => {
-    const { options, withToken } = props;
-
-    const defaultOptions: VideoJsPlayerOptions & Recordable = {
-      language: 'zh',
-      muted: true,
-      liveui: true,
-      controls: true,
-      techOrder: ['html5', 'flvjs'],
-      flvjs: {
-        mediaDataSource: {
-          isLive: true,
-          cors: true,
-          hasAudio: false,
-          withCredentials: false,
-        },
-        config: {
-          headers: {
-            ...(withToken
-              ? {
-                  'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-                }
-              : {}),
-          },
-          autoCleanupSourceBuffer: true,
-        },
-      },
+    playUrl?: string;
+    options?: {
+      canControl?: boolean;
+      isGBT?: boolean;
+      tbDeviceId?: string;
+      channelId?: string;
+      id?: string;
+      playerProps?: Recordable;
     };
-    return videoJs.mergeOptions(defaultOptions, options);
-  });
+  }>();
 
-  const getWidthHeight = computed(() => {
-    let { width = 300, height = 150 } = unref(getOptions);
-    width = isNumber(width) ? (`${width}px` as unknown as number) : width;
-    height = isNumber(height) ? (`${height}px` as unknown as number) : height;
-    return { width, height } as CSSProperties;
-  });
+  const playerRef = ref<InstanceType<typeof XGPlayer>>();
 
   // 控制云台控制速度
   const sliderValue = ref<number>(123);
 
-  const init = () => {
-    if (unref(videoPlayInstance)) unref(videoPlayInstance)?.dispose();
-    videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
-      emit('ready', unref(videoPlayInstance));
-    });
-  };
+  const isPlay = ref(false);
 
   //播放/暂停
   const handleClick = () => {
-    // unref(isPlay) ((true,停止),(false,开启))
-    if (unref(isPlay)) unref(videoPlayInstance)?.pause();
-    else unref(videoPlayInstance)?.play();
-  };
-
-  const getId = () => {
-    const { options } = props || {};
-    const { sources }: any = options || {};
-    return sources?.[0]?.id;
+    const playerInstance = unref(playerRef)?.getPlayerInstance();
+    if (playerInstance && playerInstance.paused) {
+      unref(playerRef)?.getPlayerInstance()?.play();
+      isPlay.value = true;
+    } else {
+      unref(playerRef)?.getPlayerInstance()?.pause();
+      isPlay.value = false;
+    }
   };
 
   const handleControl = (action: number, direction: string) => {
-    const organizationId = getId();
-    controlling({ cameraIndexCode: organizationId, action, command: direction });
+    const { options } = props;
+    controlling({ cameraIndexCode: options?.id, action, command: direction });
   };
 
   // 国标控制
   const handleGBTControl = (command: string, action?: number | string) => {
-    const { tbDeviceId, channelId } = props.GBTOption;
+    const { tbDeviceId, channelId } = props.options || {};
     setVideoControl(tbDeviceId, channelId, {
       command,
       horizonSpeed: action,
@@ -127,33 +63,9 @@
     });
   };
 
-  const isPlay = ref<Boolean | null | undefined>(false);
-
-  onMounted(async () => {
-    init();
-    await nextTick();
-    // isPlay.value = unref(videoPlayInstance)?.paused();
-    videoPlayInstance.value?.on('loadedmetadata', () => {});
-    videoPlayInstance.value?.on('waiting', () => {
-      isPlay.value = false;
-    });
-    videoPlayInstance.value?.on('play', () => {
-      isPlay.value = true;
-    });
-    videoPlayInstance.value?.on('playing', () => {
-      isPlay.value = true;
-    });
-    videoPlayInstance.value?.on('pause', () => {
-      isPlay.value = false;
-    });
-    videoPlayInstance.value?.on('ended', () => {
-      isPlay.value = false;
-    });
-  });
-
   //长按开始
-  const moveStart = (action) => {
-    if (unref(getGBT)) {
+  const moveStart = (action: string) => {
+    if (unref(props.options?.isGBT)) {
       handleGBTControl(action, unref(sliderValue));
       return;
     }
@@ -161,46 +73,33 @@
   };
 
   // 长按结束
-  const moveStop = (action) => {
-    if (unref(getGBT)) {
+  const moveStop = (action: string) => {
+    if (unref(props.options?.isGBT)) {
       handleGBTControl('STOP', unref(sliderValue));
       return;
     }
     handleControl(1, action);
   };
-
-  //页面卸载
-  onUnmounted(() => {
-    unref(videoPlayInstance)?.dispose();
-    videoPlayInstance.value = null;
-    emit('onUnmounted');
-  });
-
-  defineExpose({
-    reloadPlayer: init,
-    getInstance: () => unref(videoPlayInstance),
-  });
 </script>
 
 <template>
-  <div
-    :class="prefixCls"
-    class="!w-full h-full flex"
-    :style="getWidthHeight"
-    style="min-height: 100%"
-  >
-    <video
-      ref="videoPlayEl"
-      class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-8/10 !h-full"
-      muted
+  <div class="!w-full h-full flex" style="min-height: 100%">
+    <XGPlayer
+      ref="playerRef"
+      v-bind="options?.playerProps"
+      :url="playUrl"
+      auto-play
+      :config="{ fluid: true }"
+    />
+
+    <div
+      v-if="options?.canControl"
+      class="!w-2/10 px-4 bg-white flex justify-center items-center flex-col"
     >
-    </video>
-
-    <div class="!w-2/10 bg-white flex items-center flex-col">
       <Tooltip>
-        <template #title
-          >长按按钮调用API，由于视频流媒体提供的流，有一定时延，请耐心等待。</template
-        >
+        <template #title>
+          长按按钮调用API，由于视频流媒体提供的流，有一定时延，请耐心等待。
+        </template>
         <label class="validate-dot">云台控制</label>
         <QuestionCircleOutlined :style="{ fontSize: '14px', marginLeft: '5px' }" />
       </Tooltip>
@@ -248,7 +147,7 @@
           <Button class="circle" @click="handleClick" />
         </div>
       </div>
-      <div class="mt-5" v-if="getGBT">
+      <div class="mt-5" v-if="options.isGBT">
         <Slider v-model:value="sliderValue" :min="0" :max="255" style="width: 130px" />
       </div>
       <div class="flex justify-center mt-8">
@@ -274,16 +173,6 @@
 </template>
 
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-basic-video-play';
-
-  .@{prefix-cls} {
-    .vjs-error-display {
-      .vjs-modal-dialog-content::after {
-        content: '无法加载视频,原因可能是服务器或网络故障,也可能是格式不支持.';
-      }
-    }
-  }
-
   .child {
     position: absolute;
     width: 3rem;

 <template>
-  <div>
-    <BasicModal
-      v-bind="$attrs"
-      width="60rem"
-      destroyOnClose
-      :height="heightNum"
-      @register="register"
-      title="视频预览"
-      :showOkBtn="false"
-      @cancel="handleCancel"
-    >
-      <div
-        class="flex items-center justify-center w-full h-full min-h-96 video-container bg-dark-50"
-      >
-        <VideoPlayer
-          ref="videoInstance"
-          v-if="showVideo"
-          :options="(options as VideoJsPlayerOptions)"
-          :withToken="withToken"
-          :isGBT="isGBT"
-          :GBTOption="GBTOption"
-        />
-      </div>
-    </BasicModal>
-  </div>
+  <BasicModal
+    v-bind="$attrs"
+    width="60rem"
+    destroyOnClose
+    :height="800"
+    @register="register"
+    title="视频预览"
+    :showOkBtn="false"
+    @cancel="handleCancel"
+  >
+    <div class="flex items-center justify-center w-full h-full min-h-96 video-container bg-dark-50">
+      <VideoPlayer :play-url="playUrl" :options="options" />
+    </div>
+  </BasicModal>
 </template>
 <script setup lang="ts">
-  import { ref, reactive } from 'vue';
+  import { ref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { VideoJsPlayerOptions } from 'video.js';
   import VideoPlayer from './video.vue';
-  import { getVideoControlStart } from '/@/api/device/videoChannel';
-  import { VideoChannelItemType } from '/@/api/device/model/videoChannelModel';
-  import { getVideoTypeByUrl } from '/@/components/Video';
-  import { AccessMode } from '/@/views/camera/manage/config.data';
-  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
-
+  import { VideoCancelModalParamsType } from '/@/views/device/list/cpns/tabs/VideoChannel/config';
   const emit = defineEmits(['reloadTable', 'register']);
 
-  const heightNum = ref(800);
-  const showVideo = ref(false);
-
-  const videoInstance = ref<InstanceType<typeof VideoPlayer>>();
-
-  const videoId = ref<string>();
-
-  const withToken = ref(false);
-
-  const options = reactive<VideoJsPlayerOptions>({
-    width: '100%' as unknown as number,
-    height: 384 as unknown as number,
-    autoplay: true,
-  });
-  const GBTOption = ref({
-    tbDeviceId: '',
-    channelId: '',
-  });
-  const isGBT = ref<boolean>(false);
-
+  const playUrl = ref();
+  const options = ref<VideoCancelModalParamsType>();
   const [register, { setModalProps }] = useModalInner(
-    async (data: { record: VideoChannelItemType }) => {
-      const { record, ifShowGBT = false } = data;
-      const { params } = record as Recordable;
-      videoId.value = record.id || '';
-      isGBT.value = ifShowGBT;
-      GBTOption.value.tbDeviceId = params?.deviceId ? params?.deviceId : record?.deviceId;
-      GBTOption.value.channelId = params?.channelNo ? params?.channelNo : record?.channelId;
+    async (data: ModalParamsType<VideoCancelModalParamsType>) => {
+      const { record } = data;
       try {
         setModalProps({ loading: true, loadingTip: '视频加载中...' });
-        // getStreamingPlayUrl
-        let result: any = null;
-        if (record.accessMode === AccessMode.GBT28181 || ifShowGBT) {
-          result = await getVideoControlStart({
-            deviceId: params?.deviceId ? params?.deviceId : record?.deviceId,
-            channelId: params?.channelNo ? params?.channelNo : record?.channelId,
-          });
-          options.sources = [{ src: result.data.flv, type: getVideoTypeByUrl(result.data.flv) }];
-        } else {
-          result = await getStreamingPlayUrl(record.id);
-          options.sources = [
-            { src: result.data.url, type: getVideoTypeByUrl(result.data.url), id: record.id },
-          ];
-        }
-        showVideo.value = true;
+        const { url, type } = await record.getPlayUrl();
+
+        playUrl.value = url;
+        options.value = record;
+        options.value.playerProps = {
+          ...(options.value?.playerProps || {}),
+          streamType: type,
+        };
       } catch (error) {
       } finally {
         setModalProps({ loading: false });
@@ -91,18 +44,6 @@
   );
 
   const handleCancel = () => {
-    showVideo.value = false;
-    withToken.value = false;
     emit('reloadTable');
   };
 </script>
-
-<style lang="less" scoped>
-  .video-container:deep(.vben-basic-video-play) {
-    min-height: 13rem;
-  }
-
-  .video-container:deep(.video-js) {
-    min-height: 13rem;
-  }
-</style>

@@ -13,6 +13,7 @@ export enum FormFieldEnum {
 
   DEVICE_ID = 'deviceId',
   CHANNEL_ID = 'channelId',
+  PLAY_PROTOCOL = 'playProtocol',
 }
 
 export interface DataSourceValueType {
@@ -129,6 +130,7 @@ export const formSchemas: FormSchema[] = [
               accessMode === AccessMode.GBT28181 ? options.params?.channelNo : null,
             [FormFieldEnum.DEVICE_ID]:
               accessMode === AccessMode.GBT28181 ? options.params?.deviceId : null,
+            [FormFieldEnum.PLAY_PROTOCOL]: options?.playProtocol,
           });
         },
       };
@@ -146,4 +148,10 @@ export const formSchemas: FormSchema[] = [
     component: 'Input',
     ifShow: false,
   },
+  {
+    field: FormFieldEnum.PLAY_PROTOCOL,
+    label: '播放协议',
+    component: 'InputNumber',
+    ifShow: false,
+  },
 ];

 <script lang="ts" setup>
   import { ComponentMode, ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
-  import { computed, onMounted, onUnmounted, toRaw } from 'vue';
-  import { VideoJsPlayerOptions } from 'video.js';
-  import { AccessMode } from '/@/views/camera/manage/config.data';
-  import { unref } from 'vue';
-  import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { XGPlayer } from '/@/components/Video';
+  import { onMounted, onUnmounted } from 'vue';
+  import { getPlayUrl } from '/@/views/camera/manage/config.data';
+  import { closeFlvPlay } from '/@/api/camera/cameraManager';
   import { ref } from 'vue';
   import { Spin } from 'ant-design-vue';
   import { useFingerprint } from '/@/utils/useFingerprint';
-  import { isRtspProtocol, VideoPlayerType } from '/@/components/Video/src/utils';
-  import { isShareMode } from '/@/views/sys/share/hook';
-  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
-  import { getVideoControlStart } from '/@/api/device/videoChannel';
+  import { isRtspProtocol } from '/@/components/Video/src/utils';
+  import { CameraRecord } from '/@/api/camera/model/cameraModel';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -21,24 +17,12 @@
 
   const loading = ref(true);
 
-  const basicVideoPlayEl = ref<Nullable<InstanceType<typeof BasicVideoPlay>>>(null);
-
-  const withToken = ref(false);
-
-  const playSource = ref<Record<'src' | 'type', string>>(
-    {} as unknown as Record<'src' | 'type', string>
-  );
+  const playUrl = ref<string>();
+  const playType = ref<string>();
 
   const exampleVideoPlay =
     'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm';
 
-  const getOptions = computed<VideoJsPlayerOptions>(() => {
-    return {
-      width: '100%' as unknown as number,
-      height: '100%' as unknown as number,
-    };
-  });
-
   const { getResult } = useFingerprint();
 
   const handleGetVideoPlayUrl = async () => {
@@ -46,45 +30,19 @@
       const { config } = props;
       const { option } = config;
       const { videoConfig, uuid } = option || {};
+      const { type, url } = await getPlayUrl({
+        id: videoConfig?.id,
+        accessMode: videoConfig?.accessMode,
+        playProtocol: videoConfig?.playProtocol,
+        videoUrl: videoConfig?.videoUrl,
+        params: {
+          deviceId: videoConfig?.deviceId,
+          channelNo: videoConfig?.channelId,
+        },
+      } as unknown as CameraRecord);
+      playType.value = type;
+      playUrl.value = url;
       if (!uuid) return;
-      const { url, id, accessMode, deviceId, channelId } = videoConfig || {};
-      let type = getVideoTypeByUrl(url!);
-      let playUrl = url;
-      if (accessMode === AccessMode.Streaming && id) {
-        const { data: { url } = { url: '' } } = await getStreamingPlayUrl(id!);
-        playUrl = url;
-        playUrl && (type = getVideoTypeByUrl(playUrl!));
-      } else if (accessMode === AccessMode.GBT28181 && deviceId && channelId) {
-        const {
-          data: { flv },
-        } = await getVideoControlStart({ channelId, deviceId });
-
-        playUrl = flv;
-        type = VideoPlayerType.flv;
-      }
-
-      if (isRtspProtocol(url!)) {
-        const result = await getResult();
-        const { visitorId } = result;
-        playUrl = getFlvPlayUrl(playUrl!, visitorId);
-        withToken.value = true;
-      }
-
-      playSource.value = {
-        src: playUrl!,
-        type,
-      };
-
-      const instance = unref(basicVideoPlayEl)?.customInit((options) => {
-        if (unref(withToken)) {
-          (options as any).flvjs.config.headers = {
-            'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-          };
-        }
-        return { ...options, sources: [toRaw(unref(playSource))] } as VideoJsPlayerOptions;
-      });
-
-      instance?.play();
     } finally {
       loading.value = false;
     }
@@ -92,20 +50,8 @@
 
   const handleSelectPreview = () => {
     loading.value = false;
-    const instance = unref(basicVideoPlayEl)?.customInit((options) => {
-      withToken.value = true;
-
-      if (unref(withToken)) {
-        (options as any).flvjs.config.headers = {
-          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-        };
-      }
-      return {
-        ...options,
-        sources: [{ type: getVideoTypeByUrl(exampleVideoPlay), src: exampleVideoPlay }],
-      } as VideoJsPlayerOptions;
-    });
-    instance?.play();
+    playUrl.value = exampleVideoPlay;
+    playType.value = 'auto';
   };
 
   onMounted(() => {
@@ -126,11 +72,10 @@
 <template>
   <main class="w-full h-full flex flex-col justify-center items-center p-2">
     <Spin :spinning="loading" wrapper-class-name="video-spin">
-      <BasicVideoPlay
-        ref="basicVideoPlayEl"
-        :options="getOptions"
-        :with-token="withToken"
-        :immediateInitOnMounted="false"
+      <XGPlayer
+        :url="playUrl"
+        :stream-type="playType"
+        :config="{ width: '100%', height: '100%' }"
       />
     </Spin>
   </main>