vue中动态设置source标签

Ne￡2023-10-19 13:55

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