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

Question

我有一个视频标签列表，我需要与预设currentTime一个一个播放。当我加载页面时，视频的readyState卡住了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的缓冲器
• 当没有更多的片段要求停止

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

对于mp4视频而言，另外一件事情通常会在最后显示其元数据，这意味着您需要下载整个视频才能开始。您可以使用特殊工具将元数据移动到开始位置，或者如果您自己进行转码，只需确保将它放在首位即可。例如，ffmpeg支持使用命令行选项“-movflags faststart”移动数据。