Javascript 在播放前减少 html5 视频缓冲区
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29636740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make an html5 video buffer less before playing
提问by ispiro
When someone clicks to watch a video on my site (mp4 in an Html5 video tag) - the browser buffers a lot of it before showing it. This is not needed - the video is less than half a minute long, and has shown only half of it by the time the whole video has been downloaded.
当有人点击观看我网站上的视频（Html5 视频标签中的 mp4）时 - 浏览器在显示之前会缓冲很多。这不是必需的 - 视频长度不到半分钟，并且在下载整个视频时只显示了一半。
Is there a way to tell browsers not to buffer so much?
有没有办法告诉浏览器不要缓冲这么多？
采纳答案by Tim McClure
There's been a lot of discussion in the comments regarding whether this can be done, so I'll provide a Media Source-specific answer here.
关于这是否可以完成的评论中有很多讨论，因此我将在此处提供特定于媒体源的答案。
Media Source Extensions, or MSE, are a new (and not yet widely-supported) set of tools to help you control buffering and streaming with HTML5 videos. From the W3C abstract:
媒体源扩展或 MSE 是一组新的（尚未得到广泛支持的）工具，可帮助您使用 HTML5 视频控制缓冲和流式传输。来自 W3C 摘要：
This specification extends HTMLMediaElement to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.
该规范扩展了 HTMLMediaElement 以允许 JavaScript 生成用于播放的媒体流。允许 JavaScript 生成流有助于各种用例，如自适应流和时移实时流。
I'll specifically refer you to the SourceBuffer Object, which has information on how audio & video track buffering is handled.
我会特别向您介绍SourceBuffer Object，其中包含有关如何处理音频和视频轨道缓冲的信息。
Support for MSE varies by browser and format (source):
对 MSE 的支持因浏览器和格式（来源）而异：
- Chrome for Desktop 34+ (MP4, WEBM)
- Chrome for Android 34+ (MP4, WEBM)
- IE 11+ on Windows 8.1 (MP4)
- IE for Windows Phone 8.1+ (MP4)
- Safari for Mac (MP4, TS)
- Chrome 桌面版 34+（MP4、WEBM）
- 安卓版 Chrome 34+（MP4、WEBM）
- Windows 8.1 上的 IE 11+ (MP4)
- IE for Windows Phone 8.1+ (MP4)
- Mac 版 Safari（MP4、TS）
Support for Firefox can be turned on by the user in about:config (source). Support has been in the works for some time.
用户可以在 about:config ( source) 中打开对 Firefox 的支持。支持已经有一段时间了。
There is much more that needs to be implemented in order to make use of this effectively, including video file clustering. I would recommend reading this 4-part seriesthat goes step by step into how to create a fully functional HTML5 video player utilizing everything mentioned above.
为了有效地利用这一点，还需要实现更多功能，包括视频文件聚类。我建议您阅读这个由4 部分组成的系列，它逐步介绍如何利用上述所有内容创建功能齐全的 HTML5 视频播放器。
回答by ispiro
Is there a way to tell browsers not to buffer so much?
有没有办法告诉浏览器不要缓冲这么多？
The buffering process is initially controlled completely by the client * (see update below on how this can be controlled programatically) and we can only hint to it what we need using the preloadattribute.
缓冲过程最初完全由客户端控制*（请参阅下面关于如何以编程方式控制的更新），我们只能使用该preload属性向它提示我们需要什么。
Using preload = "auto"(or just a blank string) indicates to the browser that it is likely that the video will be played completely:
使用preload = "auto"（或只是一个空字符串）向浏览器表明视频可能会完全播放：
Even with this the client can override it if it finds it necessary. source
即使这样，客户端也可以在必要时覆盖它。 来源
Update
更新
*) There is up and coming Media Source Extension(thanks @Tim McClure) which doallow programmatic control of buffering. The support varies - source:
*) 即将推出的媒体源扩展（感谢@Tim McClure）确实允许对缓冲进行编程控制。支持各不相同 -来源：
- Internet Explorer from version 11 on Windows 8 (MP4). (2013 October)
- Google Chrome since early 2013, also on Android (MP4, WEBM).
- Safari 8 on OS X (MP4, TS).
- Windows 8 (MP4) 上版本 11 的 Internet Explorer。（2013 年 10 月）
- 谷歌浏览器自 2013 年初开始，也在 Android 上（MP4、WEBM）。
- OS X 上的 Safari 8（MP4、TS）。
It can be enabled in Firefox under flags (about:config).
它可以在 Firefox 中的标志 (about:config) 下启用。
For more details on how to use this, see this longer four part series(from Tim McClure in comments).
有关如何使用它的更多详细信息，请参阅这个更长的四部分系列（来自 Tim McClure 的评论）。
回答by mason
If your primary concern is getting the video to play sooner, you can start buffering sooner by using the preloadattribute.
如果您主要关心的是让视频更快地播放，您可以使用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>
