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

相关推荐
独立开阀者_FwtCoder3 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder4 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep11 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛16 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i25 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟29 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览33 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少35 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z1 小时前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠1 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro