javascript - 不同html5视频之间的平滑过渡

Question

我有一个视频标签列表，我需要用预设的当前时间一一播放。当我加载页面时，视频的就绪状态卡在 1 并且视频出现启动故障。我已经使用了预加载属性，但视频仍然需要时间才能在每个交换机上开始播放。即使某些视频设置了 currentTime 且readyState = 4，播放视频也需要时间。我研究了 xhr createObjectURL blob 方法，但是下载所有视频需要很长时间。出于同样的原因，我没有尝试 MediaSource API。

Answer 1

媒体源扩展 (MSE) 不要求您在播放之前下载整个视频。

它允许您逐段请求视频片段，并在将它们设置为视频播放器的源之前以任何您想要的方式操作片段。

这里有一个很好的概述以及一些示例 javascript，我认为这有助于理解这里的方法:https://www.html5rocks.com/en/tutorials/eme/basics/

您可以在这里看到一个简单的工作示例:https://github.com/bitmovin/mse-demo/blob/master/index.html

一般方法是:

• 创建 MediaSource 对象
• 将 HTML 页面中视频元素的源设置为 MediaSource 对象
• 为正在打开的 MediaSource(播放视频时)添加监听器
• 获取第一个片段并添加监听器以请求下一个片段
• 收到片段后将其附加到 MediaSource 缓冲区
• 当没有更多航段需要请求停止时

就您而言，当您看完第一个视频时，您可以立即开始请求下一个视频。

twitch 的另一件事是 - mp4 视频通常在末尾有元数据，这意味着您需要下载整个视频才能开始。您可以使用特殊工具将元数据移至开头，或者如果您自己进行转码，则只需确保将其放在第一位即可。例如，ffmpeg 支持使用命令行选项“-movflags faststart”移动数据。