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

Question

我有一个视频标签列表，我需要使用预设的currentTime逐个播放。当我加载页面时，视频的readyState卡在1，视频会出现启动故障。我已经使用了preload属性，视频需要时间才能开始在每个开关上播放。即使某些视频的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缓冲区
• 当没有更多要求的段时停止

在您的情况下，当您到达第一个视频结束时，您可以立即开始请求下一个视频。

另一件事是抽搐 - mp4视频通常在最后有他们的元数据，这意味着你需要下载整个视频才能开始。您可以使用特殊工具将元数据移动到开头，或者如果您自己进行转码，只需确保将其放在首位。例如，ffmpeg支持使用命令行选项'-movflags faststart'移动数据。