如何在连接延迟后保持 HTML5 实时视频流同步？
How to keep HTML5 live video stream in sync after connection lags?
我正在构建一个包含网络摄像头视频的小型网络应用程序。我通过 HTML5 代码进行流式传输：
<video muted id="video_0" src="SOURCEURL" type="video/ogg" autoplay="autoplay" width="100%" preload="none" controls/>
该视频使用 Netcam Studio 在我的电脑上托管，采用 WebM 格式。
对于网络应用，视频尽可能接近实时非常重要。我有点通过降低流媒体质量和 fps 来实现这一点。但是，流式传输几个小时后，它可能会比实时延迟最多 15 秒。
保持最新状态的最佳方法是什么？我想我可以每隔几分钟重新加载一次，但不确定是否有更好的方法。
我的大部分工作是在 AngularJS 中完成的，如果这会影响您的回答。
谢谢！
您可以定期检查buffered property of the HTML5 video element and compare it against the currentTime 属性。如果缓冲范围大于某个增量，只需将当前时间设置为缓冲范围末尾附近的某个值，以寻找更接近末尾的位置。至少这对我们提供实时 MP4 视频提要有所帮助。
Chrome 有一个 bug 我报告说在 MP4 的情况下当前时间没有正确更新，你应该检查你的 ogg 视频是否有同样的问题，然后这个解决方案不会帮助。
我正在构建一个包含网络摄像头视频的小型网络应用程序。我通过 HTML5 代码进行流式传输：
<video muted id="video_0" src="SOURCEURL" type="video/ogg" autoplay="autoplay" width="100%" preload="none" controls/>
该视频使用 Netcam Studio 在我的电脑上托管，采用 WebM 格式。
对于网络应用，视频尽可能接近实时非常重要。我有点通过降低流媒体质量和 fps 来实现这一点。但是，流式传输几个小时后，它可能会比实时延迟最多 15 秒。
保持最新状态的最佳方法是什么？我想我可以每隔几分钟重新加载一次，但不确定是否有更好的方法。
我的大部分工作是在 AngularJS 中完成的，如果这会影响您的回答。
谢谢！
您可以定期检查buffered property of the HTML5 video element and compare it against the currentTime 属性。如果缓冲范围大于某个增量，只需将当前时间设置为缓冲范围末尾附近的某个值，以寻找更接近末尾的位置。至少这对我们提供实时 MP4 视频提要有所帮助。
Chrome 有一个 bug 我报告说在 MP4 的情况下当前时间没有正确更新，你应该检查你的 ogg 视频是否有同样的问题，然后这个解决方案不会帮助。