本文介绍了如何使用 JavaScript 从视频链接中提取视频时长。通过监听 `loadeddata` 事件，确保视频元数据加载完毕后，即可访问视频的 `duration` 属性，从而获取视频的时长信息。本文提供详细的代码示例，帮助开发者轻松实现此功能。
在 Web 开发中，经常需要获取视频的时长信息，例如在视频播放器中显示视频总时长，或者用于其他与视频相关的逻辑处理。本文将详细介绍如何使用 JavaScript 从视频链接中提取视频时长，并提供可直接使用的代码示例。
核心思路：
要获取视频时长，首先需要确保视频的元数据（包括时长）已经加载完毕。在 HTML5 的
立即学习“Java免费学习笔记（深入）”；
实现步骤：
- HTML 结构：
首先，需要在 HTML 中添加一个
抖猫高清去水印微信小程序，源码为短视频去水印微信小程序全套源码，包含微信小程序端源码，服务端后台源码，支持某音、某手、某书、某站短视频平台去水印，提供全套的源码，实现功能包括：1、小程序登录授权、获取微信头像、获取微信用户2、首页包括：流量主已经对接、去水印连接解析、去水印操作指导、常见问题指引3、常用工具箱：包括视频镜头分割（可自定义时长分割）、智能分割（根据镜头自动分割）、视频混剪、模糊图片高
获取视频时长 视频时长
- JavaScript 代码：
接下来，编写 JavaScript 代码来监听 loadeddata 事件，并在事件触发后获取视频时长。
// script.js
let video = document.getElementById("myVideo");
video.addEventListener('loadeddata', function() {
console.log("视频元数据已加载，时长：", video.duration);
// 在此处可以将视频时长显示在页面上
}, false);
function getVideoLength() {
alert(video.duration);
}这段代码首先通过 document.getElementById("myVideo") 获取
- 完整示例：
将上述 HTML 和 JavaScript 代码保存为 index.html 和 script.js 文件，然后在浏览器中打开 index.html 文件。当视频元数据加载完成后，控制台会显示视频的时长。点击按钮会弹出视频的时长。
注意事项：
- 跨域问题： 如果视频链接与网页不在同一个域名下，可能会遇到跨域问题。需要配置 CORS 才能正常获取视频时长。
- 视频加载时间： 视频加载需要时间，特别是对于较大的视频文件。确保在视频元数据加载完成后再获取视频时长，否则可能会得到不正确的结果。
- 浏览器兼容性： loadeddata 事件在现代浏览器中都有很好的支持。如果需要兼容旧版本的浏览器，可以考虑使用一些 polyfill 或其他替代方案。
总结：
通过监听 loadeddata 事件并访问 video.duration 属性，可以轻松地从视频链接中提取视频时长。本文提供的代码示例可以直接使用，并可以根据实际需求进行修改和扩展。 希望本文能够帮助你更好地处理视频相关的 Web 开发任务。
