从视频链接中提取视频时长的前端实现教程-html教程-PHP中文网

从视频链接中提取视频时长的前端实现教程

碧海醫心

发布： 2025-11-23 09:57:25

原创

715人浏览过

从视频链接中提取视频时长的前端实现教程

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

理解视频时长获取机制

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

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

核心实现：使用 loadeddata 事件

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

HTML 结构

首先，我们需要一个

立即学习“前端免费学习笔记（深入）”；

<!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-top: 15px; }
        #durationDisplay { margin-top: 10px; font-weight: bold; }
    </style>
</head>
<body>
    <h1>视频时长提取示例</h1>

    <p>视频时长: <span id="durationDisplay">加载中...</span></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10960">
                            <img src="https://img.php.cn/upload/webcode/000/000/017/176442480337087.jpg" alt="短视频去水印微信小程序">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10960">短视频去水印微信小程序</a>
                            <p>抖猫高清去水印微信小程序，源码为短视频去水印微信小程序全套源码，包含微信小程序端源码，服务端后台源码，支持某音、某手、某书、某站短视频平台去水印，提供全套的源码，实现功能包括：1、小程序登录授权、获取微信头像、获取微信用户2、首页包括：流量主已经对接、去水印连接解析、去水印操作指导、常见问题指引3、常用工具箱：包括视频镜头分割（可自定义时长分割）、智能分割（根据镜头自动分割）、视频混剪、模糊图片高</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="短视频去水印微信小程序">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10960" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="短视频去水印微信小程序">
                        </a>
                    </div>
                

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

    <script src="script.js"></script>
</body>
</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 事件触发稍晚。确保在实际设备上进行测试。