如何保持实时 MediaSource 视频流同步？

我有一个服务器应用程序，它渲染 30 FPS 视频流，然后将其实时编码和复用为WebM 字节流 https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/webm-byte-stream-format.html.

在客户端，HTML5 页面打开一个到服务器的 WebSocket，当连接被接受时，服务器开始生成流。交付标头后，每个后续 WebSocket 帧都包含一个 WebM SimpleBlock。每 15 帧出现一个关键帧，当发生这种情况时，将启动一个新的簇。

客户端还创建一个媒体源 https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html，并在从 WS 接收到帧时，将内容附加到其活动缓冲区。这<video>附加第一帧后立即开始播放。

一切都运转良好。我唯一的问题是网络抖动导致播放位置在一段时间后偏离实际时间。我当前的解决方案是挂钩updateend事件，检查之间的差异video.currentTime和传入集群上的时间码并手动更新currentTime如果它超出了可接受的范围。不幸的是，这会导致播放出现明显的暂停和跳跃，这是相当不愉快的。

这个解决方案也感觉有点奇怪：我确切地知道最新的关键帧在哪里，但我必须将其转换为一整秒（根据 W3C 规范），然后才能将其传递给currentTime，浏览器可能必须四处寻找最近的关键帧。

我的问题是：有没有办法告诉媒体元素始终寻找可用的最新关键帧，或者保持播放时间与系统时钟时间同步？

网络抖动导致播放位置漂移

那不是你的问题。如果您在流中遇到丢失，则说明您在开始播放之前没有足够的缓冲，并且播放只有适当大小的缓冲区，即使比实时慢了几秒钟（这是正常的）。

我当前的解决方案是挂钩 updateend 事件，检查 video.currentTime 和传入集群上的时间码之间的差异

这接近正确的方法。我建议您忽略传入集群的时间码，而是检查您的缓冲时间范围。您在 WebM 集群上收到的内容和已解码的内容是两件不同的事情。

不幸的是，这会导致播放出现明显的暂停和跳跃，这是相当不愉快的。

否则你会怎么做？您可以跳转到实时，也可以提高播放速度以赶上实时。不管怎样，如果你想赶上实时，你就必须及时跳过时间来做到这一点。

该解决方案也感觉有点奇怪：我确切地知道最新的关键帧在哪里

您可以，但播放器不会在该媒体被解码之前这样做。无论如何，关键帧是无关紧要的......您可以寻找非关键帧位置。浏览器将根据需要在 P/B 帧之前进行解码。

我必须将其转换为一整秒（根据 W3C 规范），然后才能将其传递给 currentTime

这完全是错误的。这currentTime被指定为double. https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-media-currenttime https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-media-currenttime

我的问题是：有没有办法告诉媒体元素始终寻找可用的最新关键帧，或者保持播放时间与系统时钟时间同步？

它将自动播放最后一个缓冲区。你不需要做任何事情。您的工作是确保媒体数据进入缓冲区并将播放设置为尽可能接近合理的值。如果网络条件发生变化允许您执行此操作，您始终可以将其向前推进，但坦率地说，这听起来好像您只是有损坏的代码和损坏的缓冲策略。否则，播放就会很流畅。

如果落后了，迎头赶上不会自动发生，也不应该发生。如果播放器由于缓冲区耗尽而暂停，则需要重新建立缓冲区才能恢复播放。这就是缓冲区的全部意义。

此外，您期望使任何内容与系统时钟保持同步并不是一个好主意，也是不合理的。不同的设备具有不同的刷新率，将以不同的速率处理视频。只需点击播放即可播放。如果你最终有几秒钟的休息时间，请继续设置currentTime，但在这样做之前要对自己缓冲的内容非常有信心。