如果网页中只有一个视频文件，您可能会使用 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 。文章来源：https://www.toymoban.com/news/detail-768312.html
提示
如果您的网站在同一个域中包含多个视频资源，我建议您将 preload 值设置为 metadata 或定义 poster 属性并将 preload 设置为 none 。 这样，可以避免在同一域名中 HTTP 连接数达到最大时导致资源加载挂起（根据 HTTP 1.1规范6）。 请注意，如果视频不属于您的核心用户体验，这样做也会提高网页加载速度。文章来源地址https://www.toymoban.com/news/detail-768312.html
到了这里，关于视频预加载（preload）实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
