<template>
    <div class="video-container">
      <video
      style="height: inherit;"
        ref="videoRef"
        :src="props.src"
        width="100%"
        height="400px"
        controls
        @play="handlePlay"
        @fullscreenchange="handleFullscreenChange"
      >
        您的浏览器不支持 video 标签。
      </video>
    </div>
  </template>
  
  <script setup>
  import { ref, watch, onMounted, onUnmounted } from 'vue';
  
  const props = defineProps({
    src: String
  });
  
  const videoSrc = ref(props.src);
  const videoRef = ref(null);
  const isFullscreen = ref(false);
  
  const handlePlay = () => {
    console.log('视频开始播放');
  };
  
  const handleFullscreenChange = () => {
    isFullscreen.value = document.fullscreenElement === videoRef.value;
  };  
  watch(() => props.src, (newSrc) => {
    videoSrc.value = newSrc;
  });
  
  onMounted(() => {
    console.log('视频组件挂载完成');
  });
  
  onUnmounted(() => {
    console.log('视频组件卸载');
  });
  </script>
  
  <style scoped>
  .video-container {
    position: relative;
    width: 100%;
    max-width: 100%; /* 可以根据需要调整 */
    height: 100%;
   margin: 0 auto;
  }
  
  button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
  }
  </style>