本教程详细介绍了如何在web页面中利用%ignore_a_1%
在现代Web开发中，经常需要在页面上嵌入视频并显示其相关信息，其中视频的播放时长是一个常见的需求。虽然我们可以在HTML中简单地使用
核心概念：视频时长与加载事件
HTML5的
为了确保在 duration 属性可用时进行访问，我们需要监听视频元素的特定事件。最常用的事件是 loadedmetadata 和 loadeddata：
loadedmetadata: 当视频的元数据（包括时长、尺寸、文本轨道等）加载完毕时触发。这是获取视频时长的理想时机，因为它发生在视频数据开始加载之前，效率更高。loadeddata: 当视频的第一帧数据加载完成，并且可以开始播放时触发。这个事件比 loadedmetadata 稍晚，但同样可以用来获取时长。
通常，为了尽快获取时长信息，推荐使用 loadedmetadata 事件。
立即学习“前端免费学习笔记（深入）”；
HTML结构：嵌入视频并准备显示区域
首先，我们需要一个HTML结构来嵌入视频并提供一个区域来显示视频时长。给视频元素一个 id 便于JavaScript访问，同时添加一个 或
标签来承载时长信息。
获取视频播放时长 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; }视频播放时长示例
视频时长：加载中...
在上述HTML中：
：这个 元素将用于显示获取到的视频时长。
JavaScript实现：监听事件并获取时长
现在，我们需要编写JavaScript代码来监听 myVideo 元素的 loadedmetadata 事件，并在事件触发时获取 duration 属性的值，然后将其显示在 durationDisplay 元素中。
为了更好的用户体验，通常会将时长（以秒为单位）转换为更易读的格式，如“分钟:秒”或“小时:分钟:秒”。
// app.jsdocument.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 = …: 将格式化后的时长更新到页面上的 元素中。错误处理: 添加 error 事件监听器，以便在视频加载失败时向用户提供反馈。readyState 检查: 在 DOMContentLoaded 时，检查 videoElement.readyState。如果视频的元数据已经加载（readyState >= 2，即 HTMLMediaElement.HAVE_METADATA），则可以直接获取时长，这对于页面缓存或快速加载的场景很有用，避免了等待事件的延迟。
完整示例
将上述HTML和JavaScript代码分别保存为 index.html 和 app.js，并确保 app.js 文件通过 标签在 index.html 中正确引用。打开 index.html，您将看到视频播放器及其下方显示的视频时长。
注意事项
跨域问题: 如果视频文件与您的网页不在同一个域下，可能会遇到跨域（CORS）问题。在这种情况下，浏览器可能无法加载视频或其元数据。确保视频服务器配置了正确的CORS头。视频格式支持: 确保您提供的视频格式（如MP4）被主流浏览器广泛支持。否则，视频可能无法播放，也无法获取时长。网络状况: 视频时长依赖于视频元数据的加载。在网络状况不佳时，获取时长可能会有延迟。preload 属性: preload=”metadata” 可以帮助浏览器更快地获取时长，但它只是一个提示，浏览器不一定会严格遵守。如果设置为 none，则需要用户交互（如点击播放）才能加载元数据。精度: duration 属性返回的时长通常是浮点数，表示秒数，精度可能因视频编码而异。在显示时进行四舍五入或格式化是良好的实践。
总结
通过利用HTML5
以上就是使用HTML5 Video API在Web页面中获取视频播放时长的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1595766.html
微信扫一扫 
支付宝扫一扫 
