vue实现视频预览

Vue 实现视频预览的方法

在 Vue 中实现视频预览功能可以通过多种方式完成，以下是几种常见的实现方法：

使用 HTML5 的 <video> 标签

通过 HTML5 的 <video> 标签可以轻松实现视频预览功能。结合 Vue 的数据绑定和事件处理，可以动态控制视频的播放和预览。

<template>
  <div>
    <video 
      ref="videoPlayer" 
      :src="videoSrc" 
      controls 
      @loadedmetadata="handleLoadedMetadata"
    ></video>
    <input type="file" @change="handleFileChange" accept="video/*" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: null
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.videoSrc = URL.createObjectURL(file);
      }
    },
    handleLoadedMetadata() {
      console.log('Video metadata loaded');
    }
  }
};
</script>

使用第三方库

如果需要更复杂的视频预览功能，可以考虑使用第三方库如 video.js 或 plyr。这些库提供了丰富的 API 和样式定制选项。

<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
    <input type="file" @change="handleFileChange" accept="video/*" />
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
  data() {
    return {
      player: null
    };
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, {
      controls: true,
      autoplay: false,
      preload: 'auto'
    });
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        const videoSrc = URL.createObjectURL(file);
        this.player.src({ type: 'video/mp4', src: videoSrc });
      }
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>

实现缩略图预览

如果需要生成视频的缩略图预览，可以使用 canvas 结合视频的 timeupdate 事件。

<template>
  <div>
    <video 
      ref="videoPlayer" 
      :src="videoSrc" 
      @timeupdate="generateThumbnail"
    ></video>
    <canvas ref="thumbnailCanvas"></canvas>
    <input type="file" @change="handleFileChange" accept="video/*" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: null
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.videoSrc = URL.createObjectURL(file);
      }
    },
    generateThumbnail() {
      const video = this.$refs.videoPlayer;
      const canvas = this.$refs.thumbnailCanvas;
      const ctx = canvas.getContext('2d');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    }
  }
};
</script>

使用 Vue 组件库

如果需要快速实现视频预览功能，可以考虑使用 Vue 组件库如 Element UI 或 Vuetify，这些库提供了现成的文件上传和预览组件。

<template>
  <div>
    <el-upload
      action="#"
      :auto-upload="false"
      :on-change="handleFileChange"
      accept="video/*"
    >
      <el-button type="primary">选择视频</el-button>
    </el-upload>
    <video v-if="videoSrc" :src="videoSrc" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: null
    };
  },
  methods: {
    handleFileChange(file) {
      this.videoSrc = URL.createObjectURL(file.raw);
    }
  }
};
</script>

以上方法可以根据具体需求选择适合的实现方式。