反应条件渲染视频播放器

Question

我正在开发一个基于视频的时间轴，每个视频都会在滚动时自动播放。

我只是在滚动到视图时一次显示一个视频，然后我在移出DOM视频节点时将其移出并完全正常工作。

{this.state.playing == key &&
    <video autoPlay muted loop>
        <source src={"/static/webm/videos/"+video.webm} />
    </video>
}

我遇到的问题是网络速度慢，如果用户的互联网连接速度很慢，并且继续滚动浏览过去的所有已删除的视频，即使DOM树中不再存在，也会导致网站很快进入停止并浪费我的资源。

正如您在此处看到的，当我使用开发工具和限制启用测试我的网站时：

所以我的问题是如何阻止视频在完成下载之前从DOM中删除后在后台下载？

Answer 1

如果您在浏览器中使用内置视频支持，则无法控制缓冲的数据量。这取决于浏览器的实现，并且没有API来控制它。

这里最好的选择是使用其他支持这些功能的播放器实现，例如dash.js，Bitmovin Player