我有一个服务器应用程序，可呈现30 FPS视频流，然后将其实时编码并复制到WebM Byte Stream。
在客户端，HTML5页面打开一个WebSocket到服务器，当接受连接时，它开始生成流。传递标头后，每个后续WebSocket框架都包含一个WebM SimpleBlock。关键帧每15帧发生一次，当发生这种情况时，会启动一个新的簇。
客户端还创建MediaSource，并在从WS接收帧时，将内容附加到其活动缓冲区。 <video>在追加第一帧后立即开始播放。
一切都运作良好。我唯一的问题是网络抖动导致播放位置在一段时间后偏离实际时间。我目前的解决方案是挂钩updateend事件，检查传入群集上video.currentTime和时间码之间的差异，如果超出可接受范围，则手动更新currentTime。不幸的是，这会导致播放中出现明显的暂停和跳跃，这是相当不愉快的。
解决方案也有点奇怪：我确切知道最新关键帧的位置，但我必须将其转换为整秒（根据W3C规范），然后才能将其传递到currentTime，其中浏览器可能必须绕过并找到最近的关键帧。
我的问题是：有没有办法告诉媒体元素始终寻找可用的最新关键帧，或保持播放时间与系统时钟时间同步？
答案 0 :(得分：3)
网络抖动导致播放位置漂移
那不是你的问题。如果您在流中遇到辍学，那么在开始播放之前您没有足够的缓冲，并且播放只有一个适当大小的缓冲区，即使比实时时间晚几秒（这是正常的）。
我目前的解决方案是挂钩updateend事件，检查video.currentTime和传入集群上的时间码之间的区别
这接近正确的方法。我建议你忽略传入集群的时间码，而是检查你的缓冲时间范围。您在WebM群集上收到的内容以及已解码的内容有两个不同的内容。
不幸的是，这会导致播放中出现明显的暂停和跳跃，这是相当不愉快的。
你还怎么做？您可以跳转到实时，也可以提高播放速度以赶上实时。无论哪种方式，如果你想赶上实时，你必须及时跳过这一点。
解决方案也有点奇怪：我确切知道最新关键帧的位置
您可以，但播放器不会直到该媒体被解码。在任何情况下，关键帧都无关紧要......您可以寻找非关键帧位置。浏览器将根据需要在P / B帧之前解码。
在将其传递给currentTime之前，我必须将其转换为整秒（根据W3C规范）
那是完全错误的。 currentTime被指定为double。 https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-media-currenttime
我的问题是：有没有办法告诉媒体元素始终寻找可用的最新关键帧，或保持播放时间与系统时钟时间同步？
它会自动播放最后一个缓冲区。你不需要做任何事情。您正在通过确保媒体数据落在缓冲区中并将播放设置为合理的接近来完成您的工作。如果网络状况发生变化，您可以随时向前推进，但坦率地说，这听起来好像您只是破坏了代码和破坏缓冲策略。否则，播放将非常顺利。
如果落后的追赶不会自动发生，也不应该。如果播放器因缓冲区耗尽而暂停，则需要重新建立缓冲区，然后才能恢复播放。这就是缓冲区的重点。
此外，您对系统时钟保持及时的期望不是一个好主意，也是不合理的。不同的设备具有不同的刷新率，将以不同的速率处理视频。只需点击播放即可播放。如果您最终关闭几秒钟，请继续设置currentTime，但在此之前对您已缓冲的内容充满信心。