<!--
 * @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>
  <div class="video-player-container">
    <video
      ref="videoRef"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
      width="100%"
      height="100%"
    >
      <source :src="videoUrl" type="video/mp4" />
    </video>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

const props = defineProps({
  videoUrl: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['onPlay', 'onPause'])
const videoRef = ref(null)
let player = null

onMounted(() => {
  player = videojs(videoRef.value, {
    fluid: true,
    controls: true,
    preload: 'auto',
    responsive: true
  })

  player.on('play', () => {
    emit('onPlay')
  })

  player.on('pause', () => {
    emit('onPause')
  })
})

onBeforeUnmount(() => {
  if (player) {
    player.dispose()
  }
})

defineExpose({
  pause() {
    if (player) {
      player.pause()
    }
  }
})
</script>

<style scoped>
.video-player-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>