vue 预览视频

reembarkation2023-09-08 14:02

1.预览本地文件

1.1 直接给video或者embed的src赋值本地路径

复制代码

<video :src="videoUrl"></video>
// 或者 使用embed标签
 <embed :src="videoUrl" />

1.2 读取文件流形式

复制代码

<input type="file" ref="file" />
<video :src="videoUrl"></video>

const blob = new Blob([this.$refs.file.files[0]], {type: 'video/mp4'})
 const reader = new FileReader();
 reader.onload = (ev) => {
     const src = ev.target.result
     that.videoUrl=src
    }
 reader.readAsDataURL(blob);

从服务器接口或者视频的数据流

api(param).then(res => {
const blob = new Blob(res.data, {type: 'video/mp4'})
const reader = new FileReader();
reader.onload = (ev) => {
const src = ev.target.result
that.videoUrl=src
}
reader.readAsDataURL(blob);
})