本文将介绍如何使用 JavaScript 从视频链接中提取视频时长。通过监听 `loadeddata` 事件，确保视频元数据加载完毕后，即可获取准确的时长信息。本文提供详细的代码示例，帮助开发者轻松实现视频时长的提取和展示。
使用 JavaScript 获取视频时长
在网页中展示视频时，有时需要获取视频的时长并显示给用户。由于视频的元数据（包括时长）需要一定时间加载，因此直接访问视频元素的 duration 属性可能无法立即获取到正确的值。正确的做法是监听视频元素的 loadeddata 事件，在该事件触发后，再获取视频时长。
HTML 结构
首先，需要在 HTML 中添加一个 video 标签，并指定视频的 src 属性。
立即学习“Java免费学习笔记（深入）”；
视频时长
JavaScript 代码
接下来，使用 JavaScript 获取视频元素，并监听 loadeddata 事件。
let video = document.getElementById("myVideo");video.addEventListener('loadeddata', function() { console.log("视频时长:", video.duration); // 在这里可以进行其他操作，例如将时长显示在页面上}, false);function getVideoLength() { alert(video.duration);}
代码解释
document.getElementById(“myVideo”): 获取 ID 为 “myVideo” 的视频元素。video.addEventListener(‘loadeddata’, function() { … }, false);: 为视频元素添加一个事件监听器，监听 loadeddata 事件。当视频的元数据加载完毕后，该事件会被触发。console.log(“视频时长:”, video.duration);: 在 loadeddata 事件处理函数中，使用 video.duration 获取视频时长，并输出到控制台。video.duration 的单位是秒。getVideoLength(): 点击按钮时，弹窗显示视频时长。
完整示例
获取视频时长 视频时长
let video = document.getElementById("myVideo"); video.addEventListener('loadeddata', function() { console.log("视频时长:", video.duration); // 在这里可以进行其他操作，例如将时长显示在页面上 }, false); function getVideoLength() { alert(video.duration); }
注意事项
确保视频链接是有效的，并且可以被浏览器访问。loadeddata 事件只会在视频元数据加载完毕后触发一次。video.duration 返回的是视频的总时长，单位为秒。如果需要显示为更友好的格式（例如 “分钟:秒”），需要进行格式化。
总结
通过监听 loadeddata 事件，可以确保在视频元数据加载完毕后获取视频时长。这是一种可靠的方法，可以避免因元数据未加载而导致获取时长失败的问题。希望本文能够帮助你成功获取视频时长并在你的项目中应用。
以上就是获取视频时长：JavaScript 实现方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1597184.html
微信扫一扫 
支付宝扫一扫 
