feat: add video.js package && implement videoPlay component

-{
-  "i18n-ally.localesPaths": [
-    "src/locales",
-    "src/locales/lang",
-    "public/resource/tinymce/langs"
-  ],
-  "commentTranslate.targetLanguage": "en",
-  "cSpell.words": [
-    "Cmds",
-    "unref"
-  ]
-}

@@ -63,6 +63,7 @@
     "sortablejs": "^1.14.0",
     "tinymce": "^5.8.2",
     "vditor": "^3.8.6",
+    "video.js": "^7.20.3",
     "vue": "^3.2.31",
     "vue-i18n": "9.1.7",
     "vue-json-pretty": "^2.0.4",
@@ -90,6 +91,7 @@
     "@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",

+import { withInstall } from '/@/utils/index';
+import VideoPlay from './src/VideoPlay.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, unref } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  const { prefixCls } = useDesign('basic-video-play');
+
+  const props = defineProps<{
+    options?: VideoJsPlayerOptions;
+  }>();
+
+  const emit = defineEmits<{
+    (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
+  }>();
+
+  const videoPlayEl = ref<HTMLVideoElement>();
+
+  const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
+
+  const getOptions = computed(() => {
+    const { options } = props;
+    const defaultOptions: VideoJsPlayerOptions = {
+      language: 'zh',
+      muted: true,
+      liveui: true,
+      controls: true,
+    };
+    return { ...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 = () => {
+    videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
+      emit('ready', unref(videoPlayInstance));
+    });
+  };
+
+  onMounted(() => {
+    init();
+  });
+
+  onUnmounted(() => {
+    unref(videoPlayInstance)?.dispose();
+    videoPlayInstance.value = null;
+  });
+</script>
+
+<template>
+  <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"
+    ></video>
+  </div>
+</template>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-video-play';
+</style>

+export enum VideoPlayerType {
+  m3u8 = 'application/x-mpegURL',
+  mp4 = 'video/mp4',
+  webm = 'video/webm',
+}
+
+export const getVideoTypeByUrl = (url: string) => {
+  const splitExtReg = /(?:.*)(?<=\.)/;
+
+  const type = url.replace(splitExtReg, '');
+
+  if (VideoPlayerType[type]) return VideoPlayerType[type];
+
+  return VideoPlayerType.mp4;
+};