本文详细介绍了如何在%ignore_a_1%通过javascript从html `
理解视频时长获取机制
在网页中展示视频时，我们经常需要获取其总时长并显示给用户。HTML5的
为了确保获取到准确的时长，我们需要等待视频的元数据加载完毕。HTMLMediaElement 提供了一系列事件来监听媒体加载状态，其中 loadeddata 事件是获取视频时长的理想时机。当 loadeddata 事件触发时，表示视频的当前帧数据已经加载完成，并且视频的尺寸、时长等元数据也已可用。
核心实现：使用 loadeddata 事件
获取视频时长的关键在于监听 loadeddata 事件。一旦该事件触发，我们就可以安全地访问
HTML 结构
首先，我们需要一个
立即学习“前端免费学习笔记（深入）”；
获取视频时长教程 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; }视频时长提取示例
视频时长: 加载中...
短视频去水印微信小程序查看详情抖猫高清去水印微信小程序，源码为短视频去水印微信小程序全套源码，包含微信小程序端源码，服务端后台源码，支持某音、某手、某书、某站短视频平台去水印，提供全套的源码，实现功能包括：1、小程序登录授权、获取微信头像、获取微信用户2、首页包括：流量主已经对接、去水印连接解析、去水印操作指导、常见问题指引3、常用工具箱：包括视频镜头分割（可自定义时长分割）、智能分割（根据镜头自动分割）、视频混剪、模糊图片高
0
在上述 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
以上就是从视频链接中提取视频时长的前端实现教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1598281.html
微信扫一扫 
支付宝扫一扫 
