HTML获取视频时长方法解析

本文深入解析了在网页中利用HTML5 video元素精准获取视频时长的核心方法：通过监听`loadedmetadata`事件确保元数据加载完成后再读取`duration`属性，并结合`preload="metadata"`优化性能；同时提供了将秒数格式化为直观“分:秒”显示的实用函数，还重点提醒开发者需妥善处理无效资源、跨域限制及直播流返回`Infinity`等常见异常，帮助你避开坑点，写出健壮可靠的视频时长获取逻辑。

在网页中获取视频时长，可以通过 HTML5 的 video 元素结合 JavaScript 实现。当视频元数据加载完成后，JavaScript 就能读取其总时长。

1. 使用 video 元素和 loadedmetadata 事件

视频的时长信息在元数据加载后才可用，因此需要监听 loadedmetadata 事件来确保可以正确获取 duration 属性。

说明：
- preload="metadata" 告诉浏览器只需加载视频元数据（不加载整个视频），提高效率。
- video.duration 返回视频总时长（单位：秒），可能是小数（如 120.25 表示 120.25 秒）。

2. 处理时长格式化（转换为分:秒）

原始 duration 是秒数，通常需要格式化为更易读的形式（如 MM:SS）。

举例：125 秒 → 输出 "2:05"

3. 注意事项与常见问题

• 如果视频未设置 src 或资源无效，duration 可能为 NaN 或 Infinity，需做判断。
• 使用网络路径时，确保视频支持跨域请求（CORS 配置正确）。
• 直播流视频可能返回 Infinity 作为 duration，应避免依赖固定时长。

基本上就这些。只要监听 loadedmetadata 事件，再读取 duration 属性，就能准确获取视频时长。不复杂但容易忽略元数据加载时机。

今天关于《HTML获取视频时长方法解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！