本文详细介绍了如何在前端通过javascript从html `
理解视频时长获取机制
在网页中展示视频时，我们经常需要获取其总时长并显示给用户。HTML5的 <video> 元素提供了一个 duration 属性，可以直接访问视频的时长。然而，由于视频文件通常较大，其元数据（包括时长信息）不会在页面加载时立即可用。尝试在视频尚未加载完成时访问 duration 属性，可能会得到 NaN 或 Infinity。
为了确保获取到准确的时长，我们需要等待视频的元数据加载完毕。HTMLMediaElement 提供了一系列事件来监听媒体加载状态，其中 loadeddata 事件是获取视频时长的理想时机。当 loadeddata 事件触发时，表示视频的当前帧数据已经加载完成，并且视频的尺寸、时长等元数据也已可用。
核心实现：使用 loadeddata 事件
获取视频时长的关键在于监听 loadeddata 事件。一旦该事件触发，我们就可以安全地访问 <video> 元素的 duration 属性。
HTML 结构
首先，我们需要一个 <video> 元素来播放视频，并为其指定一个 id，以便在 JavaScript 中方便地获取到它。同时，可以添加一个元素来显示视频时长。
立即学习“前端免费学习笔记（深入）”；
<!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 的 <video> 元素。
- <source> 标签指定了视频的URL和类型。
- controls 属性用于显示视频播放器自带的控制条。
- id 为 durationDisplay 的 <span> 元素将用于显示获取到的视频时长。
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 <video> 元素的 loadeddata 事件和 duration 属性，我们可以可靠地在前端获取视频时长。这种方法简单、高效，并且能够很好地适应异步加载的场景。结合适当的错误处理和时长格式化，您可以为用户提供一个功能完善且体验良好的视频播放界面。
