使用媒体源扩展 API 开始播放高可变比特率视频的问题

Question

问题：是什么导致视频播放无限卡顿？

我正在使用 Safari。

我有一个比特率相当高的视频文件：

10596496 位/秒

我怀疑比特率在视频的整个持续时间（4 分 7 秒）内变化很大。

正在使用的 mime 类型编解码器字符串是：

"video/mp4; codecs=\"avc1.4d0028, mp4a.40.2\""

我的问题是，在文件中的某些区域寻找或启动流时，会导致 html5 视频播放器无限期停止。

我使用的服务器将文件作为实时流而不是范围字节请求提供。

注意：这意味着当在文件中寻找某个时间时，会启动一个新的实时流（我拆除旧的媒体源扩展对象及其源缓冲区）我创建一个新的媒体源对象，然后添加使用相同的 mime 类型编解码器字符串的新源缓冲区。基本上，搜索就像开始一个新的播放会话。

我已尝试确保在将最后一个视频文件块附加到源缓冲区后关闭媒体源。

我曾尝试清空视频播放器，然后在搜索时在每个新请求之前和之后重新加载它：

videoPlayer = document.getElementsByTagName('video')[0];
videoPlayer.src = '';
videoPlayer.load();
videoPlayer.src = URL.createObjectURL(myMediaSource);
videoPlayer.load();

我在原生 html5 视频播放器上添加了事件监听器来记录所有事件。

如果我任意寻找文件中已成功播放的点，我会看到以下控制台日志：

[Log] EMPTIED (bundle.js, line 7131)
[Log] PLAY (bundle.js, line 7131)
[Log] WAITING (bundle.js, line 7131)
[Log] LOADSTART (bundle.js, line 7131)
[Log] LOADEDMETADATA (bundle.js, line 7131)
[Log] LOADEDDATA (bundle.js, line 7131)
[Log] CANPLAY (bundle.js, line 7131)
[Log] PLAYING (bundle.js, line 7131)
[Log] CANPLAYTHROUGH (bundle.js, line 7131)
[Log] PROGRESS (bundle.js, line 7131)
[Log] PROGRESS (bundle.js, line 7131)
[Log] RESULT.DONE (bundle.js, line 75634)
[Log] PROGRESS (bundle.js, line 7131)
[Log] STALLED (bundle.js, line 7131)

如果我在文件中任意寻找未成功开始播放的点，我会看到以下控制台日志：

[Log] EMPTIED (bundle.js, line 7131)
[Log] PLAY (bundle.js, line 7131)
[Log] WAITING (bundle.js, line 7131)
[Log] LOADSTART (bundle.js, line 7131)
[Log] LOADEDMETADATA (bundle.js, line 7131)
[Log] PROGRESS (bundle.js, line 7131)
[Log] RESULT.DONE (bundle.js, line 75634)
[Log] PROGRESS (bundle.js, line 7131)
[Log] STALLED (bundle.js, line 7131)

我可以在网络选项卡中看到，在每次搜索时，向后端发出的获取请求确实接收到数据（最多 100 MB - 我将其限制在 100 MB，这样源缓冲区就不会运行记不清）。正如您从日志中看到的那样，html5 视频播放器确实可以识别正在接收数据，但在某些情况下，它认为它不足以开始播放。

此外，我可以看到视频播放器在发出进度事件后正在缓冲大部分视频，但它仍然卡住：

videoPlayer.buffered.end(0)
145.22842222222224

是什么导致视频播放无限期卡住？

Answer 1

我相信我已经找到了原因和可行的解决方法。

正如我在播放器无限期挂起而不开始播放的情况中提到的，videoPlayer.buffered.end(0) 调用将返回一些合理的值，例如 145.22842222222224。但是，在这些情况下，缓冲开始时间似乎始终设置为 0.08342222222222222。

所以我们有：

videoPlayer.buffered.start(0) // returns 0.08342222222222222
videoPlayer.buffered.end(0)   // returns 145.22842222222224
videoPlayer.currentTime // returns 0

这会诱使 safari 视频播放器认为它没有足够的数据来开始播放，因为视频播放器的当前时间不在缓冲的开始时间和缓冲的结束时间范围内。我可以通过将视频播放器的当前时间设置为该范围内的某个值来解决此问题，例如：

videoPlayer.currentTime = 0.9;
videoPlayer.play();

这实际上足以解决我的问题并允许开始播放视频。