HTML中多媒体资源切换的属性控制机制与性能开销-html教程-PHP中文网

video 的 source 的 media 属性无效，浏览器会下载所有 source；真正生效的是 picture 的 source 的 media；视频响应式需用 javascript + matchmedia 动态设置 src 并调用 load()。

html中多媒体资源切换的属性控制机制与性能开销

video 的 `source` 的 `media` 属性根本不管用

它不会阻止浏览器下载所有 <source></source>，也不会按屏幕尺寸切换视频源——Chrome、Firefox、Safari、Edge 全部忽略该属性的条件判断逻辑。你在 Network 面板里会看到所有请求都发出了，哪怕 media="(min-width: 1200px)" 明显不匹配当前视口。这不是写法错误，是规范未强制、厂商未实现的结果。W3C 允许它存在，但只定义为“提示”，不是控制行为的开关。

所以别把它当响应式方案用，尤其别指望靠它节省移动端带宽。

media 在 <video></video> 中纯属装饰性，实际加载行为由浏览器自主决定
必须写的其实是 type 属性：不写或写错（比如把 video/mp4 写成 video/mpeg），Safari 和 iOS 会直接跳过该 <source></source>，甚至黑屏无报错
如果用了多个 <source></source>，浏览器只选一个能解码的加载，但所有 src 都会发起请求（除非被缓存拦截）

`<picture></picture>` 的 `source` 的 `media` 才真正生效

只有在 <picture></picture> 上下文中，media 才是核心逻辑：浏览器按顺序检查每个 <source></source> 的 media 值，命中第一个匹配的就加载其 srcset 或 src，其余跳过。

必须配 <img> 作为 fallback，否则无图显示；media 值必须是合法 CSS 媒体查询：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

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", handler)，注意防抖

示例关键片段：

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();