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

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

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

HTML5的

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

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

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

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

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

标签来承载时长信息。

    
    
    
    


    
视频播放时长示例

    

    
视频时长：加载中...

    

在上述HTML中：

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

JavaScript实现：监听事件并获取时长

现在，我们需要编写JavaScript代码来监听 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 是否已达到 HAVE_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加载时视频元数据已就绪，但时长属性不可用。');
        }
    }
});

在上述JavaScript代码中：

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

完整示例

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

注意事项

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

总结

通过利用HTML5