項(xiàng)目中有個(gè)視頻播放,路徑通過(guò)接口返回,而且不帶后綴,并不確定是什么類型的視頻文件,所以要通過(guò)source標(biāo)簽去進(jìn)行設(shè)置.

問(wèn)題:當(dāng)video中存在source標(biāo)簽的時(shí)候，瀏覽器渲染之后會(huì)自動(dòng)去獲取地址，即便地址改變，瀏覽器也不會(huì)再去獲取地址。
解決方法:通過(guò)動(dòng)態(tài)的插入source標(biāo)簽的方式，可以觸發(fā)瀏覽器進(jìn)行重排，從而去獲取相應(yīng)地址的文件進(jìn)行播放。
代碼示例:

<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 標(biāo)簽。`})}}}</script>