preload="metadata"最常用，因只请求mp4文件开头的moov box（通常几kb），获取时长、宽高、封面帧等元数据，不下载音视频帧；需服务端返回accept-ranges: bytes且视频经faststart优化，搭配poster和loadedmetadata事件使用。
preload="metadata" 是 HTML5 <video></video> 标签的一个属性值，用于告诉浏览器：**只加载视频的元数据（如时长、宽高、编码格式等），不加载实际的音视频帧数据**。这对提升页面响应速度、节省带宽、避免自动播放干扰非常有用。
什么时候该用 metadata
适合以下场景：
- 页面需要显示视频缩略图、时长或尺寸，但暂不播放
- 用户需手动点击才开始加载和播放（比如列表页的视频卡片）
- 移动端优先，避免默认预加载大量数据影响首屏性能
- 配合 JavaScript 动态控制加载时机（例如 hover 后再 preload="auto"）
怎么写才生效
直接在 <video></video> 标签中设置 preload="metadata" 即可。注意：它只是提示，不是强制指令，浏览器可能根据网络状况、策略或用户设置忽略它（比如 Chrome 在移动网络下可能降级为 none）。
基础写法示例：
如何验证是否只加载了元数据
打开浏览器开发者工具（F12），切换到 Network 面板，刷新页面并观察：
- 视频资源请求状态码应为
206 Partial Content（说明只拉了文件头部分） - 传输大小通常很小（几 KB），远小于完整视频体积
- 检查响应头中的
Content-Range（如bytes 0-1999/12345678），确认只取了开头片段 - 播放器控件能显示时长、尺寸，但点击播放后才会触发后续分片加载
配合 JS 获取元数据信息
元数据加载完成后会触发 loadedmetadata 事件，此时可安全读取尺寸、时长等：
<script><br> const v = document.getElementById('myVideo');<br> v.addEventListener('loadedmetadata', () => {<br> console.log('宽度:', v.videoWidth);<br> console.log('高度:', v.videoHeight);<br> console.log('时长:', v.duration.toFixed(2) + ' 秒');<br> });<br> </script>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
