HTML DOM Source 对象（手把手讲解）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 对象 来实现对 <source> 标签的精细控制。这一对象不仅是连接 HTML 结构与 JavaScript 功能的桥梁，更是优化媒体资源兼容性和用户体验的核心工具。本文将从基础概念出发，结合实际案例，深入讲解 HTML DOM Source 对象 的原理、属性与方法，并通过代码示例帮助读者掌握其应用场景。

Source 对象的基本概念

什么是 Source 对象？

HTML DOM Source 对象 是 DOM（文档对象模型）中用于操作 <source> 标签的接口。每个 <source> 标签在页面加载时都会生成一个对应的 Source 对象，开发者可以通过 JavaScript 直接访问和修改这些对象的属性或行为。

Source 对象的作用

• 多格式支持：允许同一媒体元素（如 <video> 或 <audio>）加载不同格式的资源（如 MP4、WebM、OGG），确保兼容不同浏览器。
• 动态控制：通过 JavaScript 实时修改媒体源的路径、类型或优先级，实现按需加载或响应式媒体选择。
• 错误处理：监听媒体加载失败事件，提供备用资源或用户提示。

比喻：可以将 Source 对象想象为餐厅菜单中的“菜品选项”——每个 <source> 标签代表一个菜品（媒体资源），而 Source 对象则是服务员，根据用户需求（浏览器支持或网络条件）动态推荐或替换菜品。

核心属性详解

Source 对象的核心属性直接映射到 <source> 标签的 HTML 属性，开发者可以通过这些属性实现对媒体资源的精细控制。

属性列表及说明

实例：获取和修改 Source 对象属性

代码示例

<video id="myVideo" controls>  
  <source id="source1" src="video-low.mp4" type="video/mp4" media="(max-width: 768px)">  
  <source id="source2" src="video-high.mp4" type="video/webm" media="(min-width: 769px)">  
</video>  

<script>  
  // 获取第一个 source 对象  
  const sourceElement = document.getElementById("source1");  
  // 输出当前 src 属性  
  console.log("Original src:", sourceElement.src);  
  // 修改 src 属性为动态路径  
  sourceElement.src = "video-updated.mp4";  
  // 设置媒体查询条件  
  sourceElement.media = "(max-width: 480px)";  
</script>  

解析：

1. 通过 getElementById 定位到具体的 <source> 标签。
2. 使用 src 和 media 属性直接修改资源路径和加载条件。
3. 这一操作可动态调整页面在不同设备上的媒体加载策略。

常用方法与事件监听

方法：动态添加或移除 Source 对象

通过 JavaScript 的 DOM 操作方法，可以灵活地向媒体元素中添加或删除 <source> 标签。

代码示例：动态添加 Source

const video = document.querySelector("video");  
const newSource = document.createElement("source");  
newSource.src = "video-mobile.mp4";  
newSource.type = "video/mp4";  
newSource.media = "(max-width: 320px)";  
video.appendChild(newSource); // 将新 source 添加到 video 元素中  

事件监听：处理媒体加载错误

通过监听 error 事件，可以捕获媒体资源加载失败的情况，并提供备用方案。

代码示例：错误处理

document.getElementById("source2").addEventListener("error", function() {  
  console.error("Media source failed to load!");  
  // 切换到备用资源  
  this.src = "backup-video.mp4";  
  // 或提示用户  
  alert("当前视频无法播放，请稍后再试。");  
});  

实际案例：多格式视频支持与动态加载

案例背景

假设需要开发一个视频播放器，要求：

1. 根据用户设备的屏幕宽度，加载不同清晰度的视频（低分辨率或高分辨率）。
2. 支持 MP4 和 WebM 两种格式，以兼容不同浏览器。

实现步骤

HTML 结构

<video id="dynamicVideo" controls>  
  <!-- 低分辨率 MP4（适用于小屏幕） -->  
  <source src="video-low.mp4" type="video/mp4" media="(max-width: 768px)">  
  <!-- 高分辨率 WebM（适用于大屏幕） -->  
  <source src="video-high.webm" type="video/webm" media="(min-width: 769px)">  
  <!-- 备用提示 -->  
  <p>您的浏览器不支持视频播放。</p>  
</video>  

JavaScript 逻辑

// 实时检测屏幕宽度变化  
window.addEventListener("resize", function() {  
  const video = document.getElementById("dynamicVideo");  
  const sources = video.querySelectorAll("source");  
  // 根据当前宽度选择合适的 source  
  let selectedSource;  
  sources.forEach(source => {  
    if (matchMedia(source.media).matches) {  
      selectedSource = source;  
    }  
  });  
  // 更新 video 元素的 src 属性  
  video.src = selectedSource.src;  
  video.load(); // 重新加载视频  
});  

关键点：

• 使用 matchMedia() 检查媒体查询条件是否匹配当前设备状态。
• 通过 video.load() 强制重新加载媒体资源，确保动态修改生效。

进阶技巧：结合其他 API 扩展功能

1. 响应式媒体选择

通过 window.matchMedia() 和 MediaQueryList，可以更复杂地控制 Source 对象的加载逻辑。例如，根据网络速度选择资源质量：

// 假设检测到网络较慢时加载低码率视频  
if (navigator.connection.effectiveType === "slow-2g") {  
  document.querySelector("source").src = "video-low.mp4";  
}  

2. 动态生成 Source 列表

在需要频繁切换媒体资源的场景（如直播流或用户上传内容），可动态生成 <source> 标签：

function addDynamicSource(url, mimeType) {  
  const newSource = document.createElement("source");  
  newSource.src = url;  
  newSource.type = mimeType;  
  document.querySelector("video").appendChild(newSource);  
}  

常见问题与解决方案

Q1：如何确保所有 Source 对象都被正确加载？

A1：通过监听 canplay 事件验证媒体资源是否可用：

video.addEventListener("canplay", function() {  
  console.log("Media is ready to play!");  
});  

Q2：Source 对象的优先级如何确定？

A：浏览器会按 <source> 标签在 HTML 中的顺序，依次检查 type 和 media 属性，选择第一个符合条件的资源。因此，优先级由标签的排列顺序决定。

Q3：如何处理旧版浏览器不支持的格式？

A：提供回退选项（如 Flash 或提示文本），并通过 JavaScript 检测支持情况：

if (!document.createElement("video").canPlayType("video/webm")) {  
  alert("您的浏览器不支持 WebM 格式，请升级或更换浏览器。");  
}  

结论

HTML DOM Source 对象 是构建现代网页媒体交互的核心工具之一。通过掌握其属性、方法和事件机制，开发者可以灵活实现多格式支持、动态资源加载和响应式媒体策略。无论是优化用户体验，还是应对复杂的技术场景，Source 对象都能提供强大的控制能力。

本文通过代码示例和实际案例，展示了从基础概念到高级应用的完整路径。建议读者通过实践项目进一步巩固知识，例如尝试构建一个支持自动切换分辨率的视频播放器，或为现有网站添加媒体加载错误的优雅降级方案。掌握这一技能，将为你的前端开发能力增添重要的一环。