preload属性用于控制视频预加载行为，其值为auto时自动预加载全部内容，metadata仅加载元数据，none不预加载；推荐核心视频用auto、列表页用metadata、移动端用none，并可结合JavaScript实现懒加载，以平衡体验与资源消耗。
在HTML中，
preload
属性用于控制视频文件的预加载行为，合理设置可以提升页面性能和用户体验。通过调整
preload
的值，你可以决定视频在页面加载时是否以及如何下载数据。
preload 属性的可选值
该属性适用于
标签，支持以下三个主要取值：
auto
：
浏览器
自动决定是否预加载整个视频文件。在网络条件允许时通常会加载全部数据。
metadata
：只预加载视频的元数据（如时长、尺寸、封面图等），不加载实际播放内容。这是多数移动设备的默认行为。
none
：不进行任何预加载，用户点击播放前不会下载视频数据，节省带宽。
如何设置 preload 属性
在HTML标签中直接添加即可：
上面的例子设置了只加载元数据，适合移动端或带宽敏感场景。
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
不同场景下的推荐设置
根据使用环境选择合适的策略能有效平衡体验与资源消耗：
如果视频是页面核心内容（如教程、主视觉），建议设为
auto
，提前加载保障流畅播放。
对于有多个视频的列表页或非立即观看的内容，推荐
metadata
，获取基本信息的同时减少初始流量。
在移动端或弱网环境下，使用
none
可避免不必要的数据消耗，由用户主动触发加载。
配合 JavaScript 动态控制
你还可以通过脚本动态修改预加载行为：
比如在用户滚动到视频区域时再更改 preload 值，实现懒加载效果。
基本上就这些。合理使用 preload 能显著优化资源加载节奏，关键是根据内容重要性和用户场景做权衡。
const video = document.querySelector('video');
video.preload = 'auto'; // 或 'metadata'、'none'