HTML中source多媒体兼容 HTML中source标签media属性配置-html教程-PHP中文网

source media属性在video/audio的source标签中基本不可用，仅在picture中稳定支持；响应式音视频需用javascript结合matchmedia动态控制src并调用load()。

html中source多媒体兼容 html中source标签media属性配置

source media 属性在实际浏览器中基本不可用

绝大多数主流浏览器（Chrome、Firefox、Safari、Edge）当前都不支持 media 属性在 <source></source> 标签中用于音视频资源的条件加载。它只在 <picture></picture> 场景下被广泛实现，且仅限于图片资源切换。

常见错误现象包括：写好 <source src="video.mp4" type="video/mp4" media="(min-width:768px)"></source> 后，视频仍无条件加载，或直接 fallback 到下一个 <source></source>，完全无视媒体查询逻辑。

media 在 <video></video> / <audio></audio> 内部的 <source></source> 中属于“被忽略但不报错”的状态 —— 浏览器解析它，但不执行条件判断
规范虽允许该属性，但实现严重滞后；W3C 未将其列为强制支持项，各厂商也未将其列入优先开发列表
若你依赖它做响应式视频分发（比如小屏用低码率 MP4，大屏用高码率 WebM），这条路目前走不通

picture + source media 是唯一稳定可用的组合

<picture></picture> 是 media 属性真正起效的唯一上下文。它的行为明确：按顺序遍历 <source></source>，对每个 media 值执行 CSS 媒体查询匹配，命中第一个就停止，并加载其 srcset 或 src 指向的图片。

示例中这个结构是可靠的：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<picture><source media="(min-width: 1200px)" srcset="hero-1920.jpg"><source media="(min-width: 768px)" srcset="hero-1024.jpg">
  @@##@@
</source></source></picture>

必须配合 <img src="hero-480.jpg" alt="Hero"> 作为 fallback，否则无图可显示
media 值必须是合法 CSS 媒体查询，如 "(max-height: 600px)"、"screen and (orientation: landscape)" 都可以
多个值用逗号分隔等价于 OR，例如 media="(min-width: 768px), (min-height: 800px)"
注意：IE 完全不支持 <picture></picture>，需用 picturefill polyfill 或降级方案

video/audio 的响应式替代方案只有 JavaScript 控制

想让不同设备加载不同视频源，不能靠 media 属性，得手动干预。核心思路是：监听 resize 或 load，读取 window.matchMedia()，再动态设置 <video>.src</video> 或替换 <source></source> 的 src 属性。

关键点：

用 window.matchMedia("(min-width: 768px)").matches 获取当前是否匹配，比解析 media 字符串更可靠
修改 <video></video> 的 src 后必须调用 .load() 才会重新加载资源
避免在 resize 中高频触发 —— 加个防抖，比如 250ms 内只执行最后一次
移动端要注意：device-width 查询在 Safari iOS 上可能返回视觉视口宽度而非物理设备宽度，优先用 width 或 min-width

media 属性值写法容易踩的坑

media 值不是自由字符串，必须符合 CSS 媒体查询语法，否则会被静默忽略（尤其在 <picture></picture> 中）。

漏写 screen and：写成 media="(min-width: 768px)" 是合法的，但 media="min-width: 768px"（缺括号和单位）会失效
空格敏感：media="(min-width : 768px)"（冒号后多空格）在部分旧版 Safari 中不识别
不要混用设备关键字和媒体特性：比如 media="handheld and (min-width: 480px)" —— handheld 已被现代浏览器弃用，且与 min-width 组合无意义
not 运算符必须加括号包裹整个查询，如 media="not all and (color)"，单独写 not (color) 无效