本文详细介绍了如何在前端通过javascript从html `

理解视频时长获取机制

在网页中展示视频时，我们经常需要获取其总时长并显示给用户。HTML5的

为了确保获取到准确的时长，我们需要等待视频的元数据加载完毕。HTMLMediaElement 提供了一系列事件来监听媒体加载状态，其中 loadeddata 事件是获取视频时长的理想时机。当 loadeddata 事件触发时，表示视频的当前帧数据已经加载完成，并且视频的尺寸、时长等元数据也已可用。

核心实现：使用 loadeddata 事件

获取视频时长的关键在于监听 loadeddata 事件。一旦该事件触发，我们就可以安全地访问

HTML 结构

首先，我们需要一个

获取视频时长教程

视频时长提取示例

视频时长: 加载中...

在上述 HTML 代码中：

我们创建了一个 id 为 myVideo 的
标签指定了视频的URL和类型。
controls 属性用于显示视频播放器自带的控制条。
id 为 durationDisplay 的元素将用于显示获取到的视频时长。

JavaScript 逻辑

接下来，在 JavaScript 文件（例如 script.js）中，我们将获取视频元素，并为其添加 loadeddata 事件监听器。

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

    if (videoElement) {
        // 添加 loadeddata 事件监听器
        videoElement.addEventListener('loadeddata', function() {
            // 当视频元数据加载完成后，duration 属性即可用
            const durationInSeconds = videoElement.duration;
            console.log("视频时长 (秒):", durationInSeconds);

            // 将秒数转换为 HH:MM:SS 格式
            const formattedDuration = formatDuration(durationInSeconds);
            durationDisplay.textContent = formattedDuration;
        }, false);

        // 如果视频加载失败，也可以监听 error 事件
        videoElement.addEventListener('error', function() {
            durationDisplay.textContent = "视频加载失败或无法获取时长。";
            console.error("视频加载错误:", videoElement.error);
        });

    } else {
        console.error("未找到ID为 'myVideo' 的视频元素。");
        durationDisplay.textContent = "视频元素未找到。";
    }

    /**
     * 将秒数转换为 HH:MM:SS 或 MM:SS 格式
     * @param {number} seconds - 视频总秒数
     * @returns {string} 格式化后的时长字符串
     */
    function formatDuration(seconds) {
        if (isNaN(seconds) || !isFinite(seconds)) {
            return "未知时长";
        }
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const remainingSeconds = Math.floor(seconds % 60);

        const pad = (num) => String(num).padStart(2, '0');

        if (hours > 0) {
            return `${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`;
        } else {
            return `${pad(minutes)}:${pad(remainingSeconds)}`;
        }
    }
});

代码解析：

document.addEventListener('DOMContentLoaded', ...)：确保DOM完全加载后再执行脚本，防止获取不到视频元素。
videoElement.addEventListener('loadeddata', function() { ... })：这是核心部分。当视频的元数据（包括时长）加载完毕后，此回调函数将被执行。
const durationInSeconds = videoElement.duration;：在 loadeddata 事件触发后，videoElement.duration 将返回视频的总时长，单位是秒。
formatDuration(durationInSeconds)：这是一个辅助函数，用于将原始的秒数转换为更友好的 MM:SS 或 HH:MM:SS 格式进行显示。
videoElement.addEventListener('error', ...)：添加错误处理机制，以便在视频加载失败时向用户提供反馈。

注意事项与最佳实践

网络延迟与用户体验：loadeddata 事件的触发时间取决于视频文件大小和用户的网络速度。在事件触发前，可以显示“加载中...”或一个加载指示器，提升用户体验。
duration 属性的返回值：duration 属性返回的是一个浮点数，表示视频的总秒数。您可能需要对其进行格式化，以 HH:MM:SS 或 MM:SS 的形式展示。
视频源的可用性：确保视频链接是有效的，并且服务器允许跨域访问（如果您的网页和视频不在同一个域名下）。对于常见的云存储服务（如Firebase Storage），通常会自动处理CORS问题。
其他加载事件：除了 loadeddata，还有其他与媒体加载相关的事件，例如：
- loadstart: 浏览器开始加载媒体数据。
- progress: 浏览器正在下载媒体数据。
- canplay: 浏览器认为可以播放媒体了，但可能需要缓冲。
- canplaythrough: 浏览器认为可以在不中断的情况下播放完整个媒体。根据具体需求，您可以选择监听最合适的事件。对于仅仅获取时长，loadeddata 通常是足够且高效的。
移动设备兼容性：在某些移动浏览器上，为了节省带宽，视频的预加载行为可能受到限制。这可能导致 loadeddata 事件触发稍晚。确保在实际设备上进行测试。