js获取上传视频的时长（video标签获取视频时长）

最新推荐文章于 2024-05-13 10:55:53 发布

黄大侠98k

最新推荐文章于 2024-05-13 10:55:53 发布

阅读量4.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript html html5 jquery css3

本文链接：https://blog.csdn.net/huangxingjie/article/details/105800660

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML5和JavaScript结合的方式，通过video标签来获取上传视频文件的时长。具体实现包括利用File API读取文件，创建Object URL，以及使用Audio对象的loadedmetadata事件监听器来捕获并输出视频的时长。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

h5配合javascript 通过video标签获取视频时长

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" id='upload'>
<button onclick='getVideoTime()'>获取时长</button>
</body>
<script>
    function getVideoTime() {
        var fileVIdeo =  document.getElementById("upload").files[0]
        var url = URL.createObjectURL(fileVIdeo);
        var audioElement = new Audio(url);
        audioElement.addEventListener("loadedmetadata", function (_event) {
            var duration = audioElement.duration;
            console.log("视频时长："+duration+"秒");
        });
    }
</script>
</html>