<template>
  <div class="video-player">
    <video
      ref="videoRef"
      class="video-element"
      :src="src"
      :poster="poster"
      controls
      @ended="$emit('ended')"
      @timeupdate="handleTimeUpdate"
    >
      您的浏览器不支持 HTML5 视频播放
    </video>
  </div>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  src: {
    type: String,
    required: true
  },
  poster: {
    type: String,
    default: ''
  }
})

defineEmits(['ended', 'timeupdate'])

const handleTimeUpdate = (event) => {
  const video = event.target
  emit('timeupdate', {
    currentTime: video.currentTime,
    duration: video.duration
  })
}
</script>

<style lang="scss" scoped>
.video-player {
  width: 100%;
  background: #000;
  
  .video-element {
    width: 100%;
    height: 100%;
  }
}
</style> 