本教程详细介绍了如何在web页面中利用html5
在现代Web开发中，经常需要在页面上嵌入视频并显示其相关信息，其中视频的播放时长是一个常见的需求。虽然我们可以在HTML中简单地使用
核心概念：视频时长与加载事件
HTML5的
为了确保在 duration 属性可用时进行访问，我们需要监听视频元素的特定事件。最常用的事件是 loadedmetadata 和 loadeddata：
- loadedmetadata: 当视频的元数据（包括时长、尺寸、文本轨道等）加载完毕时触发。这是获取视频时长的理想时机，因为它发生在视频数据开始加载之前，效率更高。
- loadeddata: 当视频的第一帧数据加载完成，并且可以开始播放时触发。这个事件比 loadedmetadata 稍晚，但同样可以用来获取时长。
通常，为了尽快获取时长信息，推荐使用 loadedmetadata 事件。
立即学习“前端免费学习笔记（深入）”；
HTML结构：嵌入视频并准备显示区域
首先，我们需要一个HTML结构来嵌入视频并提供一个区域来显示视频时长。给视频元素一个 id 便于JavaScript访问，同时添加一个 或 标签来承载时长信息。 视频时长：加载中... 在上述HTML中： 现在，我们需要编写JavaScript代码来监听 myVideo 元素的 loadedmetadata 事件，并在事件触发时获取 duration 属性的值，然后将其显示在 durationDisplay 元素中。 为了更好的用户体验，通常会将时长（以秒为单位）转换为更易读的格式，如“分钟:秒”或“小时:分钟:秒”。 在上述JavaScript代码中： 将上述HTML和JavaScript代码分别保存为 index.html 和 app.js，并确保 app.js 文件通过 标签在 index.html 中正确引用。打开 index.html，您将看到视频播放器及其下方显示的视频时长。 通过利用HTML5
视频播放时长示例
JavaScript实现：监听事件并获取时长
// 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加载时视频元数据已就绪，但时长属性不可用。');
}
}
});
完整示例
注意事项
总结
