JS 获取视频时长|极客笔记

JS 获取视频时长

在网页开发中，我们经常会需要获取视频的时长信息，以便展示给用户或者做进一步的处理。在JavaScript中，获取视频的时长并不复杂，本文将详细介绍如何使用JavaScript获取视频的时长。

获取 video 元素

要获取视频的时长，首先需要获取视频元素。可以通过document.getElementById来获取视频元素，或者通过document.querySelector来获取视频元素。例如：

<video id="video" src="video.mp4"></video>

let video = document.getElementById('video');
// 或者
let video = document.querySelector('#video');

获取视频时长

获取视频时长的方法是通过视频元素的duration属性。视频元素的duration属性返回的是一个表示时间长度的浮点数，单位是秒。如果视频还没有加载完成，duration将返回NaN，因此通常需要监听视频的loadedmetadata事件。

video.addEventListener('loadedmetadata', function() {
    let duration = video.duration;
    console.log('视频时长为：', duration, '秒');
});

完整示例

下面是一个完整的示例，演示如何使用JavaScript获取视频时长：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取视频时长示例</title>
</head>
<body>
<video id="video" src="video.mp4"></video>
<script>
let video = document.getElementById('video');
video.addEventListener('loadedmetadata', function() {
    let duration = video.duration;
    console.log('视频时长为：', duration, '秒');
});
</script>
</body>
</html>

在上面的示例中，当视频加载元数据完成后，会打印视频的时长信息到控制台上。可以根据具体需求，将时长信息展示在页面上，或者进行其他操作。