vue 预览视频

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); 
  1. 从服务器接口或者视频的数据流

    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);
    })

相关推荐
街尾杂货店&30 分钟前
css word-spacing属性
前端·css
千叶寻-33 分钟前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
光影少年6 小时前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天8 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_8 小时前
HTML5(前端基础)
前端·html·html5
Jagger_8 小时前
敏捷开发流程-精简版
前端·后端
FIN66688 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing8 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1278 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿8 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js