前端处理后端base64视频流方式

后端返回一段数据流前端用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;
});

仅用于本人学习记录!!!