标签不生效通常因mime类型或编码格式不匹配，浏览器按顺序尝试首个可解码的即停止；需显式声明type属性，media仅影响初始匹配而非动态切换，且不支持播放中分辨率切换。
为什么 <source></source> 标签不生效？
直接写多个 <source></source> 标签但浏览器只加载第一个，通常不是 bug，而是 MIME 类型或编码格式不匹配导致后续选项被跳过。浏览器按顺序尝试 <source></source>，遇到第一个能解码的就停止，不会“择优选择”分辨率。
- 必须为每个
<source></source>显式声明type属性（如type="video/mp4"），仅靠media或src后缀无法判断 - 所有视频文件需实际支持对应容器和编码（例如 H.264 + MP4、AV1 + WebM），否则即使
type写对，也会静默失败 -
media属性只影响是否参与初始匹配（如media="(min-width: 768px)"），不控制播放时动态切换
如何用 <source></source> 实现分辨率分级？
HTML 原生 <source></source> 不支持播放中切换分辨率——它只在视频首次加载时做一次选择。真正起作用的是 src 指向的单个文件的内在属性（如 MP4 的多轨道）或 JS 驱动的自适应逻辑。
- 若目标是「不同设备加载不同分辨率」，用
media+src组合即可：<video><source src="vid-480.mp4" type="video/mp4" media="(max-width: 767px)"><source src="vid-1080.mp4" type="video/mp4" media="(min-width: 768px)"></source></source></video>
- 若想让同一视频文件内含多分辨率（如 DASH/HLS），
<source></source>无法胜任，必须用<video></video>+ JS 播放器（如 hls.js、dash.js）加载 .m3u8 或 .mpd 清单 - 不要给多个
<source></source>设置相同media和type，否则行为未定义，多数浏览器取第一个
width 和 height 属性对 <source></source> 无效
<source></source> 标签本身没有 width、height、autoplay 等视觉或行为属性——这些只能写在父级 <video></video> 上。试图在 <source></source> 上设置会完全被忽略。
- 分辨率信息来自视频文件内部元数据，不是 HTML 属性；
<video></video>的width/height只控制显示尺寸，不影响加载哪个源 - 想让小屏设备强制加载低清版，唯一可靠方式是服务端根据 User-Agent 切换，或前端用 JS 检测
window.innerWidth后动态设置<video>.src</video> - 验证是否生效：打开 DevTools → Network 标签页，播放视频，观察实际加载的
src地址是否符合预期
移动端 Safari 对 <source></source> 的特殊限制
iOS Safari 在某些版本（尤其是 iOS 15–16）中会忽略 media 查询中的 min-resolution 或 device-pixel-ratio，只认 width/height 媒体查询，且对响应式 <source></source> 切换容忍度低。
- 避免使用
media="(min-resolution: 2dppx)"，改用media="(min-width: 768px) and (orientation: landscape)"这类明确尺寸+方向组合 - 确保所有
<source></source>的type值被 Safari 支持（例如不推荐 WebM/AV1，优先用 MP4/H.264） - 如果用户旋转设备后分辨率没切换，说明浏览器已缓存首个匹配项，无法回退——这是规范行为，不是 bug
<source></source> 分辨率控制只适合静态场景（如 PC 端固定宽高、移动端统一降级）。真要动态适配带宽和屏幕，得上 MSE 或第三方流媒体方案。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
