video 的 source 的 media 属性无效，浏览器会下载所有源；picture 的 source 的 media 才真正生效；视频响应式需 JS + matchMedia 动态切换 src 并调用 load()；type 属性比 media 更关键且必须正确书写。
video 中的 source 的 media 属性基本无效
它不会阻止浏览器下载资源，也不会按屏幕尺寸切换视频源——Chrome、Firefox、Safari、Edge 全部忽略该属性的条件判断逻辑。你在 Network 面板里会看到所有 <source></source> 的请求都发出了，哪怕 media="(min-width: 1200px)" 明显不匹配当前视口。这不是写法错误，是规范未强制、厂商未实现的结果。
W3C 允许它存在，但只定义为“提示”，不是控制行为的开关。所以别把它当响应式方案用，尤其别指望靠它节省移动端带宽。
picture 中的 source 的 media 才真正可用
只有在 <picture></picture> 上下文中，media 才是核心逻辑：浏览器按顺序检查每个 <source></source> 的 media 值，命中第一个匹配的就加载其 srcset 或 src，其余跳过。
必须配 <img alt="HTML source标签的media属性用法？视频资源响应式切换" > 作为 fallback，否则无图显示；media 值必须是合法 CSS 媒体查询，比如：
立即学习“前端免费学习笔记（深入）”；
-
media="(min-width: 768px)"✅ -
media="screen and (orientation: landscape)"✅ -
media="(prefers-color-scheme: dark)"✅ -
media="mobile"❌（非法语法，整个<source></source>被跳过） -
media="min-width: 768px"❌（缺括号，等价于not all）
视频响应式切换只能靠 JavaScript + matchMedia
想让不同屏幕加载不同分辨率的视频，必须手动控制 <video>.src</video> 并触发重载：
- 用
window.matchMedia("(min-width: 768px)").matches判断当前断点 - 设置
video.src = "hd.mp4"或替换<source></source>的src属性 -
必须调用
video.load()，否则不会发起新请求 - 建议在
DOMContentLoaded后执行，避免 race condition - 如需响应 resize，监听
mql.addEventListener("change", ...)，注意防抖
示例片段：
const video = document.querySelector('video');
const mql = window.matchMedia('(min-width: 768px)');
function setVideoSrc() {
video.src = mql.matches ? 'hd.mp4' : 'sd.mp4';
video.load();
}
setVideoSrc();
type 属性比 media 更关键，且必须写对
在 <video></video> 中，type 决定浏览器是否“考虑”这个 <source></source>；media 只是锦上添花（而且目前没花）。不写 type 或写错，会导致 Safari 直接跳过、iOS 拒绝自动播放、甚至黑屏无报错。
- MP4 必须写
type="video/mp4"，不能是video/mpeg - WebM 带 VP9 编码要写全：
type="video/webm; codecs="vp9"" - iOS Safari 强制要求首个
<source></source>是 H.264 MP4，否则静音或抛NotAllowedError - 多个
<source></source>按 DOM 顺序试，不是选“最优”，而是找“第一个能播的”
真正复杂的点在于：你得同时处理设备能力（type）、网络环境（JS 动态选源）、视口尺寸（matchMedia），三者不可互相替代。靠一个 media 属性就想搞定，只会漏掉其中一环。
