javascript - 即使附加了足够多的内容，视频也无法播放

Question

我有一个设置，我使用 websockets 协议发送一个 10 分钟长的视频（大象梦），每个 4 秒的短片段。
我使用浏览器作为客户端，使用Websocket API接收内容，使用 HTML5 视频标签作为播放器，我使用Media Source Extensions将块添加到视频中。

问题是某处似乎存在限制（最大接收缓冲区大小、最大媒体源源缓冲区大小、视频元素上的最大缓冲内容等），因此视频无法正确播放到最后，但即使有足够的数据。

所有片段都正确到达并及时附加。同时，视频从头开始播放。
您可以看到播放器上显示缓冲视频的灰线会增长，直到某个时间点停止增长并且视频在到达此位置时停止播放。
但是，完整的视频已附加到 mediasource 元素，关于输出消息，也可以通过手动跳转到将来或过去的另一个位置来测试。看起来总是只有一小部分内容“加载”。

由于我在 localhost 上对其进行测试，吞吐量非常高，所以我尝试将其降低到更常见的值（仍然优于视频比特率），以查看我是否使客户端超载，但这并没有改变任何东西。

还尝试了不同的段大小，结果完全相同，只是它停止的时间点不同。

关于这个限制可能在哪里或可能发生什么的任何想法？

Answer 1

我认为您在缓冲数据中存在差距。浏览器的缓冲区大小是有限的，您可以将其追加到该缓冲区。当达到该限制时，如果您附加额外的数据，浏览器将通过从缓冲区中丢弃一些不需要的帧来静默释放一些空间。根据我的经验，如果你发生得太快，你最终可能会在缓冲区中出现空白。您应该在追加时监视buffered属性的状态，以查看是否有任何差距。

Answer 2

您是否在它停止之前更改表示？更改表示时，需要先为新表示附加初始段，然后再附加新表示的下一个段。