视频预加载（preload）实现_video preload

如果网页中只有一个视频文件，您可能会使用 video 标签的 preload 属性来提示浏览器预加载的信息或内容量。但这意味着 Media Source Extensions（MSE）与 preload 将不兼容。

资源的获取将仅在HTML文档初始加载和解析完成后启动（例如， DOMContentLoaded 事件的触发），而 window.onload事件则完全不同，它在的资源都加载完成后才被触发。

将 preload 属性设置为 metadata 表示用户不想马上加载视频，但是需要预先获取其元数据（尺寸，轨道列表，时长等）。 请注意，从 Chrome 64 开始， preload 的默认值是 metadata（以前是 auto ）。
 

 <video id="video" preload="metadata" src="file.mp4" controls></video><script>  video.addEventListener('loadedmetadata', function() {    if (video.buffered.length === 0) return;    var bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);    console.log(bufferedSeconds + ' seconds of video are ready to play!');  });</script>
 

将 preload 属性设置为 auto 表示浏览器将缓存整个视频，无需暂停缓冲，可以支持完整播放。
 

<video id="video" preload="auto" src="file.mp4" controls></video><script>  video.addEventListener('loadedmetadata', function() {    if (video.buffered.length === 0) return;    var bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);    console.log(bufferedSeconds + ' seconds of video are ready to play!');  });</script>
 

由于 preload属性只是一个提示，浏览器可能会完全忽略 preload属性。写到这，请注意以下Chrome中的一些应用规则：

• 启用 Data Saver后 ，Chrome 会强制设置 preload 值为 none 。

• 在 Android 4.3中，由于 Android 的 bug，Chrome 会强制设置 preload 值为 none。

• 在蜂窝连接（2G，3G和4G）时，Chrome 会强制设置 preload 值为 metadata 。

提示

如果您的网站在同一个域中包含多个视频资源，我建议您将 preload 值设置为 metadata 或定义 poster 属性并将 preload 设置为 none 。 这样，可以避免在同一域名中 HTTP 连接数达到最大时导致资源加载挂起（根据 HTTP 1.1规范6）。 请注意，如果视频不属于您的核心用户体验，这样做也会提高网页加载速度。