HTML5 视频缓冲，尽管等待 `canplaythrough` 事件到 `play()`

Posted 2023-03-04

【中文标题】HTML5 视频缓冲，尽管等待 `canplaythrough` 事件到 `play()`

【英文标题】：HTML5 video buffering despite waiting for `canplaythrough` event to `play()`

【发布时间】：2020-09-08 03:56:00

【问题描述】：

我试图确保（尽可能）html5 视频只有在它能够完全播放而无需缓冲时才开始播放。对于上下文，视频的 MediaStream 然后用于与另一个音频源混合并通过对等 WebRTC 连接发送。视频通常为 5-10MB，时长为几分钟（即良好的宽带连接应该可以在播放完成之前轻松加载整个视频）。

为了实现这一点，我的代码当前等待视频元素上的canplaythrough 事件开始并在它触发时调用play()。

从视频开始播放的意义上说，这种“有效”，在大多数情况下，缓冲足以让视频不间断地播放。但是，在少数情况下（特别是到目前为止，两个人都在 MacBook Airs 上运行 Chrome 并且显然不是令人难以置信但不错的宽带互联网连接）视频播放交错且断断续续——我认为这意味着视频缓冲不足。

是否有更好的技术可以确保视频在大多数浏览器上得到充分缓冲？

使用fetch() 缓冲内存中的整个视频可能会奏效吗？还是生成的blob() 实际上也在幕后懒惰地缓冲？

鉴于我无法真正在本地复制这些问题，是否有测试和调试此类问题的良好做法？

【参考方案1】：

我已经构建了一个名为Stream or Not 的工具，它可能对网络端有所帮助。它会告诉您视频需要多长时间才能开始播放、停顿了多少等。您可以使用浏览器的 devTools 来限制网络（在 Chrome 中，您可以模拟 CPU）。

老实说 - 看看是不是网络问题，只要比特率（使用 FFprobe https://www.streamclarity.com/probe?url=）低于网络速度，你就没有网络受限。

还有另一种可能。您的视频尺寸是多少？浏览器上视口的尺寸是多少？如果您要求设备减少大量像素 - 播放限制可能会从带宽转移到 CPU 处理速度。我在mobile devices 和尝试播放 4k 视频的旧 Mac 上看到过这种情况 - 只是没有足够的 CPU 来处理这么多像素。

为了确定，我会测试网络速度。 确保您发送的像素没有超出您的需要。功率不足的设备会出现问题。