vue中动态设置source标签

标签"/>

vue中动态设置source标签

项目中有个视频播放,路径通过接口返回,而且不带后缀,并不确定是什么类型的视频文件,所以要通过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('')}).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>