如何让HTML5视频同步？

Question

你会说video1.play();其次video2.play();会同时播放视频，但他们有一个微笑的延迟。你如何消除这种延迟并保持同步？

Answer 1

首先检查这两个视频的readyState大于3，要做到这一点：

• 寄存器canplay事件处理两个视频
• 检查登记两个处理程序后准备状态（如果canplay已经在事件处理程序注册之前触发视频）
• 只有在两者都准备就绪时才启动视频

由于网络问题，这两个视频仍然可能不同步，您可以使用requestAnimationFrame轮询视频的currentTime属性，并将它们同步（通过设置currentTime），如果它们相距太远。