media属性在或的中没用，几乎所有主流浏览器均忽略；它仅对中的生效，html标准明确如此规定。
media属性在中到底有没有用？
没用。几乎所有主流浏览器（Chrome、Firefox、Safari、Edge）都忽略 <source></source> 的 media 属性，无论它写的是 media="(min-width: 768px)" 还是 media="screen and (orientation: landscape)"。这不是 bug，是规范事实——HTML 标准明确说明：该属性仅对 <picture></picture> 中的 <source></source> 生效，对 <video></video> 或 <audio></audio> 内的 <source></source> 无任何影响。
为什么有人误以为它能切换音视频格式？
常见错觉来源有三个：
- 把
<picture></picture>的响应式逻辑套用到<video></video>上，但二者语义和实现完全不同 - 本地开发时用
file://协议测试，此时 type 匹配失效、浏览器行为混乱，容易误判media“起了作用” - 看到多个
<source></source>并列，主观认为“既然写了 media，那肯定按条件选”，其实浏览器只按顺序找第一个type匹配且可解码的项
真正起作用的匹配机制是什么？
浏览器对 <video></video> / <audio></audio> 中的 <source></source> 只做三件事：
- 依次检查每个
<source></source>的type属性是否被自身支持（如type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""） - 发起 HTTP 请求，确认返回状态码为 200 且
Content-Type响应头与type属性逐字符一致 - 尝试解码首个分片，只有实际帧可解码才算“可用”——Network 面板看到请求成功 ≠ 播得通
一旦某项失败（比如 iOS Safari 遇到首个 <source></source> 是 WebM），后续所有 <source></source> 都不会加载，直接报 NotAllowedError 或静音。
想实现设备适配，该怎么做？
不能靠 media，但有可行路径：
- 服务端根据
User-Agent或Accept请求头返回不同 HTML 片段（例如给 iOS 返回 MP4 在前的版本） - 前端 JS 检测
MediaSource.isTypeSupported()或尝试创建video元素调用canPlayType()，再动态插入对应<source></source> - 对关键场景（如 iOS 自动播放）强制首项为 H.264 MP4，其余格式作为 fallback 放后面——这是唯一稳定跨平台的做法
真正容易被忽略的点是：type 属性里的 codecs 字符串必须和 ffprobe 输出完全一致，空格、逗号、引号位置错一个，iOS 就静音；而 media 属性写得再精准，也进不了浏览器的匹配流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
