项目中有个视频播放,路径通过接口返回,而且不带后缀,并不确定是什么类型的视频文件,所以要通过source标签去进行设置.
问题 :当video中存在source标签的时候,浏览器渲染之后会自动去获取地址,即便地址改变,浏览器也不会再去获取地址。
解决方法 :通过动态的插入source标签的方式,可以触发浏览器进行重排,从而去获取相应地址的文件进行播放。
代码示例:
<template>
<video ref="videoPlayer" controls loop></video>
</template>
<script>
export default {
mounted(){
this.getVideo();
},
methods: {
getVideo(){
new Promise((resolve,reject)=>{
resolve('https://www.runoob.com/try/demo_source/movie')
}).then(res=>{
this.$refs.videoPlayer.innerHTML=`
<source src="${res}.ogg" type="video/ogg">
<source src="${res}.mp4" type="video/mp4">
<source src="${res}.webm" type="video/webm">
您的浏览器不支持 video 标签。
`
})
}
}
}
</script>