refactor(VideoPlayer): 使用VideoPlayer组件替换原生video标签

重构VideoPlayer组件，使用@videojs-player/vue库中的VideoPlayer组件替换原生video标签，以提高代码的可维护性和扩展性。同时，将播放器配置集中到videoOptions计算属性中，支持通过props传递自定义配置。

-<!--
- * @Date: 2025-03-24 15:13:35
- * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-24 15:13:37
- * @FilePath: /mlaj/src/components/ui/VideoPlayer.vue
- * @Description: 文件描述
--->
 <template>
 <template>
   <div class="video-player-container">
   <div class="video-player-container">
-    <video
+    <VideoPlayer
       ref="videoRef"
       ref="videoRef"
-      class="video-js vjs-default-skin"
+      :options="videoOptions"
+      @ready="onPlayerReady"
       controls
       controls
-      preload="auto"
-      width="100%"
-      height="100%"
-    >
-      <source :src="videoUrl" type="video/mp4" />
-    </video>
+    />
   </div>
   </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue'
+import { VideoPlayer } from '@videojs-player/vue'
 import videojs from 'video.js'
 import videojs from 'video.js'
 import 'video.js/dist/video-js.css'
 import 'video.js/dist/video-js.css'
 
 
 const props = defineProps({
 const props = defineProps({
+  options: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
   videoUrl: {
   videoUrl: {
     type: String,
     type: String,
     required: true
     required: true
@@ -36,22 +31,24 @@ const emit = defineEmits(['onPlay', 'onPause'])
 const videoRef = ref(null)
 const videoRef = ref(null)
 let player = null
 let player = null
 
 
-onMounted(() => {
-  player = videojs(videoRef.value, {
+const videoOptions = computed(() => ({
   fluid: true,
   fluid: true,
   controls: true,
   controls: true,
   preload: 'auto',
   preload: 'auto',
-    responsive: true
-  })
+  responsive: true,
+  autoplay: props.options?.autoplay || false,
+  sources: [{
+    src: props.videoUrl,
+    type: 'video/mp4'
+  }],
+  onPlay: () => emit('onPlay'),
+  onPause: () => emit('onPause'),
+  ...props.options
+}))
 
 
-  player.on('play', () => {
-    emit('onPlay')
-  })
-
-  player.on('pause', () => {
-    emit('onPause')
-  })
-})
+const onPlayerReady = (instance) => {
+  player = instance
+}
 
 
 onBeforeUnmount(() => {
 onBeforeUnmount(() => {
   if (player) {
   if (player) {