HTML5 播放下一个视频，没有延迟

HTML5 Play next video without delay

本文关键字：延迟 视频 播放 下一个 HTML5      更新时间：2023-09-26

所以我正在尝试在不使用 MediaSource 扩展的情况下分段流式传输视频。（因为并非所有浏览器都支持 MSE）。现在我正在尝试通过加载两个视频元素并在适当的时候播放下一个来做到这一点。但这在切换之间有一个非常小的延迟。我试图继续检查视频的当前时间，并在一小部分播放下一个视频元素后。但这并不那么好（音频重叠或延迟）

请注意，视频是从 Blob 存储预加载和加载的。因此，加载不应延迟播放。

如何在不使用 MediaSource 扩展的情况下使这个（或其他没有闪存的解决方案）流畅播放？

最好的办法是使用两个视频元素，一个放在另一个之上。第一个应该是播放视频的当前部分（或块）。第二个视频元素应加载包含下一个区块的 blob 并暂停。它也应该是隐藏的（您可以设置display:'none'或z-index:-99999）。然后，当第一个视频元素结束时（调度end事件），调用第二个视频元素的 play() 方法，显示它，并隐藏第一个视频元素。冲洗并重复。

这就是LifemirrorPlayer所做的。

如果流的块被完美编码和剪切，那么这种技术就有效。通常不会。常见问题包括：

  • 同步音频流可能是最困难的。播放二三十个块后，音频通常会失去与视频的同步。这对观众来说非常烦人，很难检测和修复（我实际上不知道任何解决方案）。

  • 视频元素不会结束。这通常是由编码器将过多（或太少）的内容放入块中引起的。它也可能是由不正确的块切割、错误的编码器或解码器引起的。

  • 交换两个视频元素时闪烁。这取决于浏览器。但是，大多数浏览器都可以很好地处理此问题，并且交换快速流畅。

相关文章：