异常教程

HTML 音频/视频 DOM duration 属性（长文讲解）

更新时间:

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

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

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

前言

在现代网页开发中，音频和视频的交互功能越来越受到重视。无论是在线教育平台的视频课程，还是音乐流媒体应用，开发者都需要通过编程控制媒体内容的播放行为。HTML 音频/视频 DOM duration 属性正是实现这一目标的核心工具之一。它允许开发者获取媒体文件的总时长，从而构建进度条、时间显示或自动化播放逻辑。对于编程初学者和中级开发者而言，理解这一属性的原理与应用，是掌握动态媒体交互的第一步。

本文将从基础概念入手，逐步深入讲解 duration 属性的用法、实际案例及常见问题，并通过代码示例帮助读者快速上手。

HTML 音频/视频基础概念

1. HTML5 音频与视频元素

HTML5 引入了 <audio> 和 <video> 标签，简化了网页中嵌入媒体文件的方式。这两个元素的 DOM 对象提供了丰富的属性和方法，例如：

  • currentTime：当前播放时间。
  • paused：返回布尔值，判断媒体是否暂停。
  • duration：返回媒体文件的总时长（秒）。

这些属性和方法共同构成了媒体控制的基础。

2. DOM 属性与 JavaScript 的结合

通过 JavaScript，开发者可以操作这些 DOM 属性。例如，通过 document.getElementById 获取元素后，即可调用其属性或方法。

const videoElement = document.getElementById("myVideo");
const totalDuration = videoElement.duration;
console.log("视频总时长：" + totalDuration + "秒");

duration 属性详解

1. 属性定义与作用

duration 属性返回媒体文件的总时长（以秒为单位）。其值在媒体加载完成后才会生效，若媒体未加载或加载失败，返回 NaN（非数字）。

形象比喻

可以将 duration 属性想象成视频的“总时长指示器”。就像一本书的页码总和，它告诉开发者媒体内容的长度，从而支持后续逻辑的编写。

2. 获取 duration 的时机

由于媒体文件需要加载才能获取时长，直接在页面加载完成时调用可能返回 NaN。因此，开发者需要监听 loadedmetadata 事件：

videoElement.addEventListener("loadedmetadata", function() {
  console.log("媒体加载完成，总时长：" + videoElement.duration + "秒");
});

实际应用场景与代码示例

1. 显示媒体总时长

在网页中动态展示视频或音频的总时长：

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

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

  video.addEventListener("loadedmetadata", function() {
    // 将秒数转换为“分钟:秒数”格式
    const minutes = Math.floor(video.duration / 60);
    const seconds = Math.floor(video.duration % 60);
    durationDisplay.textContent = `总时长：${minutes}:${seconds}`;
  });
</script>

2. 进度条控制

结合 duration 和 currentTime，可以实现播放进度条功能：

<input type="range" id="seekBar" min="0" max="100" value="0">
<script>
  const seekBar = document.getElementById("seekBar");

  // 更新进度条位置
  video.addEventListener("timeupdate", function() {
    const percent = (video.currentTime / video.duration) * 100;
    seekBar.value = percent;
  });

  // 点击进度条跳转时间
  seekBar.addEventListener("input", function() {
    video.currentTime = (seekBar.value / 100) * video.duration;
  });
</script>

3. 自动播放控制

当媒体总时长超过某个阈值时，触发特定行为：

if (video.duration > 300) { // 若视频超过5分钟
  alert("该视频较长，请连接Wi-Fi后观看！");
}

常见问题与解决方案

1. 为什么返回 NaN？

原因：媒体未加载完成或文件路径错误。
解决方法：

  • 确保媒体文件路径正确。
  • 在 loadedmetadata 事件触发后读取属性。

2. 如何处理跨浏览器兼容性？

大多数现代浏览器（Chrome、Firefox、Edge）均支持 duration 属性。但针对旧版浏览器，可通过条件判断提供降级方案：

if (typeof videoElement.duration === "number") {
  // 正常逻辑
} else {
  console.error("您的浏览器不支持此功能");
}

进阶技巧与扩展

1. 结合其他属性实现倒计时

通过 duration 和 currentTime，可以实时显示剩余时间：

const remainingTime = document.getElementById("remainingTime");

video.addEventListener("timeupdate", function() {
  const remaining = video.duration - video.currentTime;
  remainingTime.textContent = `剩余时间：${Math.floor(remaining)}秒`;
});

2. 与 CSS 动态样式结合

根据进度百分比改变元素样式：

const progressBar = document.querySelector(".progress-bar");

video.addEventListener("timeupdate", function() {
  progressBar.style.width = `${(video.currentTime / video.duration) * 100}%`;
});

完整案例演示

案例：带进度条和时间显示的视频播放器

<video id="myVideo" src="video.mp4"></video>
<div class="controls">
  <button onclick="playPause()">播放/暂停</button>
  <input type="range" id="seekBar" min="0" max="100" value="0">
  <div id="timeDisplay">00:00 / 00:00</div>
</div>

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

  // 初始化媒体加载事件
  video.addEventListener("loadedmetadata", function() {
    const totalMinutes = Math.floor(video.duration / 60);
    const totalSeconds = Math.floor(video.duration % 60);
    timeDisplay.textContent = `00:00 / ${totalMinutes}:${totalSeconds}`;
  });

  // 播放/暂停按钮
  function playPause() {
    video.paused ? video.play() : video.pause();
  }

  // 更新进度条和时间显示
  video.addEventListener("timeupdate", function() {
    const currentTime = video.currentTime;
    const currentMinutes = Math.floor(currentTime / 60);
    const currentSeconds = Math.floor(currentTime % 60);
    timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${timeDisplay.textContent.split(" / ")[1]}`;
    seekBar.value = (currentTime / video.duration) * 100;
  });

  // 点击进度条跳转时间
  seekBar.addEventListener("input", function() {
    video.currentTime = (seekBar.value / 100) * video.duration;
  });
</script>

结论

HTML 音频/视频 DOM duration 属性是媒体交互开发中不可或缺的工具。通过理解其工作原理、合理监听事件、结合其他属性与方法，开发者可以构建出功能丰富的播放器。无论是简单的总时长显示，还是复杂的进度条控制，掌握这一属性都能显著提升开发效率。

希望本文的代码示例和实际案例能帮助读者快速上手。接下来，尝试将这些知识应用到自己的项目中，逐步探索更多媒体交互的可能性吧！

最新发布

查看更多文章