如何在連接滯後後保持HTML5實時視頻流同步？

Question

我正在構建一個包含IP攝像頭視頻的小型網絡應用程序。我通過HTML5代碼進行流式傳輸：

<video muted id="video_0" src="SOURCEURL" type="video/ogg" autoplay="autoplay" width="100%" preload="none" controls/> 

該視頻託管在我的電腦上，使用Netcam Studio並採用WebM格式。

對於網絡應用程序，重要的是視頻儘可能接近實時。我有點通過降低流媒體質量和fps來實現這一點。但是，流式傳輸幾小時後，它可能會比實時慢15秒。

保持最新狀態的最佳方法是什麼？我想我可以每隔幾分鐘重新加載一次，但不知道是否有更好的方法。

我的大部分工作都是在AngularJS中完成的，如果這會影響您的答案。

謝謝！

Answer 1

您可以定期檢查HTML5視頻元素的buffered屬性，並將其與currentTime屬性進行比較。如果緩衝範圍大於某個增量，只需將當前時間設置爲接近緩衝範圍末尾的某個值，以便更接近結束。至少這對我們來說是一個實時的MP4視頻源。

Chrome有一個bug，我報告了MP4的情況下當前時間未正確更新，您應該檢查您的ogg視頻是否遭受相同的影響，那麼此解決方案將無濟於事。