本文详细介绍了如何在前端通过javascript从html `
理解视频时长获取机制
在网页中展示视频时，我们经常需要获取其总时长并显示给用户。HTML5的
为了确保获取到准确的时长，我们需要等待视频的元数据加载完毕。HTMLMediaElement 提供了一系列事件来监听媒体加载状态，其中 loadeddata 事件是获取视频时长的理想时机。当 loadeddata 事件触发时，表示视频的当前帧数据已经加载完成，并且视频的尺寸、时长等元数据也已可用。
核心实现：使用 loadeddata 事件
获取视频时长的关键在于监听 loadeddata 事件。一旦该事件触发，我们就可以安全地访问
HTML 结构
首先，我们需要一个
立即学习“前端免费学习笔记（深入）”；
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
<!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>
<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 事件触发稍晚。确保在实际设备上进行测试。
总结
通过利用HTML5
