首页
/ 正文

HTML Audio/Video DOM play 事件（保姆级教程）

更新时间: 2025-03-31 04:05:27

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

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

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

在 Web 开发中，音频和视频的交互控制是一个常见需求。无论是制作音乐播放器、在线教育平台，还是开发多媒体应用，开发者都需要精准地监听和响应用户对媒体元素的操作。HTML Audio/Video DOM play 事件正是这类交互的核心机制之一。它允许开发者通过 JavaScript 监听音频或视频的播放行为，从而执行自定义逻辑，例如记录播放时间、更新 UI 状态，或触发其他功能。

对于编程初学者，理解 DOM 事件的基础逻辑至关重要；而对于中级开发者，掌握 play 事件的高级用法（如结合其他事件实现复杂交互）同样不可或缺。本文将从基础概念出发，通过实例和比喻，深入浅出地讲解这一主题，并提供可直接复用的代码片段。

一、事件基础：什么是 DOM 事件？

在 HTML 中，DOM（文档对象模型）是网页内容的结构化表示。DOM 事件则是用户或浏览器触发的特定动作，例如点击按钮、输入文本或播放媒体文件。开发者可以通过 JavaScript 监听这些事件，并在事件触发时执行代码。

类比说明：
想象 DOM 事件就像现实生活中的“触发器”——当你按下开关（触发事件），灯泡（JavaScript 代码）就会亮起来。play 事件就是媒体元素（如音频或视频）被播放时触发的“开关”。

二、play 事件的定义与触发条件

1. 定义

play 事件在 HTML Audio/Video 元素开始播放时触发。无论是用户点击播放按钮，还是通过 JavaScript 调用 .play() 方法，只要媒体内容开始播放，该事件就会被触发。

2. 触发场景

用户手动点击播放按钮。
通过代码调用 audio.play() 或 video.play()。
在自动播放模式下（需满足浏览器的自动播放策略）。

3. 代码示例

<audio id="myAudio" src="example.mp3"></audio>  
<button onclick="playAudio()">播放</button>  

<script>  
  const audio = document.getElementById("myAudio");  

  // 监听 play 事件  
  audio.addEventListener("play", () => {  
    console.log("音频开始播放！");  
    // 可在此处添加自定义逻辑，如显示播放进度条  
  });  

  function playAudio() {  
    audio.play(); // 触发 play 事件  
  }  
</script>

三、play 事件与 pause 事件的区别

1. 核心差异

play 事件：在媒体开始播放时触发，表示播放状态的开启。
pause 事件：在媒体暂停时触发，表示播放状态的中断。

2. 实际应用对比

假设你正在开发一个音乐播放器，可以利用这两个事件实现以下功能：

当播放开始时，显示“正在播放”图标（通过 play 事件）。
当暂停时，切换为“暂停”图标并记录当前进度（通过 pause 事件）。

audio.addEventListener("pause", () => {  
  console.log("音频已暂停，当前时间：" + audio.currentTime);  
  // 可在此处保存播放进度到本地存储  
});

四、play 事件的高级用法

1. 结合其他事件实现复杂逻辑

通过监听 play、pause、ended 等事件，可以构建完整的媒体控制功能。例如：

<video id="myVideo" src="example.mp4" controls></video>  

<script>  
  const video = document.getElementById("myVideo");  

  // 播放时更新 UI 状态  
  video.addEventListener("play", () => {  
    document.querySelector(".play-icon").style.display = "none";  
    document.querySelector(".pause-icon").style.display = "block";  
  });  

  // 暂停时恢复 UI 状态  
  video.addEventListener("pause", () => {  
    document.querySelector(".pause-icon").style.display = "none";  
    document.querySelector(".play-icon").style.display = "block";  
  });  

  // 播放结束时提示  
  video.addEventListener("ended", () => {  
    alert("视频播放完毕！");  
  });  
</script>

2. 处理浏览器自动播放策略

部分浏览器会阻止自动播放音频/视频（需用户交互触发）。此时，可以通过 play 事件配合 try/catch 处理异常：

function autoPlay() {  
  try {  
    audio.play(); // 尝试自动播放  
  } catch (error) {  
    console.error("自动播放被阻止，需用户交互");  
  }  
}

五、常见问题与解决方案

1. 事件监听未生效

原因：元素未正确获取或事件名拼写错误。
解决方案：

确保元素 ID 或选择器正确。
检查事件名是否为小写（如 play 而非 Play）。

2. 多次触发事件

现象：同一事件被多次监听，导致代码重复执行。
解决方案：在监听前移除旧事件：

audio.removeEventListener("play", handler);  
audio.addEventListener("play", handler);

3. 浏览器兼容性问题

解决方法：

使用 canPlayType() 检查媒体格式支持性。
对旧版浏览器提供降级方案（如静音自动播放）。

六、与其他媒体事件的对比

下表对比了 play 事件与常见媒体事件的功能差异：

事件名	触发时机	典型用途
play	开始播放时	更新 UI 状态、记录播放开始时间
pause	暂停时	保存进度、隐藏播放控件
ended	媒体播放完毕时	循环播放、跳转下一曲
canplay	媒体准备好播放时	显示“播放”按钮、移除加载动画

七、实际案例：构建基础播放器

1. 功能需求

点击按钮播放/暂停音频。
显示当前播放时间。
播放结束时提示用户。

2. 完整代码实现

<!DOCTYPE html>  
<html>  
<head>  
  <title>简易音频播放器</title>  
</head>  
<body>  
  <audio id="player" src="song.mp3"></audio>  
  <div>  
    <button id="play-btn">播放</button>  
    <div id="time-display">00:00</div>  
  </div>  

  <script>  
    const audio = document.getElementById("player");  
    const playBtn = document.getElementById("play-btn");  
    const timeDisplay = document.getElementById("time-display");  

    // 更新播放时间  
    function updateTimer() {  
      const minutes = Math.floor(audio.currentTime / 60);  
      const seconds = Math.floor(audio.currentTime % 60);  
      timeDisplay.textContent =  
        String(minutes).padStart(2, "0") + ":" + String(seconds).padStart(2, "0");  
    }  

    // 监听 play 事件，启动计时器  
    audio.addEventListener("play", () => {  
      playBtn.textContent = "暂停";  
      setInterval(updateTimer, 1000);  
    });  

    // 监听 pause 事件，停止计时器  
    audio.addEventListener("pause", () => {  
      playBtn.textContent = "播放";  
    });  

    // 播放结束时提示  
    audio.addEventListener("ended", () => {  
      alert("播放结束！");  
      playBtn.textContent = "重新播放";  
    });  

    // 按钮点击事件  
    playBtn.addEventListener("click", () => {  
      if (audio.paused) {  
        audio.play();  
      } else {  
        audio.pause();  
      }  
    });  
  </script>  
</body>  
</html>

八、总结与展望

HTML Audio/Video DOM play 事件是控制媒体交互的核心工具之一。通过结合其他事件和 JavaScript，开发者可以构建出功能丰富的多媒体应用。无论是简单的播放/暂停控制，还是复杂的进度条同步、自动播放策略处理，play 事件都是实现这些功能的基础。

随着 Web 技术的发展，媒体交互的场景愈发多样。未来，开发者可以进一步探索结合 Web Audio API 实现音效处理，或通过 Service Workers 实现离线媒体播放等功能。掌握 play 事件的原理与用法，将为深入探索这些领域打下坚实的基础。

通过本文的讲解，希望读者能够理解 HTML Audio/Video DOM play 事件的底层逻辑，并在实际项目中灵活应用。记住，实践是掌握技术的最佳途径——尝试将代码示例改造成自己的项目，或结合其他事件构建更复杂的功能！

HTML Audio/Video DOM play 事件（保姆级教程）

一、事件基础：什么是 DOM 事件？

二、play 事件的定义与触发条件

1. 定义

2. 触发场景

3. 代码示例

三、play 事件与 pause 事件的区别

1. 核心差异

2. 实际应用对比

四、play 事件的高级用法

1. 结合其他事件实现复杂逻辑

2. 处理浏览器自动播放策略

五、常见问题与解决方案

1. 事件监听未生效

2. 多次触发事件

3. 浏览器兼容性问题

六、与其他媒体事件的对比

七、实际案例：构建基础播放器

1. 功能需求

2. 完整代码实现

八、总结与展望

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）