vue实现视频预览
Vue 实现视频预览的方法
在 Vue 中实现视频预览功能通常涉及文件上传时的即时预览、视频列表的缩略图展示或播放前的预览画面。以下是几种常见的实现方式：
通过 <video> 标签实现本地文件预览
当用户选择本地视频文件时，可以通过 URL.createObjectURL 生成临时链接供 <video> 标签预览：
<template>
<div>
<input type="file" accept="video/*" @change="handleFileChange" />
<video v-if="videoUrl" :src="videoUrl" controls width="400"></video>
</div>
</template>
<script>
export default {
data() {
return {
videoUrl: null
};
},
methods: {
handleFileChange(event) {
const file = event.target.files[0];
if (file) {
this.videoUrl = URL.createObjectURL(file);
}
}
},
beforeUnmount() {
if (this.videoUrl) {
URL.revokeObjectURL(this.videoUrl); // 清除内存
}
}
};
</script>使用第三方库生成视频缩略图
如需生成视频的预览缩略图，可以使用 vue-video-thumbnail 库：
安装依赖：
npm install vue-video-thumbnail组件示例：
<template>
<div>
<input type="file" accept="video/*" @change="handleFileChange" />
<video-thumbnail
v-if="videoFile"
:video="videoFile"
width="200"
snapshot-at="1"
></video-thumbnail>
</div>
</template>
<script>
import VideoThumbnail from 'vue-video-thumbnail';
export default {
components: { VideoThumbnail },
data() {
return {
videoFile: null
};
},
methods: {
handleFileChange(event) {
this.videoFile = event.target.files[0];
}
}
};
</script>服务端返回的视频预览方案
若视频已上传至服务器，通常有两种预览方式：
-
直接播放预览片段
<video :src="videoUrl" controls poster="thumbnail.jpg"></video> -
显示首帧缩略图 通过
poster属性指定服务端生成的缩略图：<video :src="videoUrl" controls :poster="getThumbnailUrl(videoUrl)"></video>
注意事项
- 本地预览时需调用
URL.revokeObjectURL释放内存 - 移动端部分浏览器可能限制自动播放，需添加
muted属性 - 服务端视频处理建议使用 FFmpeg 生成缩略图
- 大视频文件建议分片上传后再预览
