通过监听video元素的loadedmetadata事件可准确获取视频时长，结合preload="metadata"提升加载效率，并利用duration属性获得秒数后格式化为分:秒显示，需注意处理无效资源或直播流导致的NaN与Infinity异常情况。
在网页中获取视频时长，可以通过 HTML5 的 video 元素结合 JavaScript 实现。当视频元数据加载完成后，JavaScript 就能读取其总时长。
视频的时长信息在元数据加载后才可用，因此需要监听 loadedmetadata 事件来确保可以正确获取 duration 属性。
示例代码：
<script><br>
const video = document.getElementById('myVideo');<br><br>
video.addEventListener('loadedmetadata', function() {<br>
console.log('视频时长：' + video.duration + ' 秒');<br>
});<br>
</script>
说明：
- preload="metadata" 告诉浏览器只需加载视频元数据（不加载整个视频），提高效率。
- video.duration 返回视频总时长（单位：秒），可能是小数（如 120.25 表示 120.25 秒）。
原始 duration 是秒数，通常需要格式化为更易读的形式（如 MM:SS）。
抖猫高清去水印微信小程序，源码为短视频去水印微信小程序全套源码，包含微信小程序端源码，服务端后台源码，支持某音、某手、某书、某站短视频平台去水印，提供全套的源码，实现功能包括：1、小程序登录授权、获取微信头像、获取微信用户2、首页包括：流量主已经对接、去水印连接解析、去水印操作指导、常见问题指引3、常用工具箱：包括视频镜头分割（可自定义时长分割）、智能分割（根据镜头自动分割）、视频混剪、模糊图片高
0
立即学习“Java免费学习笔记（深入）”；
<script><br> function formatTime(seconds) {<br> const minutes = Math.floor(seconds / 60);<br> const secs = Math.floor(seconds % 60);<br> return minutes + ':' + (secs < 10 ? '0' : '') + secs;<br> }<br><br> video.addEventListener('loadedmetadata', function() {<br> console.log('格式化时长：' + formatTime(video.duration));<br> });<br> </script>
举例：125 秒 → 输出 "2:05"
基本上就这些。只要监听 loadedmetadata 事件，再读取 duration 属性，就能准确获取视频时长。不复杂但容易忽略元数据加载时机。
以上就是html怎么获取视频时长_html视频时长获取JavaScript的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
547
收藏
