本教程详细介绍了如何在web页面中利用html5
在现代Web开发中，经常需要在页面上嵌入视频并显示其相关信息，其中视频的播放时长是一个常见的需求。虽然我们可以在HTML中简单地使用 <video> 标签来播放视频，但要获取其精确时长并显示出来，则需要借助JavaScript和HTML5 Video API的强大功能。本文将详细指导您如何实现这一目标。
核心概念：视频时长与加载事件
HTML5的 <video> 元素提供了一个 duration 属性，它返回视频的总时长，单位为秒。然而，这个属性并非在视频元素加载时立即可用。浏览器需要先下载并解析视频的元数据（如时长、尺寸、编码信息等），然后 duration 属性才会被填充。
为了确保在 duration 属性可用时进行访问，我们需要监听视频元素的特定事件。最常用的事件是 loadedmetadata 和 loadeddata：
- loadedmetadata: 当视频的元数据（包括时长、尺寸、文本轨道等）加载完毕时触发。这是获取视频时长的理想时机，因为它发生在视频数据开始加载之前，效率更高。
- loadeddata: 当视频的第一帧数据加载完成，并且可以开始播放时触发。这个事件比 loadedmetadata 稍晚，但同样可以用来获取时长。
通常，为了尽快获取时长信息，推荐使用 loadedmetadata 事件。
立即学习“前端免费学习笔记（深入）”；
HTML结构：嵌入视频并准备显示区域
首先，我们需要一个HTML结构来嵌入视频并提供一个区域来显示视频时长。给视频元素一个 id 便于JavaScript访问，同时添加一个 <span> 或 <p> 标签来承载时长信息。
<!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-bottom: 10px; }
#durationDisplay { font-weight: bold; color: #333; }
</style>
</head>
<body>
<h1>视频播放时长示例</h1>
<video id="myVideo" controls preload="metadata">
<source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722nb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4" />
您的浏览器不支持HTML5视频。
</video>
<p>视频时长：<span id="durationDisplay">加载中...</span></p>
<script src="app.js"></script>
</body>
</html>在上述HTML中：
- <video id="myVideo" controls preload="metadata">：我们为视频元素指定了 id="myVideo"，添加了 controls 属性以显示播放器控件，preload="metadata" 属性则提示浏览器在页面加载时预加载视频的元数据，这有助于更快地获取时长。
- <span id="durationDisplay">：这个 <span> 元素将用于显示获取到的视频时长。
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代码中：
- DOMContentLoaded: 确保在DOM完全加载后再执行脚本，避免元素未找到的问题。
- formatDuration 函数: 这是一个辅助函数，用于将原始的秒数转换为 MM:SS 或 HH:MM:SS 格式，提高了可读性。
- videoElement.addEventListener('loadedmetadata', ...): 这是核心部分，当视频的元数据加载完成后，回调函数会被执行。
- videoElement.duration: 在回调函数内部，我们访问 videoElement.duration 来获取视频总时长。
- isNaN(videoElement.duration): 检查 duration 是否为有效数字，因为在某些情况下（如视频未完全加载或发生错误），它可能返回 NaN 或 Infinity。
- durationDisplay.textContent = ...: 将格式化后的时长更新到页面上的 <span> 元素中。
- 错误处理: 添加 error 事件监听器，以便在视频加载失败时向用户提供反馈。
- readyState 检查: 在 DOMContentLoaded 时，检查 videoElement.readyState。如果视频的元数据已经加载（readyState >= 2，即 HTMLMediaElement.HAVE_METADATA），则可以直接获取时长，这对于页面缓存或快速加载的场景很有用，避免了等待事件的延迟。
完整示例
将上述HTML和JavaScript代码分别保存为 index.html 和 app.js，并确保 app.js 文件通过 <script src="app.js"></script> 标签在 index.html 中正确引用。打开 index.html，您将看到视频播放器及其下方显示的视频时长。
注意事项
- 跨域问题: 如果视频文件与您的网页不在同一个域下，可能会遇到跨域（CORS）问题。在这种情况下，浏览器可能无法加载视频或其元数据。确保视频服务器配置了正确的CORS头。
- 视频格式支持: 确保您提供的视频格式（如MP4）被主流浏览器广泛支持。否则，视频可能无法播放，也无法获取时长。
- 网络状况: 视频时长依赖于视频元数据的加载。在网络状况不佳时，获取时长可能会有延迟。
- preload 属性: preload="metadata" 可以帮助浏览器更快地获取时长，但它只是一个提示，浏览器不一定会严格遵守。如果设置为 none，则需要用户交互（如点击播放）才能加载元数据。
- 精度: duration 属性返回的时长通常是浮点数，表示秒数，精度可能因视频编码而异。在显示时进行四舍五入或格式化是良好的实践。
总结
通过利用HTML5 <video> 元素的 duration 属性和 loadedmetadata 事件，我们可以可靠地从视频链接中提取播放时长并将其动态地显示在网页上。结合适当的事件监听、错误处理和时长格式化，您可以为用户提供一个功能完善且用户友好的视频播放体验。理解视频加载生命周期和相关事件是实现这一功能的关键。
