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

【问题标题】：Make an html5 video buffer less before playing在播放之前减少 html5 视频缓冲区
【发布时间】：2015-04-14 20:23:30
【问题描述】：

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

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

【问题讨论】：

否，但您可以在他们点击之前开始缓存它以减少延迟。
你的意思是缓冲区而不是缓存？
@mason 哎呀。你是对的。现已更正。

【解决方案1】：

如果您最关心的是让视频更快地播放，您可以使用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>

【讨论】：

谢谢。
@mason 控制缓冲过程是一个巨大的积极因素，并且是您在构建 HTML5 视频播放器时可以控制的东西。例如，自适应流采用浏览器创建者想要的任何内容并将其扔出窗口 - 但是这允许您在视频再现、预缓冲某些文件等之间进行更改。
@TimMcClure 所以你是说有办法告诉浏览器缓冲多少？如果有，请分享。
@mason 您可以从了解Media Source Extensions 开始，特别是SourceBuffer Object，尽管这只是开始。我建议阅读this - 该系列有四个部分。
@TimMcClure 我没有做足够多的视频工作来让我花时间学习这些内容，以便我可以回答某人的问题。但是，如果您对此有所了解 - 请继续回答问题

【解决方案2】：

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

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

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

即使这样，如果客户认为有必要，它也可以覆盖它。 source

更新

*) 即将推出 Media Source Extension（感谢@Tim McClure）确实允许对缓冲进行编程控制。支持各不相同 - source:

Windows 8 (MP4) 上版本 11 的 Internet Explorer。（2013 年 10 月）
自 2013 年初以来的 Google Chrome，也支持 Android（MP4、WEBM）。
OS X（MP4、TS）上的 Safari 8。

它可以在 Firefox 中的 flags (about:config) 下启用。

有关如何使用它的更多详细信息，请参阅此 longer four part series（来自 cmets 的 Tim McClure）。

Specification details

【讨论】：

谢谢。但是在这种情况下preload = "auto" 有什么帮助呢？（或者这只是附加信息？）
@KenFyrstenberg 没错，MSE 规范仍处于草案阶段，但受 Chrome、Safari 和 IE11（仅限 MP4）支持。它可以在 Firefox 中启用。 Youtube 目前在浏览器支持时实现它。非常好的文章here（这是一个由 4 部分组成的系列）。我会说至少在可能的情况下实施是个好主意，因为您只会更好地控制用户体验。希望未来支持更加广泛。
@TimMcClure 是的，这是一个很好的解决方案。我至少会在答案中包含这个选项。谢谢！
@KenFyrstenberg this 是一个很好的参考。
@KenFyrstenberg heh 应该这样做。我已经提交了答案。

【解决方案3】：

在 cmets 中有很多关于是否可以做到这一点的讨论，所以我将在此处提供特定于媒体源的答案。

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 视频播放器。

【讨论】：

一句警告。 MediaSource 是一个糟糕的 API，它要求您使用附加到 mime 类型的字符串格式来指定使用的视频编解码器。很难找到提取这些媒体编解码器字符串的工具。我能找到的唯一一个产生与 MediaSource 使用的字符串格式相同的字符串格式仅适用于 mp4 视频。
更新了提到的 4part 系列的第 1 个链接 wirewax.com/blog/building-a-media-source-html5-player
我不敢相信 4 部分系列从 wirewax 开始，第二部分在 aws 上，然后进入 squarespace（要求注册或付款）。有人在某个地方有完整的 4 部分系列吗？
好的，对于未来的旅行者，我必须使用“下一篇文章”才能到达其他部分。如果您使用文章底部的链接，他们的链接会被破坏并且到处都是。
截至今天，所有 4 个帖子的链接：part 1、part 2、part 3、part 4