解决video动态切换src视频不改变问题

解决video动态切换src视频不改变问题

1、问题：

在开发react项目中，有个需求是要动态的改变video中的视频。但是video标签中的src已经更新，视频却还是显示原来的视频，并未更新。

2、产生原因：

当 video 中存在 source 标签的时候，浏览器渲染之后会自动去获取地址，即便地址改变，浏览器也不会再去获取地址。

3、有效的解决方案：

法一：不使用source标签，直接在video中使用src，动态切换这里面的src

<video src={'http://' + item.video} width="320" height="240" controls autoPlay preload="auto" style={{ objectFit: 'fill' }}></video>

法二：使用插件：video-react
安装：npm install video-react

// 导入后使用
<Player playsInline src={'http://' + item.video} />

4、之前的无效尝试

方法一：
使用video + source，在video 和 source中都使用src，在src更新后，利用video的load方法进行更新；

<video id="myVideo" src={'http://' + item.video} width="320" height="240" controls autoPlay preload="auto" style={{ objectFit: 'fill' }}>
	<source src={'http://' + item.video}></source>
</video>

// 当video更新后使用load方法重新加载
document.getElementById("myVideo").load();

效果 ：
src更新后，视频显示框不会再显示原来的视频了，但是很难加载到新的视频，大部分情况下是直接黑掉。