前端处理后端base64视频流方式
vue展示视频base64流方式
·
vue中处理视频流方法
后端返回一段数据流前端用video展示视频
后端使用get请求方式写好接口前端人员可以直接使用video标签src属性直接访问接口
<video
width="100%"
height="100%"
controls
id="myVideo"
>
<source :src="url" type="video/mp4" />
</video>
data中保存链接数据
data(){
return {
url:"`http://localhost:8080//xxx/xxxxx/xxxx/xxxx?xxxx=${videoPath}&xxx=${videoName}`"
//保存接口的url 上方解析就会展示视频 scr标签会访问接口并拿到返回值作用于src
}
}
vue中动态的展示视频使用:src第一次有效,第二次无效
解答:vue绑定video标签的src属性无效,需要获得DOM重新给video的src属性赋值
let videos = document.getElementById("myVideo");
videos.src = this.url
如果视频是在弹窗中应该在dom已经生成后再去取dom在修改src属性
this.$nextTick(() => {
let videos = document.getElementById("myVideo");
// console.log(videos);
videos.src = this.url;
});
仅用于本人学习记录!!!
更多推荐
已为社区贡献1条内容
所有评论(0)