动态改变视频源导致闪烁

Question

我有带有源的原生视频标签，该标签通过 onEnded 事件动态更改，该事件触发一个方法，该方法加载标签中的下一个视频源以进行播放。

主要实现是制作一个播放列表并不断注入视频源，直到到达列表末尾。

** 问题：一旦视频源发生变化，它会闪烁几毫秒，然后播放下一个视频。

• 尝试了多种方法来解决，包括固定宽度 - 高度，但没有奏效。
• 曾经的方法是渲染多个播放器并根据正在播放的源将它们隐藏/显示。这种方法按预期工作，但缺点是如果我在播放列表中有 100 个视频，它会在 DOM 中添加 100 个视频节点。

我确定这不是页面重新渲染，除了视频源之外没有其他道具或状态变化。

甚至尝试过实现 redux 来处理全局状态，但没有运气！

附上显示问题的视频链接： See Video

Answer 1

令我印象深刻的是，它看起来像它一样流畅。当您更改 src 时，很多上下文被拆除并重新设置。

曾经的方法是渲染多个播放器并根据正在播放的源将它们隐藏/显示。这种方法按预期工作，但缺点是如果我在播放列表中有 100 个视频，它将在 DOM 中添加 100 个视频节点。

你不需要 100...你只需要 2。让你的下一个球员准备好过渡到，而第一个球员正在完成。转换完成后，消灭第一个玩家并准备好第三个。