如何用JavaScript获取HTML视频的总时长

在网页开发中，我们经常会遇到需要展示视频总时长、制作自定义视频播放器进度条等需求，这时候就需要获取HTML视频元素的总时长。很多人第一时间会想到使用video元素的duration属性，但实际操作过程中很容易出现获取不到正确值的问题，下面我们就来详细讲解正确的获取方式。

基础获取方式

HTML的<video>元素自带duration属性，该属性表示视频的总时长，单位是秒。如果视频元数据已经加载完成，直接读取该属性就能得到正确的时长值。我们可以先创建一个简单的视频元素：

<video id="myVideo" controls src="test.mp4"></video>
<div id="durationShow">视频时长：</div>

如果直接在页面加载完成后读取duration，很可能会得到NaN的结果，这是因为视频的元数据还没有加载完成，浏览器还不知道视频的总时长。这时候就需要监听视频的loadedmetadata事件，该事件会在视频的元数据加载完成后触发。

正确的实现代码

下面的代码演示了如何监听事件正确获取视频总时长：

// 获取video元素
const videoElement = document.getElementById('myVideo');
// 获取展示时长的元素
const durationShow = document.getElementById('durationShow');

// 监听元数据加载完成事件
videoElement.addEventListener('loadedmetadata', function() {
    // 获取视频总时长，单位是秒
    const totalDuration = videoElement.duration;
    // 转换为分:秒的格式
    const minutes = Math.floor(totalDuration / 60);
    const seconds = Math.floor(totalDuration % 60);
    // 补零处理，保证格式统一
    const formatSeconds = seconds < 10 ? '0' + seconds : seconds;
    // 展示时长
    durationShow.innerHTML = '视频时长：' + minutes + ':' + formatSeconds;
});

// 容错处理，如果元数据已经加载完成（比如视频缓存过），直接读取
if (videoElement.readyState >= 1) {
    const totalDuration = videoElement.duration;
    const minutes = Math.floor(totalDuration / 60);
    const seconds = Math.floor(totalDuration % 60);
    const formatSeconds = seconds < 10 ? '0' + seconds : seconds;
    durationShow.innerHTML = '视频时长：' + minutes + ':' + formatSeconds;
}

常见问题说明

为什么获取到的duration是NaN

出现这种情况基本都是因为读取duration的时机太早，视频的元数据还没有加载完成。video元素的readyState属性可以表示视频的当前状态，当readyState大于等于1的时候，元数据才加载完成，这时候读取duration才会得到正确的值。

跨域视频的时长获取问题

如果视频资源是跨域的，需要确保视频服务器配置了正确的CORS头，否则可能无法正确加载元数据，导致duration获取失败。如果遇到跨域问题，可以先联系视频服务方配置CORS，或者在自己的服务端做视频资源的代理转发。

其他注意事项

• duration属性的值是浮点数，比如一个1分30秒的视频，duration的值可能是90.452，所以转换为分秒格式的时候需要做取整处理。
• 如果视频加载失败，loadedmetadata事件不会触发，可以添加error事件监听来处理加载失败的情况。
• 不同浏览器对duration的精度处理可能略有差异，但基本都是秒为单位的数值，转换逻辑通用。

通过以上方法，就可以稳定地获取到HTML视频的总时长，满足各种业务场景的需求。如果需要在视频时长变化的时候重新获取，可以再次监听loadedmetadata事件，或者监听durationchange事件，该事件会在视频时长发生变化时触发。

HTML_videoduration属性JavaScript视频时长获取修改时间：2026-05-25 10:47:38