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()