通过监听video元素的loadedmetadata事件可准确获取视频时长，结合preload=”metadata”提升加载效率，并利用duration属性获得秒数后格式化为分:秒显示，需注意处理无效资源或直播流导致的NaN与Infinity异常情况。
在网页中获取视频时长，可以通过 HTML5 的 video 元素结合 JavaScript 实现。当视频元数据加载完成后，JavaScript 就能读取其总时长。
1. 使用 video 元素和 loadedmetadata 事件
视频的时长信息在元数据加载后才可用，因此需要监听 loadedmetadata 事件来确保可以正确获取 duration 属性。
示例代码：
const video = document.getElementById(‘myVideo’);
video.addEventListener(‘loadedmetadata’, function() {
console.log(‘视频时长：’ + video.duration + ‘ 秒’);
});
说明：
– preload=”metadata” 告诉浏览器只需加载视频元数据（不加载整个视频），提高效率。
– video.duration 返回视频总时长（单位：秒），可能是小数（如 120.25 表示 120.25 秒）。
2. 处理时长格式化（转换为分:秒）
原始 duration 是秒数，通常需要格式化为更易读的形式（如 MM:SS）。
立即学习“Java免费学习笔记（深入）”；
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return minutes + ‘:’ + (secs < 10 ? '0' : '') + secs;
}
video.addEventListener(‘loadedmetadata’, function() {
console.log(‘格式化时长：’ + formatTime(video.duration));
});
举例：125 秒 → 输出 “2:05”
3. 注意事项与常见问题
如果视频未设置 src 或资源无效，duration 可能为 NaN 或 Infinity，需做判断。使用网络路径时，确保视频支持跨域请求（CORS 配置正确）。直播流视频可能返回 Infinity 作为 duration，应避免依赖固定时长。
基本上就这些。只要监听 loadedmetadata 事件，再读取 duration 属性，就能准确获取视频时长。不复杂但容易忽略元数据加载时机。
以上就是html怎么获取视频时长_html视频时长获取JavaScript的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1583681.html
微信扫一扫 
支付宝扫一扫 
