feat(frontend): Align admin and user API integration

frontend/video-frontend-web/src/components/video/VideoPlayer.vue

@@ -1,18 +1,25 @@
 <template>
   <div class="video-player">
-    <div ref="playerRef" class="player-container"></div>
+    <video
+      ref="playerRef"
+      class="native-player"
+      :src="src"
+      :poster="poster"
+      controls
+      playsinline
+      preload="metadata"
+      @timeupdate="handleTimeUpdate"
+      @ended="emit('ended')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-import Artplayer from 'artplayer'
-import type { Danmaku } from '@/api/danmaku.ts'
+import { ref, watch } from 'vue'
 
 const props = defineProps<{
   src: string
   poster?: string
-  danmakuList?: Danmaku[]
 }>()
 
 const emit = defineEmits<{
@@ -20,82 +27,30 @@ const emit = defineEmits<{
   ended: []
 }>()
 
-const playerRef = ref<HTMLElement>()
-let instance: Artplayer | null = null
+const playerRef = ref<HTMLVideoElement>()
 
-const initPlayer = () => {
-  if (!playerRef.value) return
-
-  instance = new Artplayer({
-    container: playerRef.value,
-    url: props.src,
-    poster: props.poster,
-    autoplay: false,
-    pip: true,
-    autoSize: false,
-    autoMini: true,
-    screenshot: true,
-    setting: true,
-    loop: false,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    subtitleOffset: true,
-    miniProgressBar: true,
-    mutex: true,
-    backdrop: true,
-    playsInline: true,
-    autoPlayback: true,
-    airplay: true,
-    theme: '#00a1d6',
-    lang: navigator.language.toLowerCase(),
-    moreVideoAttr: {
-      crossOrigin: 'anonymous'
-    },
-    customType: {
-      danmaku: (video, url) => {
-        // 弹幕插件集成
-      }
-    }
-  })
-
-  instance.on('video:timeupdate', () => {
-    emit('timeupdate', instance?.video?.currentTime || 0)
-  })
-
-  instance.on('video:ended', () => {
-    emit('ended')
-  })
+const handleTimeUpdate = () => {
+  emit('timeupdate', playerRef.value?.currentTime || 0)
 }
 
 watch(() => props.src, () => {
-  if (instance) {
-    instance.switchUrl(props.src, props.poster)
-  }
-})
-
-onMounted(() => {
-  initPlayer()
-})
-
-onUnmounted(() => {
-  if (instance) {
-    instance.destroy()
-  }
+  if (!playerRef.value) return
+  playerRef.value.load()
 })
 </script>
 
 <style scoped lang="scss">
 .video-player {
   width: 100%;
+  height: 100%;
   background: #000;
+}
 
-  .player-container {
-    width: 100%;
-    height: 100%;
-    aspect-ratio: 16 / 9;
-  }
+.native-player {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 16 / 9;
+  display: block;
+  background: #000;
 }
 </style>