解决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更新后,视频显示框不会再显示原来的视频了,但是很难加载到新的视频,大部分情况下是直接黑掉。