如何让 HTML 视频背景立即播放？答案

【问题标题】：How can I make a HTML Video Background to play instantly?如何让 HTML 视频背景立即播放？
【发布时间】：2018-07-23 19:09:17
【问题描述】：

目前我的项目有问题。我有一个想要在后台播放的全高清视频。视频采用 h264 编码。问题是，视频很长，所以它有 90MB。但即使使用 200MBit 连接，我也必须等待大约 5 秒才能开始播放视频。

我能做些什么来防止这种情况发生？

我使用这个代码：

<video autoplay muted loop id="myVideo">
  <source src="video.mp4" type="video/mp4">
</video>

我希望获得与 Netflix 一样的性能。简单的点击后，视频就开始了。

这怎么可能？

【问题讨论】：

“简单点击后”可能也是某种延迟。
看起来pseudo-streaming 就是你要找的东西
您是否考虑过将“moov atom”放在 MP4 文件的开头...换句话说，“网络优化”视频文件。我听说这可以减少视频准备播放之前的延迟。 adobe.com/devnet/video/articles/mp4_movie_atom.html
从技术上讲，即使是 Netflix 也在开始加载视频。我相信他们这样做类似于 Youtube，他们将根据一个人的互联网速度显示较低/较高质量的视频。或许尝试加载一个 youtube 视频作为背景的测试，看看是否可以获得相同的效果？
您没有提到该视频的服务内容（如 nginx、apache 等）。

【解决方案1】：

您可以做一些事情来提供帮助：

1/ 优化视频以实现快速启动。 MP4 文件中的MOOV 原子通常位于末尾，这意味着它必须在开始播放之前到达该位置。使用ffmpeg，您可以将其移到前面：

ffmpeg -i source.mp4 -a:v copy -a:c copy -movflags faststart output.mp4

（这将复制视频和音频而不做任何更改，只需更改包）

2/ 您可以将preload 属性添加到视频源，以允许浏览器根据自己的规则进行优化，预加载将执行的操作

<video preload="auto" muted loop....>

这会有所帮助，但仍然不能让您“立即”开始。

3/ 根据您可能希望在页面加载时将视频预加载到 blob 中的大小，以便在视频完全缓冲并准备就绪时显示“播放”按钮。请参阅this answer 获取解决方案（而不是在此处重新输入）

4/ 大多数浏览器都支持自适应流式传输（HLS 或 MPEG-DASH），因此您可以创建分段的 mp4 文件，这将允许“即时”以低比特率/质量启动，随着浏览器/视频播放器的增加（例如jwPlayer) 检测并适应网络状况

【讨论】：