异常教程

HTML 音频/视频 DOM durationchange 事件（超详细）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 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+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么关注 durationchange 事件？

在 Web 开发中，音频和视频元素的交互控制是提升用户体验的关键环节。无论是开发音乐播放器、在线视频平台，还是嵌入式媒体组件，开发者都需要精准掌控媒体元素的状态变化。其中，durationchange 事件便是用来监听媒体时长动态变化的核心工具。它如同一个“时长监控器”，当媒体文件加载完成或源文件切换时，会及时通知开发者，以便更新 UI 或执行相关逻辑。本文将通过通俗易懂的讲解、代码示例和实战场景，帮助开发者深入理解这一事件。

事件基础：什么是 durationchange？

1. 概念解析

durationchange 是 HTML5 音频（<audio>）和视频（<video>）元素的 DOM 事件。当媒体元素的 duration 属性值发生改变时，该事件会被触发。duration 属性表示媒体文件的总时长（以秒为单位），初始值通常为 0，直到媒体资源完成加载后才会更新为实际时长。

形象比喻：
可以将媒体元素想象成一个“黑匣子”，durationchange 事件就像这个黑匣子的“状态指示灯”。当内部时长信息发生变化时（比如加载完成、源文件更换），指示灯就会亮起，提醒开发者“我有新消息要传递”。

2. 触发场景

durationchange 事件通常在以下情况下触发：

  • 媒体资源加载完成：当浏览器首次加载音频/视频文件时，duration 会从 0 更新为实际值。
  • 动态切换源文件：通过修改 src 属性或 srcObject 属性切换媒体文件时，若新文件的时长不同。
  • 流媒体动态变化：在直播或自适应码率场景中，媒体总时长可能因服务器推送内容而变化。

核心原理：如何与 durationchange 交互？

1. DOM 属性与事件的关系

媒体元素的 duration 属性和 durationchange 事件是紧密关联的。开发者可以通过以下方式操作：

  • 读取时长：通过 element.duration 获取当前总时长。
  • 监听事件：通过 addEventListener('durationchange', handler) 监听事件触发。

代码示例：

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

<script>
  const video = document.getElementById('myVideo');
  
  video.addEventListener('durationchange', function() {
    console.log('总时长更新为:', this.duration);
  });
</script>

2. 事件触发的时机

  • 首次加载：当视频开始加载时，duration 初始值为 0，直到媒体元数据（如时长、分辨率）加载完毕后触发 durationchange。
  • 动态操作：若通过代码修改 src 属性并加载新文件，新文件加载完成后同样会触发该事件。

3. 与 progress 事件的区别

progress 事件在媒体加载过程中持续触发，而 durationchange 只在时长确定时触发一次。两者常配合使用：

  • progress：用于实时更新加载进度条。
  • durationchange：用于获取最终时长，确保 UI 元素（如总时长显示）正确初始化。

示例对比：

video.addEventListener('progress', function() {
  console.log('当前已加载进度:', this.buffered.end(0));
});

video.addEventListener('durationchange', function() {
  console.log('总时长确定:', this.duration);
});

实战案例：常见应用场景

1. 显示媒体总时长

在视频播放器中，总时长通常显示在进度条右侧。通过 durationchange 可确保时长信息在加载完成后更新。

代码实现：

<div>
  <video id="videoPlayer" src="movie.mp4"></video>
  <div>总时长: <span id="durationDisplay">00:00</span></div>
</div>

<script>
  const video = document.getElementById('videoPlayer');
  const durationDisplay = document.getElementById('durationDisplay');

  video.addEventListener('durationchange', function() {
    const duration = this.duration;
    // 将秒数转换为 MM:SS 格式
    const minutes = Math.floor(duration / 60);
    const seconds = Math.floor(duration % 60);
    durationDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  });
</script>

2. 动态切换媒体源

在需要切换不同媒体文件的场景（如播放列表或 A/B 测试），durationchange 可确保每次切换后 UI 自动适配新时长。

代码示例：

function loadNewSource(newSrc) {
  const video = document.getElementById('videoPlayer');
  video.src = newSrc;
  video.load(); // 触发重新加载
}

// 监听切换按钮点击
document.getElementById('switchButton').addEventListener('click', function() {
  loadNewSource('new_movie.mp4');
});

// durationchange 事件处理
video.addEventListener('durationchange', function() {
  // 更新 UI 元素
});

3. 处理流媒体的动态时长

在直播或自适应流媒体场景中，媒体总时长可能因服务器推送内容而变化。此时 durationchange 可用于实时更新 UI 提示。

案例描述： 假设一个直播视频的 duration 会随直播进行而持续增长，开发者可通过该事件动态显示“剩余时间”或“直播时长”。

高级技巧与注意事项

1. 处理未加载完成的场景

若需在页面加载时立即获取媒体时长，需等待 durationchange 触发后再执行逻辑，避免读取到 0 值。

优化代码：

const video = document.getElementById('videoPlayer');
let durationReady = false;

video.addEventListener('durationchange', function() {
  durationReady = true;
  // 执行初始化操作
});

// 确保在时长确定后执行
function initPlayer() {
  if (durationReady) {
    // 初始化 UI 或其他逻辑
  } else {
    setTimeout(initPlayer, 100); // 递归检查
  }
}

2. 多事件协同工作

结合其他事件（如 loadedmetadata）可提升代码效率。loadedmetadata 在媒体元数据加载完成后触发，此时 duration 已更新，无需等待 durationchange。

替代方案：

video.addEventListener('loadedmetadata', function() {
  console.log('元数据加载完成，总时长:', this.duration);
});

3. 移动端与浏览器兼容性

  • 移动端限制：部分老旧设备可能对媒体事件支持不足，建议通过 canPlayType() 方法检测功能。
  • 跨浏览器差异：主流浏览器（Chrome、Firefox、Safari）对 durationchange 支持良好，但需测试 Edge 或 IE 的兼容性。

常见问题与解决方案

1. 事件未触发？

  • 检查网络问题：若媒体资源加载失败，duration 可能始终为 0。
  • 验证事件监听：确认事件名称拼写正确（区分大小写）。
  • 调试技巧：在控制台打印 video.duration 和 video.error，排查加载错误。

2. 如何区分加载完成与源切换？

通过结合 ended 事件（播放结束）和 src 属性变化，可精准判断触发原因：

let currentSrc = video.src;

video.addEventListener('durationchange', function() {
  if (this.src !== currentSrc) {
    console.log('源文件切换导致时长变化');
    currentSrc = this.src;
  } else {
    console.log('加载完成导致时长更新');
  }
});

结论：掌握 durationchange 的价值

durationchange 事件是 HTML 音频/视频交互中的关键工具，它帮助开发者精准控制媒体元素的时长信息，从而构建更流畅、用户友好的体验。无论是基础的总时长显示，还是复杂的应用场景（如动态源切换、直播监控），合理利用这一事件都能显著提升开发效率。通过本文的示例和技巧，开发者可以快速将理论转化为实践，为用户提供更优质的内容交互体验。

扩展阅读与资源

通过持续实践和探索，开发者可以将 durationchange 事件与其他媒体事件（如 timeupdate、canplay）结合，构建出功能强大的多媒体应用。

最新发布

查看更多文章