Video标签动态修改src地址播放问题


不管在React或Vue中,将一个变量赋值给src属性,当修改这个变量的值时,video播放的还是原来的视频。

Vue中

<video id="root">
  <source :src="videoUrl" />
video>

React中

<video id="root">
  <source src={videoUrl} />
video>

动态修改videoUrl的值时,播放的视频,是不会跟着地址动态切换的,我们需要让video重新加载新的源(地址),将新的地址,赋值给video的src属性,然后执行play()方法即可

let player = document.querySelector('#root') 
player.src
= "新的地址"
player.play()