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

相关推荐
艾小码2 分钟前
告别数据混乱!掌握JSON与内置对象,让你的JS代码更专业
前端·javascript
liangshanbo12156 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15888 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_8 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD8 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~9 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15889 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫9 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式