在播放前减少html5视频缓冲区

Question

当有人点击我的网站上观看视频时（html5视频标签中的mp4） - 浏览器会在显示之前缓冲大量视频。这不是必需的 - 视频不到半分钟，并且在整个视频下载时只显示了一半。

有没有办法告诉浏览器不要缓冲这么多？

Answer 1

  

有没有办法告诉浏览器不要缓冲这么多？

缓冲过程最初由客户端 ^* 完全控制（请参阅下面有关如何以编程方式控制它的更新），我们只能使用preload提示我们需要什么属性。

使用preload = "auto"（或只是一个空白字符串）向浏览器表明视频可能会完全播放：

即使这样，客户端也可以在必要时覆盖它。 source

<强>更新

*） Media Source Extension （感谢@Tim McClure）做允许编程控制缓冲。支持各不相同 - source：

• Windows 8（MP4）上版本11的Internet Explorer。 （2013年10月）
• 谷歌Chrome自2013年初开始，也在Android（MP4，WEBM）上。
• OS X上的Safari 8（MP4，TS）。

可以在Firefox（标志：about：config）下启用它。

有关如何使用此功能的详细信息，请参阅此 longer four part series （来自Tim McClure的评论）。

<强> Specification details

Answer 2

关于是否可以这样做，评论中有很多讨论，所以我会在这里提供一个特定于媒体资源的答案。

Media Source Extensions 或MSE是一组新的（尚未广泛支持的）工具，可帮助您控制HTML5视频的缓冲和流式传输。来自W3C摘要：

  

此规范扩展了HTMLMediaElement，允许JavaScript生成用于回放的媒体流。允许JavaScript生成流有助于各种用例，如自适应流和时移实时流。

我会特别推荐您使用 SourceBuffer Object ，其中包含有关音频和音频的信息。处理视频轨道缓冲。

对MSE的支持因浏览器和格式（source）而异：

• Chrome for Desktop 34+（MP4，WEBM）
• Chrome for Android 34+（MP4，WEBM）
• Windows 8.1（MP4）上的IE 11+
• Windows Phone 8.1+（MP4）的IE
• 适用于Mac的Safari（MP4，TS）

用户可以在about：config（source）中打开对Firefox的支持。已经为some time提供了支持。

为了有效利用这一点，还需要实施更多内容，包括视频文件群集。我建议阅读这个4-part series，逐步介绍如何使用上面提到的所有内容创建功能齐全的HTML5视频播放器。

Answer 3

如果您的主要关注点是让视频更快地播放，您可以使用preload属性更快地开始缓冲。

<video controls preload="auto">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>