HTML中怎么用JavaScript获取视频时长

在前端页面开发中，经常需要展示视频的总时长，或者基于时长实现播放进度控制、剩余时间计算等功能，这时候就需要通过JavaScript获取视频元素的时长信息。下面我们就来详细讲解具体的实现方法。

核心原理

HTML中的<video>元素属于HTMLMediaElement接口的实现，该接口提供了很多和媒体相关的属性，其中duration属性就是用来获取媒体资源总时长的，单位是秒，返回值是一个浮点数。

需要注意的是，视频的时长信息需要等视频的元数据加载完成之后才能获取到，如果直接在页面加载完成就读取duration，很可能会得到NaN的结果，因为此时浏览器还没有解析到视频的时长信息。

实现步骤

1. 编写HTML视频结构

首先在页面中添加一个<video>元素，设置好视频源，同时可以给元素加一个id方便后续获取。

<video id="myVideo" controls>
  <source src="http://ipipp.com/video/sample.mp4" type="video/mp4">
  您的浏览器不支持video标签
</video>
<p>视频总时长：<span id="durationSpan">加载中...</span>秒</p>

2. 监听元数据加载事件

我们需要监听视频元素的loadedmetadata事件，这个事件会在视频的元数据（包括时长、尺寸、编码格式等）加载完成后触发，此时再去读取duration属性就能得到正确的值。

3. 编写JavaScript获取逻辑

通过DOM方法获取视频元素，绑定loadedmetadata事件监听器，在回调函数中读取时长并展示到页面上。

// 获取视频元素
const videoElement = document.getElementById('myVideo');
// 获取展示时长的span元素
const durationSpan = document.getElementById('durationSpan');

// 监听元数据加载完成事件
videoElement.addEventListener('loadedmetadata', function() {
  // 获取视频时长，单位是秒
  const duration = videoElement.duration;
  // 将时长保留两位小数展示
  durationSpan.textContent = duration.toFixed(2);
});

// 备选方案：如果视频已经加载过，直接读取时长
if (videoElement.readyState >= 1) {
  const duration = videoElement.duration;
  durationSpan.textContent = duration.toFixed(2);
}

常见问题说明

• 如果获取到的值是NaN，首先检查视频资源是否正常可访问，其次确认是不是在元数据加载前就读取了duration属性，需要等loadedmetadata事件触发后再读取。
• 跨域视频资源如果没有正确的CORS配置，可能会导致无法获取元数据，这时候需要服务端配置对应的跨域响应头。
• duration属性返回的是秒数，如果需要转换成分:秒的格式，可以自行编写转换函数。

时长格式转换示例

如果需要把秒数转换成更易读的分:秒格式，可以使用下面的转换函数：

function formatDuration(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  // 补零处理，保证两位数字
  const formattedMinutes = minutes.toString().padStart(2, '0');
  const formattedSeconds = remainingSeconds.toString().padStart(2, '0');
  return `${formattedMinutes}:${formattedSeconds}`;
}

// 使用示例
const videoDuration = videoElement.duration;
console.log(formatDuration(videoDuration)); // 输出类似 05:30 的格式

总结

通过JavaScript获取HTML视频时长的核心就是利用HTMLMediaElement的duration属性，同时要注意等待视频元数据加载完成后再读取该属性，避免出现获取不到或者值为NaN的情况。如果需要展示更友好的时长格式，可以自行编写转换逻辑，适配不同的业务需求。

JavaScriptHTML_video视频时长HTMLMediaElement修改时间：2026-05-27 00:41:32