播放前减少html5视频缓冲区

Question

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

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

Answer 1

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

<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>

Answer 2

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

缓冲过程最初由客户端^*完全控制（请参阅下面的更新，了解如何以编程方式进行控制），并且我们只能使用preload属性来提示它所需的内容。

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

即使这样，客户端也可以在认为必要时覆盖它。 资源

更新资料

*）现在有媒体源扩展（感谢@Tim McClure），它确实允许对缓冲进行编程控制。支持各不相同- 来源：

• Windows 8（MP4）上版本11的Internet Explorer。（2013年10月）
• 自2013年初以来，谷歌浏览器也支持Android（MP4，WEBM）。
• OS X（MP4，TS）上的Safari 8。

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

有关如何使用此功能的更多详细信息，请参阅这个较长的四部分系列（摘自Tim McClure的评论）。

规格明细

Answer 3

评论中关于是否可以做到这一点进行了很多讨论，因此我将在这里提供特定于媒体源的答案。

媒体源扩展(MSE) 是一组新的（尚未得到广泛支持）工具，可帮助您控制 HTML5 视频的缓冲和流式传输。来自 W3C 摘要：

该规范扩展了 HTMLMediaElement 以允许 JavaScript 生成用于播放的媒体流。允许 JavaScript 生成流有利于各种用例，例如自适应流和时移直播流。

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

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

• Chrome 桌面版 34+（MP4、WEBM）
• 适用于 Android 34+ 的 Chrome（MP4、WEBM）
• Windows 8.1 上的 IE 11+ (MP4)
• 适用于 Windows Phone 8.1+ 的 IE (MP4)
• Mac 版 Safari（MP4、TS）

用户可以在 about:config （来源）中打开对 Firefox 的支持。支持工作已经进行了一段时间。

为了有效地利用这一点，还需要实现更多的功能，包括视频文件集群。我建议您阅读这个由 4 部分组成的系列，该系列逐步介绍如何利用上述所有内容创建功能齐全的 HTML5 视频播放器。