获取视频时长：J*aScript 实现方案

获取视频时长：javascript 实现方案

本文将介绍如何使用 J*aScript 从视频链接中提取视频时长。通过监听 `loadeddata` 事件，确保视频元数据加载完毕后，即可获取准确的时长信息。本文提供详细的代码示例，帮助开发者轻松实现视频时长的提取和展示。

使用 J*aScript 获取视频时长

在网页中展示视频时，有时需要获取视频的时长并显示给用户。由于视频的元数据（包括时长）需要一定时间加载，因此直接访问视频元素的 duration 属性可能无法立即获取到正确的值。正确的做法是监听视频元素的 loadeddata 事件，在该事件触发后，再获取视频时长。

HTML 结构

首先，需要在 HTML 中添加一个 video 标签，并指定视频的 src 属性。

<h1>视频时长</h1>
<button onclick="getVideoLength()" type="button">获取视频长度</button><br>

<video id="myVideo">
    <source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4" />
</video>

J*aScript 代码

接下来，使用 J*aScript 获取视频元素，并监听 loadeddata 事件。

AI at Meta

Facebook 旗下的AI研究平台

72 查看详情 AI at Meta

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(): 点击按钮时，弹窗显示视频时长。

完整示例

<!DOCTYPE html>
<html>
<head>
    <title>获取视频时长</title>
</head>
<body>
    <h1>视频时长</h1>
    <button onclick="getVideoLength()" type="button">获取视频长度</button><br>

    <video id="myVideo">
        <source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4" />
    </video>

    <script>
        let video = document.getElementById("myVideo");

        video.addEventListener('loadeddata', function() {
            console.log("视频时长:", video.duration);
            // 在这里可以进行其他操作，例如将时长显示在页面上
        }, false);

        function getVideoLength() {
            alert(video.duration);
        }
    </script>
</body>
</html>

注意事项

确保视频链接是有效的，并且可以被浏览器访问。
loadeddata 事件只会在视频元数据加载完毕后触发一次。
video.duration 返回的是视频的总时长，单位为秒。如果需要显示为更友好的格式（例如 "分钟:秒"），需要进行格式化。

总结

通过监听 loadeddata 事件，可以确保在视频元数据加载完毕后获取视频时长。这是一种可靠的方法，可以避免因元数据未加载而导致获取时长失败的问题。希望本文能够帮助你成功获取视频时长并在你的项目中应用。

以上就是获取视频时长：J*aScript 实现方案的详细内容，更多请关注其它相关文章！

# 全选 # 外贸网站搭建推广流程 # 搜索引擎seo课程 # 广西seo教程哪个好用 # 白山关键词排名快速入门 # 网站建设投标书 # 辽宁seo推广方案 # 创享互动平台营销推广 # 河北关键词排名优化方式 # seo优化提成 # 搜动漫关键词排名 # 会在 # 单引号 # 的是 # 自适应 # javascript # 双击 # 完毕后 # 在这里 # 加载 # 时长 # 视频时长 # google # ios # app # 浏览器 # go # html # java

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-11-20

4008744355

获取视频时长：J*aScript 实现方案

使用 J*aScript 获取视频时长

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

4008744355

服务/方案/案例/支持

关于我们

Notice