使用HTML5 Video API在Web页面中获取视频播放时长

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用HTML5 Video API在Web页面中获取视频播放时长

2025-11-16

浏览次数：次

返回列表

使用HTML5 Video API在Web页面中获取视频播放时长

本教程详细介绍了如何在web页面中利用html5

在现代Web开发中，经常需要在页面上嵌入视频并显示其相关信息，其中视频的播放时长是一个常见的需求。虽然我们可以在HTML中简单地使用

核心概念：视频时长与加载事件

HTML5的

为了确保在 duration 属性可用时进行访问，我们需要监听视频元素的特定事件。最常用的事件是 loadedmetadata 和 loadeddata：

loadedmetadata: 当视频的元数据（包括时长、尺寸、文本轨道等）加载完毕时触发。这是获取视频时长的理想时机，因为它发生在视频数据开始加载之前，效率更高。
loadeddata: 当视频的第一帧数据加载完成，并且可以开始播放时触发。这个事件比 loadedmetadata 稍晚，但同样可以用来获取时长。

通常，为了尽快获取时长信息，推荐使用 loadedmetadata 事件。

HTML结构：嵌入视频并准备显示区域

首先，我们需要一个HTML结构来嵌入视频并提供一个区域来显示视频时长。给视频元素一个 id 便于J*aScript访问，同时添加一个或

标签来承载时长信息。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取视频播放时长</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        video { max-width: 600px; border: 1px solid #ccc; display: block; margin-bottom: 10px; }
        #durationDisplay { font-weight: bold; color: #333; }
    </style>
</head>
<body>
    <h1>视频播放时长示例</h1>

    <video id="myVideo" controls preload="metadata">
        <source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722nb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4" />
        您的浏览器不支持HTML5视频。
    </video>

    <p>视频时长：<span id="durationDisplay">加载中...</span></p>

    <script src="app.js"></script>
</body>
</html>

在上述HTML中：

Visla

AI视频生成器，快速轻松地将您的想法转化为视觉上令人惊叹的视频。

100 查看详情 Visla

：这个元素将用于显示获取到的视频时长。

J*aScript实现：监听事件并获取时长

现在，我们需要编写J*aScript代码来监听 myVideo 元素的 loadedmetadata 事件，并在事件触发时获取 duration 属性的值，然后将其显示在 durationDisplay 元素中。

为了更好的用户体验，通常会将时长（以秒为单位）转换为更易读的格式，如“分钟:秒”或“小时:分钟:秒”。

// app.js
document.addEventListener('DOMContentLoaded', function() {
    const videoElement = document.getElementById('myVideo');
    const durationDisplay = document.getElementById('durationDisplay');

    // 辅助函数：将秒数格式化为 MM:SS 或 HH:MM:SS 格式
    function formatDuration(seconds) {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const remainingSeconds = Math.floor(seconds % 60);

        const formattedMinutes = String(minutes).padStart(2, '0');
        const formattedSeconds = String(remainingSeconds).padStart(2, '0');

        if (hours > 0) {
            const formattedHours = String(hours).padStart(2, '0');
            return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
        } else {
            return `${formattedMinutes}:${formattedSeconds}`;
        }
    }

    // 监听 loadedmetadata 事件
    videoElement.addEventListener('loadedmetadata', function() {
        if (videoElement.duration && !isNaN(videoElement.duration)) {
            const durationInSeconds = videoElement.duration;
            durationDisplay.textContent = formatDuration(durationInSeconds);
            console.log("视频时长 (秒):", durationInSeconds);
            console.log("视频时长 (格式化):", formatDuration(durationInSeconds));
        } else {
            durationDisplay.textContent = '无法获取时长';
            console.warn('视频元数据加载完成，但时长属性不可用。');
        }
    });

    // 错误处理：如果视频加载失败
    videoElement.addEventListener('error', function() {
        durationDisplay.textContent = '视频加载失败';
        console.error('视频加载失败，请检查链接或文件。');
    });

    // 如果视频已经加载了元数据（例如，页面缓存），则立即尝试获取时长
    // 检查 readyState 是否已达到 H*E_METADATA (2) 或更高
    if (videoElement.readyState >= 2) { 
        if (videoElement.duration && !isNaN(videoElement.duration)) {
            const durationInSeconds = videoElement.duration;
            durationDisplay.textContent = formatDuration(durationInSeconds);
            console.log("视频时长 (秒，DOM加载时已可用):", durationInSeconds);
        } else {
            durationDisplay.textContent = '无法获取时长';
            console.warn('DOM加载时视频元数据已就绪，但时长属性不可用。');
        }
    }
});

在上述J*aScript代码中：

DOMContentLoaded: 确保在DOM完全加载后再执行脚本，避免元素未找到的问题。
formatDuration 函数: 这是一个辅助函数，用于将原始的秒数转换为 MM:SS 或 HH:MM:SS 格式，提高了可读性。
videoElement.addEventListener('loadedmetadata', ...): 这是核心部分，当视频的元数据加载完成后，回调函数会被执行。
videoElement.duration: 在回调函数内部，我们访问 videoElement.duration 来获取视频总时长。
isNaN(videoElement.duration): 检查 duration 是否为有效数字，因为在某些情况下（如视频未完全加载或发生错误），它可能返回 NaN 或 Infinity。
durationDisplay.textContent = ...: 将格式化后的时长更新到页面上的元素中。
错误处理: 添加 error 事件监听器，以便在视频加载失败时向用户提供反馈。
readyState 检查: 在 DOMContentLoaded 时，检查 videoElement.readyState。如果视频的元数据已经加载（readyState >= 2，即 HTMLMediaElement.H*E_METADATA），则可以直接获取时长，这对于页面缓存或快速加载的场景很有用，避免了等待事件的延迟。

完整示例

将上述HTML和J*aScript代码分别保存为 index.html 和 app.js，并确保 app.js 文件通过标签在 index.html 中正确引用。打开 index.html，您将看到视频播放器及其下方显示的视频时长。

注意事项

跨域问题: 如果视频文件与您的网页不在同一个域下，可能会遇到跨域（CORS）问题。在这种情况下，浏览器可能无法加载视频或其元数据。确保视频服务器配置了正确的CORS头。
视频格式支持: 确保您提供的视频格式（如MP4）被主流浏览器广泛支持。否则，视频可能无法播放，也无法获取时长。
网络状况: 视频时长依赖于视频元数据的加载。在网络状况不佳时，获取时长可能会有延迟。
preload 属性: preload="metadata" 可以帮助浏览器更快地获取时长，但它只是一个提示，浏览器不一定会严格遵守。如果设置为 none，则需要用户交互（如点击播放）才能加载元数据。
精度: duration 属性返回的时长通常是浮点数，表示秒数，精度可能因视频编码而异。在显示时进行四舍五入或格式化是良好的实践。