Vue.js实现对视频预览的示例代码

<template>
  <div>
    <!-- 文件输入框，允许用户选择视频文件 -->
    <input type="file" @change="handleFileChange" accept="video/*">
    <!-- 视频播放器，用于预览所选视频 -->
    <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) {
        // 取第一个选择的文件作为要预览的视频文件
        this.selectedVideoFile = files[0];
        // 调用预览视频的方法
        this.previewVideo();
      }
    },
    previewVideo() {
      if (this.selectedVideoFile) {
        // 创建一个 FileReader 实例，用于读取文件内容
        const reader = new FileReader();
        // 监听 FileReader 的 load 事件，当文件读取完成时触发
        reader.onload = (e) => {
          // 获取读取到的文件数据（以 DataURL 形式）
          const videoData = e.target.result;
          // 将视频数据赋值给视频播放器的 src 属性，实现预览
          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>