vue中动态设置source标签

项目中有个视频播放,路径通过接口返回,而且不带后缀,并不确定是什么类型的视频文件,所以要通过source标签去进行设置.

问题:当video中存在source标签的时候，浏览器渲染之后会自动去获取地址，即便地址改变，浏览器也不会再去获取地址。
解决方法1:通过v-if销毁创建元素重新获取
代码示例:

<template>
  <video controls loop v-if="showPlayer" @timeupdate="timeupdate">
    <source :src="videoSrc + '.ogg'" type="video/ogg">
    <source :src="videoSrc + '.mp4'" type="video/mp4">
    <source :src="videoSrc + '.webm'" type="video/webm">
    您的浏览器不支持 video 标签。
  </video>
</template>
<script>
export default {
  data() {
    return {
      showPlayer: false,
      videoSrc: ""
    }
  },
  mounted() {
    this.getVideo();
  },
  methods: {
    getVideo() {
     this.showPlayer=false;
      new Promise((resolve, reject) => {
        resolve('https://www.runoob.com/try/demo_source/movie')
      }).then(res => {
        this.videoSrc = res;
        this.showPlayer=true;
      })
    },
    timeupdate(){
    }
  }
}
</script>

解决方法2:用computed和v-html动态渲染,动态渲染没有ref,如果需要绑定方法也比较麻烦

<template>
  <div class="player-box" v-html="playerBox"></div>
</template>
<script>
  export default {
  data() {
    return {
      videoSrc: ""
    }
  },
  computed:{
    playerBox(){
      return `
        <video controls loop>
          <source src="${this.videoSrc}.ogg" type="video/ogg">
          <source src="${this.videoSrc}.mp4" type="video/mp4">
          <source src="${this.videoSrc}.webm" type="video/webm">
          您的浏览器不支持 video 标签。
        </video>
      `
    }
  },
  mounted() {
    this.getVideo();
  },
  methods: {
    getVideo() {
      new Promise((resolve, reject) => {
        resolve('https://www.runoob.com/try/demo_source/movie')
      }).then(res => {
        this.videoSrc = res;
      })
    }
  }
}
</script>