HTML 音频/视频 DOM src 属性（保姆级教程）

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

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

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

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

HTML 音频/视频基础：构建多媒体播放器的基石

在现代网页开发中，音频和视频内容已成为用户体验的重要组成部分。无论是在线教育、娱乐应用还是企业宣传，HTML 提供的 <audio> 和 <video> 元素让开发者能够轻松嵌入媒体文件。而 src 属性作为这些元素的核心，决定了媒体文件的来源路径，是构建交互式播放器的基础。本文将深入解析 HTML 音频/视频 DOM 的 src 属性，通过案例和代码示例，帮助开发者掌握其用法与进阶技巧。

什么是 HTML 音频/视频的 src 属性？

src 属性是 HTML 中 <audio> 和 <video> 元素的必备属性，用于指定音频或视频文件的 URL 地址。它类似于一个“导航坐标”，告诉浏览器需要加载和播放的具体媒体资源。例如：

<video src="movie.mp4" controls></video>
<audio src="song.mp3" controls></audio>

在上述代码中，src 的值可以是本地文件路径（如 movie.mp4）或远程 URL（如 https://example.com/audio.mp3）。若未设置 src，浏览器将无法加载媒体内容。

DOM src 属性的动态操作：让播放器“活”起来

HTML 元素的属性可以通过 JavaScript 的 DOM（文档对象模型）进行动态修改。对于音频/视频的 src 属性，开发者可以通过以下方式实现播放源的动态切换：

1. 通过 JavaScript 获取并修改 src 属性

// 获取 video 元素
const videoElement = document.getElementById("myVideo");

// 修改 src 属性
videoElement.src = "new_movie.mp4";

// 触发加载新资源
videoElement.load();

比喻说明：这就像给遥控器添加“换台”功能。src 是频道地址，load() 则是按下遥控器的“确认”键，让设备重新加载新频道的内容。

2. 响应用户交互事件

结合按钮点击、下拉菜单等交互元素，可以实现播放列表切换：

<button onclick="changeVideo('movie1.mp4')">播放第一集</button>
<button onclick="changeVideo('movie2.mp4')">播放第二集</button>

<script>
function changeVideo(newSrc) {
  const video = document.querySelector("video");
  video.src = newSrc;
  video.load();
  video.play();
}
</script>

关键点：

• video.load() 必须在修改 src 后调用，否则浏览器可能不会重新加载资源。
• 若直接调用 video.play()，某些浏览器会因“自动播放策略”阻止播放，需用户交互触发（如点击事件）。

进阶用法：预加载与跨域问题

1. 控制预加载行为

通过 preload 属性配合 src，可以优化媒体加载性能：

<video src="long_movie.mp4" preload="auto" controls></video>

preload 的可选值包括：

• auto：浏览器自动预加载媒体文件（默认）。
• metadata：仅加载元数据（如时长、尺寸）。
• none：不预加载，等待用户点击播放。

场景举例：在移动端网页中，若媒体文件较大，可设置 preload="none" 节省流量。

2. 处理跨域资源

若 src 指向的文件位于其他域名，需确保服务器配置了正确的 CORS（跨域资源共享）策略。例如，服务器需返回以下 HTTP 头：

Access-Control-Allow-Origin: *  

若未配置，浏览器将报错“跨域阻断”。此时可通过以下方式解决：

• 与服务器管理员沟通添加 CORS 头。
• 将媒体文件托管在与网页相同的域名下。

实战案例：构建可切换的音频播放器

案例目标

创建一个包含多个音频选项的播放器，用户点击按钮可切换歌曲并控制播放状态。

HTML 结构

<div class="audio-player">
  <button onclick="playAudio('song1.mp3')">播放歌曲1</button>
  <button onclick="playAudio('song2.mp3')">播放歌曲2</button>
  <button onclick="togglePlay()">播放/暂停</button>
  <audio id="myAudio" src="default.mp3"></audio>
</div>

JavaScript 实现

let currentAudio = document.getElementById("myAudio");

function playAudio(newSrc) {
  currentAudio.src = newSrc;
  currentAudio.load();
  currentAudio.play().catch(error => {
    console.error("自动播放被阻止，请用户触发：", error);
  });
}

function togglePlay() {
  if (currentAudio.paused) {
    currentAudio.play();
  } else {
    currentAudio.pause();
  }
}

关键技巧：

• 使用 catch 处理自动播放被阻止的情况，避免程序崩溃。
• currentAudio.play() 返回 Promise，需注意异步操作。

常见问题与解决方案

问题1：修改 src 后视频不播放

原因：未调用 load() 方法。
解决：在修改 src 后，必须执行 video.load()，否则浏览器不会重新加载资源。

问题2：移动端自动播放被阻止

原因：现代浏览器限制自动播放以提升用户体验。
解决：

1. 确保播放由用户交互触发（如点击按钮）。
2. 设置 muted 属性实现静音自动播放：

   video.muted = true;
   video.play();
   

总结：src 属性的多面性与未来方向

HTML 音频/视频的 src 属性不仅是媒体文件的“地址标识符”，更是构建动态交互的核心接口。通过 DOM 操作，开发者可以实现播放列表、实时流切换等复杂功能。随着 Web 技术的发展，结合 Service Workers 缓存策略或 WebAssembly 处理媒体数据，src 属性的应用场景将进一步扩展。

建议读者通过实际项目练习，例如开发一个支持拖拽上传本地文件的播放器，或集成 API 动态生成媒体 URL。掌握 src 属性的灵活使用，将为打造功能丰富的多媒体应用奠定坚实基础。