HTML DOM Video duration 属性（一文讲透）

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

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

在网页开发中，视频元素（<video>）的使用越来越普遍，无论是教学内容、产品演示还是娱乐内容，视频都能提供直观的用户体验。然而，如何获取视频的总时长并动态控制播放进度，是开发者常需要解决的问题。本文将深入讲解 HTML DOM Video duration 属性，通过基础概念、代码示例和实战案例，帮助读者掌握这一属性的用法，并了解其在实际项目中的应用场景。

理解Video元素与duration属性

1. Video元素基础

HTML5 引入了 <video> 标签，允许开发者直接在网页中嵌入视频。其基本语法如下：

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

其中，controls 属性会显示默认的播放控件（如播放/暂停按钮、进度条等）。而 duration 属性 则是 DOM 中与 <video> 元素关联的一个属性，用于获取视频的总时长（以秒为单位）。

2. duration属性的特性

• 只读性：duration 属性是只读的，无法通过代码直接修改视频的总时长。
• 浮点数返回：该属性返回的是一个浮点数，例如 123.45 秒，表示视频精确到毫秒的时长。
• 依赖视频加载状态：只有在视频元数据（metadata）加载完成后，duration 才能返回有效值，否则会返回 NaN（Not a Number）。

比喻：
可以将 duration 想象为一张CD的总时长标签。就像你无法直接修改CD的时长一样，duration 只能读取，不能修改；而元数据加载完成，就像CD被放入播放器后，你才能看到它的总时长。

使用duration属性的步骤

1. 获取Video元素

首先，需要通过 JavaScript 或 DOM 操作获取 <video> 元素的引用。例如：

const videoElement = document.querySelector("video");

或者为视频元素添加一个 id：

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

然后通过 getElementById 获取：

const videoElement = document.getElementById("myVideo");

2. 检查元数据加载状态

由于 duration 属性在元数据加载前可能无效，可以通过监听 loadedmetadata 事件来确保数据可用：

videoElement.addEventListener("loadedmetadata", () => {
  const totalDuration = videoElement.duration;
  console.log(`视频总时长：${totalDuration} 秒`);
});

3. 实际应用：获取并显示时长

结合 HTML 和 JavaScript，可以动态显示视频的总时长。例如：

<div>
  <video id="myVideo" src="example.mp4" preload="metadata"></video>
  <p>视频总时长： <span id="durationDisplay"></span></p>
</div>

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

video.addEventListener("loadedmetadata", () => {
  const duration = video.duration;
  const minutes = Math.floor(duration / 60);
  const seconds = Math.floor(duration % 60);
  durationDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`;
});

说明：

• preload="metadata" 可加快元数据加载速度。
• 通过计算分钟和秒数，将浮点数格式化为 MM:SS 的字符串。

duration属性的高级用法

1. 结合currentTime实现进度条

视频的 currentTime 属性表示当前播放位置，结合 duration 可以计算播放进度百分比：

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

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

案例：

<div class="progress-container">
  <div id="progressBar" class="progress-bar"></div>
</div>

.progress-container {
  width: 300px;
  height: 5px;
  background: #ddd;
  position: relative;
}
.progress-bar {
  height: 100%;
  background: #4CAF50;
  transition: width 0.1s;
}

2. 动态切换视频源

当视频源动态改变时，需重新监听 loadedmetadata 事件：

video.src = "new_video.mp4";
video.load(); // 重新加载视频

video.addEventListener("loadedmetadata", () => {
  console.log("新视频时长：" + video.duration);
});

常见问题与解决方案

问题1：duration返回NaN

原因：视频元数据未加载完成或视频路径错误。
解决方案：

• 确保视频路径正确且可访问。
• 在 loadedmetadata 事件触发后再访问 duration。

问题2：跨浏览器兼容性

尽管 duration 是 HTML5 标准属性，但部分旧版浏览器可能不支持。可通过条件判断处理：

if (typeof videoElement.duration === "number") {
  // 正常逻辑
} else {
  console.error("当前浏览器不支持duration属性");
}

问题3：视频时长计算不准确

部分视频编码可能因格式问题导致 duration 不精确。此时可通过服务器端预处理视频元数据，或使用第三方库（如 videojs）增强兼容性。

实战案例：构建简易视频播放器

1. HTML结构

<div class="video-player">
  <video id="player" src="video.mp4" controls></video>
  <div class="controls">
    <button onclick="playVideo()">播放</button>
    <button onclick="pauseVideo()">暂停</button>
    <p>总时长：<span id="totalTime"></span></p>
  </div>
</div>

2. JavaScript逻辑

const video = document.getElementById("player");
const totalTimeDisplay = document.getElementById("totalTime");

// 加载元数据后显示时长
video.addEventListener("loadedmetadata", () => {
  const duration = video.duration;
  const formattedDuration = formatTime(duration);
  totalTimeDisplay.textContent = formattedDuration;
});

// 格式化时间函数
function formatTime(time) {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}

// 播放与暂停功能
function playVideo() {
  video.play();
}
function pauseVideo() {
  video.pause();
}

3. CSS样式

.video-player {
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
}
.controls button {
  margin: 10px;
  padding: 8px 16px;
  background: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
.controls button:hover {
  background: #45a049;
}

总结

HTML DOM Video duration 属性 是控制视频播放的核心工具之一，它为开发者提供了获取视频总时长的能力。通过结合 currentTime、loadedmetadata 事件和自定义控件，可以实现复杂的视频交互功能。

本文从基础概念到实战案例，逐步展示了如何利用这一属性解决实际问题。对于初学者，建议从简单的时长显示开始练习；中级开发者则可以尝试构建更复杂的播放器，例如添加进度条拖动、播放速度控制等功能。

掌握 duration 属性后，开发者可以进一步探索其他视频相关属性（如 volume、muted），或结合 Web API 实现更高级的多媒体应用。希望本文能为你的前端开发之路提供有价值的参考！