<template>
  <div>
    <!-- 文件輸入框，允許用戶選擇視頻文件 -->
    <input type="file" @change="handleFileChange" accept="video/*">
    <!-- 視頻播放器，用于預(yù)覽所選視頻 -->
    <video ref="videoPlayer" controls width="640" height="360"></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存儲用戶選擇的視頻文件
      selectedVideoFile: null
    };
  },
  methods: {
    handleFileChange(event) {
      // 獲取用戶選擇的文件列表
      const files = event.target.files;
      if (files.length > 0) {
        // 取第一個選擇的文件作為要預(yù)覽的視頻文件
        this.selectedVideoFile = files[0];
        // 調(diào)用預(yù)覽視頻的方法
        this.previewVideo();
      }
    },
    previewVideo() {
      if (this.selectedVideoFile) {
        // 創(chuàng)建一個 FileReader 實例，用于讀取文件內(nèi)容
        const reader = new FileReader();
        // 監(jiān)聽 FileReader 的 load 事件，當(dāng)文件讀取完成時觸發(fā)
        reader.onload = (e) => {
          // 獲取讀取到的文件數(shù)據(jù)（以 DataURL 形式）
          const videoData = e.target.result;
          // 將視頻數(shù)據(jù)賦值給視頻播放器的 src 屬性，實現(xiàn)預(yù)覽
          this.$refs.videoPlayer.src = videoData;
        };
        // 以 DataURL 形式讀取所選的視頻文件
        reader.readAsDataURL(this.selectedVideoFile);
      }
    }
  }
};
</script>

<style scoped>
/* 可以添加一些樣式來美化視頻播放器 */
video {
  margin-top: 20px;
  border: 1px solid #ccc;
}
</style>

<template>
  <div>
    <VideoPreview />
  </div>
</template>

<script>
import VideoPreview from './VideoPreview.vue';

export default {
  components: {
    VideoPreview
  }
};
</script>