refactor(VideoPlayer): 优化视频播放器组件代码结构

重构视频播放器组件，使用 ref 替代 let 定义 player 和 state，增加 handleMounted 方法处理挂载逻辑，并调整视频播放器配置以支持更多用户操作和控件优化

@@ -3,8 +3,10 @@
     <VideoPlayer
       ref="videoRef"
       :options="videoOptions"
-      @ready="onPlayerReady"
-      controls
+      crossorigin="anonymous"
+          playsinline
+      :class="['video-player', 'vjs-big-play-centered', { loading: !state }]"
+      @mounted="handleMounted"
     />
   </div>
 </template>
@@ -29,7 +31,8 @@ const props = defineProps({
 
 const emit = defineEmits(['onPlay', 'onPause'])
 const videoRef = ref(null)
-let player = null
+const player = ref(null)
+const state = ref(null)
 
 const videoOptions = computed(() => ({
   fluid: true,
@@ -43,6 +46,19 @@ const videoOptions = computed(() => ({
   }],
   onPlay: () => emit('onPlay'),
   onPause: () => emit('onPause'),
+  userActions: {
+    hotkeys: true,
+    doubleClick: true
+  },
+  controlBar: {
+    progressControl: {
+      seekBar: {
+        mouseTimeDisplay: {
+          keepTooltipsInside: true
+        }
+      }
+    }
+  },
   ...props.options
 }))
 
@@ -50,16 +66,22 @@ const onPlayerReady = (instance) => {
   player = instance
 }
 
+const handleMounted = (payload) => {
+  console.log('Advanced player mounted', payload)
+  state.value = payload.state
+  player.value = payload.player
+}
+
 onBeforeUnmount(() => {
-  if (player) {
-    player.dispose()
+  if (videoRef.value?.$player) {
+    videoRef.value.$player.dispose()
   }
 })
 
 defineExpose({
   pause() {
-    if (player) {
-      player.pause()
+    if (videoRef.value?.$player) {
+      videoRef.value.$player.pause()
     }
   }
 })