我有一个服务器应用程序,它呈现30 FPS视频流,然后将其实时编码和复用到WebM Byte Stream。
在客户端,HTML5页面打开一个WebSocket到服务器,当接受连接时,它开始生成流。传递标头后,每个后续WebSocket框架都包含一个WebM SimpleBlock。关键帧每15帧发生一次,当发生这种情况时,将启动一个新的Cluster。
客户端还创建一个MediaSource,并在从WS接收帧时,将内容附加到其活动缓冲区。在附加第一帧后,<video>
立即开始播放。
一切都运作得相当好。我唯一的问题是网络抖动导致播放位置在一段时间后偏离实际时间。我目前的解决方案是挂钩updateend
事件,检查video.currentTime
和传入集群上的时间码之间的差异,并手动更新currentTime
,如果它超出可接受的范围。不幸的是,这会导致播放中明显的暂停和跳跃,这是相当不愉快的。
解决方案也有点奇怪:我确切知道最新的关键帧在哪里,但我必须将其转换为整秒(根据W3C规范)才能将其传递到currentTime
,其中浏览器可能必须去周围找到最近的关键帧。
我的问题是:有没有办法告诉媒体元素始终寻找可用的最新关键帧,或保持播放时间与系统时钟时间同步?
网络抖动导致播放位置漂移
那不是你的问题。如果您在流中遇到丢失,那么在开始播放之前您没有足够的缓冲,并且播放只有一个适当大小的缓冲区,即使实时落后几秒(这是正常的)。
我目前的解决方案是挂钩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
,但在这样做之前对你已缓冲的内容非常有信心。