使用html5视频反应单一的真相来源

时间:2016-11-25 15:04:15

标签: javascript reactjs html5-video

我正在构建一个应用程序,该应用程序具有html5视频和几个与视频交互并使用视频的当前时间的控件。

根据我的理解,应用程序组件应该保持其状态视频的当前时间并将其传递给其他孩子(例如,显示当前时间秒的显示)。

假设我点击键盘快捷键以提前跳过视频5s。这样我就不得不更新App状态并将currentTime传递给具有html5视频标记的组件,因此它会自行更新。

然而,当视频正在播放时,我发现App状态的不断更新令人费解,因为它应该将状态传递给视频,导致视频播放时出现一些hickup。

我能够使用" shouldComponentUpdate"来纠正这个问题。但是,文档建议不要使用它,因为它可能会在将来被弃用。我可以使用自己的布尔标志来模仿shouldComponentUpdate功能,但是这开始使我的代码闻起来很糟糕,似乎我不应该试图控制通过标志的状态。

在我看来,真正的单一来源"这里应该是html5视频currentTime属性,但这似乎不适合反应所暗示的状态层次结构(App组件应保持状态并将其传递给其他组件)

我是否应该将currentTime作为应用程序的状态保持不变并尝试破解视频更新以使其不会抖动并循环?

1 个答案:

答案 0 :(得分:-1)

要么做这里做的事情,要么只是阻止重新发明轮子并使用它

http://mderrick.github.io/react-html5video/