vue 预览视频
vue项目中预览视频:1.1 直接给video或者embed的src赋值本地路径。1.2 读取文件流形式。2. 从服务器接口或者视频的数据流。
·
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);
2. 从服务器接口或者视频的数据流
<video :src="videoUrl"></video>
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);
})
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)