动态更改视频源会导致闪烁

时间:2019-12-24 22:27:24

标签: javascript reactjs

我有一个本地视频标签,其源会通过onEnded事件动态更改,该事件会触发一种方法,该方法会加载标签中的下一个视频源以进行播放。

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

**问题:视频源更改后,它会闪烁几毫秒,然后播放下一个视频。

  • 尝试了多种方法来解决,包括固定宽度-高度,但是没有用。
  • 一种方法是渲染多个玩家,然后根据正在播放的源将其隐藏/显示。这种方法按预期工作,但缺点是,如果播放列表中有100个视频,则会在DOM中添加100个视频节点。

我确定这不是页面重新渲染,并且除了视频源之外没有其他道具或状态更改。

甚至尝试实现redux以全局状态处理它,但是没有运气!

附加了显示问题的视频链接: See Video

1 个答案:

答案 0 :(得分:0)

给我留下深刻的印象,就是它看起来像它一样平滑。当您更改src时,很多上下文将被删除并重新设置。

  

一次方法是渲染多个玩家,然后根据正在播放的源将其隐藏/显示。这种方法按预期工作,但缺点是,如果播放列表中有100个视频,则会在DOM中添加100个视频节点。

您不需要100 ...您只需要2。让您的下一个播放器准备过渡,而第一个播放器正在结束。过渡后,销毁第一个玩家并准备好第三个玩家。