HTML DOM Source media 属性（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

HTML DOM Source media 属性详解：动态适配媒体资源的实用指南

前言：从静态到动态的媒体适配进化

在网页开发中，媒体资源（如视频、音频）的适配一直是个重要课题。传统的做法是为不同设备准备多个资源文件，再通过服务器端逻辑或复杂的 JavaScript 脚本进行判断。而 HTML DOM 中的 <source> 元素 media 属性，提供了一种更简洁优雅的解决方案。它允许开发者通过 CSS 媒体查询语法，直接在 HTML 层面定义资源加载的条件逻辑，让浏览器自动完成适配判断。本文将深入解析这一属性的原理、用法及最佳实践，帮助开发者高效实现跨设备资源管理。

一、基础概念：什么是 Source media 属性？

1.1 核心功能与作用场景

<source> 标签是 HTML5 引入的元素，主要用于为 <video> 或 <audio> 元素提供多源资源支持。而 media 属性则是 <source> 的扩展功能，其核心作用是：根据设备环境特征（如屏幕宽度、分辨率、方向等），动态选择加载哪个媒体源文件。

举个形象的比喻：想象你有一条高速公路，路上有多个岔路口，每个岔路口都有不同的通行条件（比如“仅限货车通行”或“限高3米”）。media 属性就像这些条件标识，浏览器会根据当前设备的“特征参数”（如屏幕宽度），自动选择符合的路径（即对应的 <source> 资源）。

1.2 语法结构与参数

media 属性的语法基于 CSS 媒体查询语法，基本格式为：

<source src="video_1080p.mp4" type="video/mp4" media="(min-width: 1024px)">  

关键点解析：

• src：指向具体的媒体资源路径。
• type：定义资源的 MIME 类型（可选但推荐）。
• media：媒体查询条件，括号内为 CSS 媒体特性表达式。

1.3 工作原理简述

当浏览器解析 <video> 或 <audio> 元素时，会按以下顺序执行：

1. 依次检查每个 <source> 标签的 media 属性条件；
2. 第一个符合条件的 <source> 将被选中加载；
3. 若所有 <source> 的条件均不满足，则尝试加载 <video> 或 <audio> 的 src 属性指定的默认资源。

二、语法与用法：从简单到复杂场景

2.1 基础案例：根据屏幕宽度适配视频分辨率

假设我们要为不同屏幕尺寸的设备提供不同分辨率的视频：

<video controls>  
  <!-- 高清版本，适用于桌面设备 -->  
  <source src="video_1080p.mp4" type="video/mp4" media="(min-width: 1024px)">  
  <!-- 标清版本，适用于移动端 -->  
  <source src="video_480p.mp4" type="video/mp4" media="(max-width: 1023px)">  
  <!-- 备用方案：若无现代浏览器则显示提示 -->  
  Your browser does not support the video tag.  
</video>  

关键点说明：

• min-width: 1024px 表示“当屏幕宽度≥1024像素时加载高清版”；
• max-width: 1023px 表示“当屏幕宽度≤1023像素时加载标清版”；
• 浏览器会从上到下匹配第一个符合条件的 <source>。

2.2 进阶用法：组合多个媒体条件

通过 CSS 媒体查询的逻辑运算符（and、not、only），可实现更复杂的条件判断。例如，为横屏手机和竖屏手机提供不同资源：

<source src="video_landscape.mp4" media="(orientation: landscape)">  
<source src="video_portrait.mp4" media="(orientation: portrait)">  

延伸场景：

• 根据设备像素比（device-pixel-ratio）加载高清或标准画质；
• 结合颜色深度（color）、触控支持（pointer) 等属性适配资源。

2.3 与 type 属性的协同使用

<source> 的 type 属性用于指定媒体格式（如 video/mp4 或 audio/ogg），可帮助浏览器快速判断是否支持该资源。当 type 与 media 同时存在时，浏览器会优先判断 type 是否匹配，再执行 media 条件。例如：

<source src="video_webm.webm" type="video/webm" media="(max-width: 768px)">  
<source src="video_mp4.mp4" type="video/mp4" media="(min-width: 769px)">  

此案例中，浏览器会先检查是否支持 WebM 或 MP4 格式，再根据屏幕宽度选择资源。

三、实战案例：动态适配的完整实现

3.1 场景描述

假设我们要为一个视频播放页面设计以下适配策略：

• 屏幕宽度≥1200px → 加载 4K 分辨率视频（video_4k.mp4）；
• 1024px ≤ 宽度 <1200px → 加载 1080p 视频（video_1080p.mp4）；
• 屏幕宽度<1024px → 加载 720p 视频（video_720p.mp4）；
• 若浏览器不支持 HTML5 视频 → 显示 Flash 播放器链接。

3.2 完整 HTML 代码

<video controls width="100%">  
  <!-- 4K 高清版本 -->  
  <source src="video_4k.mp4" type="video/mp4" media="(min-width: 1200px)">  
  <!-- 1080p 标准版 -->  
  <source src="video_1080p.mp4" type="video/mp4" media="(min-width: 1024px)">  
  <!-- 720p 移动端版 -->  
  <source src="video_720p.mp4" type="video/mp4" media="(max-width: 1023px)">  
  <!-- 降级方案：Flash 播放器链接 -->  
  <a href="flash_player.swf">Install Flash Player</a>  
</video>  

运行效果：

• 当用户访问页面时，浏览器会自动检测屏幕宽度；
• 若宽度≥1200px，加载 4K 视频；
• 若宽度在 1024px-1199px 之间，加载 1080p 视频；
• 若宽度<1024px，加载 720p 视频；
• 若浏览器不支持 HTML5，则显示 Flash 链接。

四、进阶技巧与注意事项

4.1 动态修改 media 属性（JavaScript 操作）

通过 JavaScript 可以动态修改 <source> 的 media 属性，实现条件逻辑的实时更新。例如：

// 获取所有 source 元素  
const sources = document.querySelectorAll('video source');  

// 根据用户选择切换媒体条件  
document.querySelector('#resolution-select').addEventListener('change', (e) => {  
  const selected = e.target.value;  
  sources.forEach(source => {  
    if (source.src.includes(selected)) {  
      source.media = "(min-width: 0px)"; // 强制匹配  
    } else {  
      source.media = "none"; // 禁用其他选项  
    }  
  });  
});  

此案例中，用户通过下拉菜单选择分辨率时，JavaScript 会动态调整 <source> 的 media 属性，强制匹配对应的资源。

4.2 媒体查询的优先级规则

当多个 <source> 的 media 条件同时满足时，浏览器会选择第一个符合条件的 <source>。因此，开发者需要确保条件顺序的合理性。例如：

<!-- 错误顺序：高优先级条件应排在前面 -->  
<source media="(min-width: 1200px)" src="video_4k.mp4">  
<source media="(min-width: 1024px)" src="video_1080p.mp4">  

<!-- 正确顺序 -->  
<source media="(min-width: 1024px)" src="video_1080p.mp4">  
<source media="(min-width: 1200px)" src="video_4k.mp4">  

在错误案例中，当屏幕宽度为1300px时，第二个 <source> 的条件会被优先匹配，导致 1080p 版本被加载。

4.3 性能优化建议

• 资源预加载：可通过 <link rel="preload"> 提前加载高频使用的资源；
• 懒加载：结合 loading="lazy" 属性延迟加载非首屏资源；
• CDN 加速：对不同分辨率的资源部署到不同 CDN 节点，提升加载速度。

五、常见问题与解决方案

Q1: 浏览器兼容性如何？

media 属性在现代浏览器中得到广泛支持（包括 Chrome 4+, Firefox 6+, Safari 5.1+）。对于旧版浏览器，可通过 <video> 的 src 属性提供回退方案。

Q2: 如何调试 media 条件是否生效？

可通过以下方法验证：

1. 在浏览器开发者工具中，检查 <source> 标签的 media 属性是否被正确渲染；
2. 使用媒体查询模拟器（如 Chrome 的 Device Toolbar）测试不同条件下的资源加载行为。

Q3: 是否支持动态媒体特性（如网络速度）？

目前 CSS 媒体查询尚未支持直接检测网络速度，但可通过 JavaScript 监听 navigator.connection API 实现间接判断，再结合动态修改 media 属性的方式实现适配。

结论：掌握媒体适配的高效工具

通过本文的讲解，开发者可以系统理解 <source media> 属性的核心原理、语法细节及实战应用。这一特性不仅简化了媒体资源的适配逻辑，还显著降低了代码复杂度。在实际开发中，建议结合以下策略：

1. 分层适配：按分辨率、屏幕尺寸、设备类型等维度划分资源层级；
2. 渐进增强：为低性能设备提供轻量级资源，为高性能设备提供高清内容；
3. 自动化测试：通过自动化测试工具验证不同条件下的资源加载行为。

掌握 HTML DOM Source media 属性，不仅能提升代码的可维护性，更能为用户提供更流畅、更个性化的媒体体验。