如何在 JavaScript 中获取视频时长

JavaScript 中可以通过 HTML5 新增的 HTMLMediaElement 对象来获取视频时长。HTMLMediaElement 对象是 <audio> 和 <video> 元素的接口，它们共享属性、方法和事件。下面我们就从以下几个方面来介绍如何在 JavaScript 中获取视频时长。

通过 Duration 属性获取

HTMLMediaElement 对象有一个名为 duration 的属性，它代表了当前媒体资源的总时长，单位为秒。我们可以通过下面的代码来获取视频的时长。

const videoElem = document.querySelector('video');
videoElem.addEventListener('loadedmetadata', () => {
  console.log(`视频时长为 ${videoElem.duration} 秒`);
});

在上面的代码中，我们首先获取了网页中的 <video> 元素，然后给它添加了 loadedmetadata 事件监听器。当视频的元数据加载完毕后，事件监听器会被触发，此时我们就可以通过 videoElem.duration 获取视频的时长。

需要注意的是，由于视频的元数据需要加载才能获取到时长，因此我们需要等待元数据加载完毕后再获取时长。这个过程需要时间，因此建议使用异步代码来获取时长。

通过 Timeupdate 事件获取

HTMLMediaElement 对象还有一个名为 currentTime 的属性，它代表了当前播放位置的时间，单位为秒。我们可以通过监听 timeupdate 事件来获取视频的实时播放位置，从而计算出视频的时长。下面是相关代码：

const videoElem = document.querySelector('video');
videoElem.addEventListener('loadedmetadata', () => {
  console.log(`视频时长为 ${videoElem.duration} 秒`);
});

videoElem.addEventListener('timeupdate', () => {
  if (!isNaN(videoElem.duration)) {
    console.log(`当前播放位置为 ${videoElem.currentTime} 秒`);
  }
});

在上面的代码中，我们在元数据加载完成后打印了视频的时长，然后监听了 timeupdate 事件，计算出当前播放位置和总时长的比例。当比例为 1 时，表示视频播放完毕。

通过 MediaMetadata API 获取

如果你想在视频加载之前获取视频时长的话，可以使用 MediaMetadata API。这个 API 可以在加载媒体资源之前获取媒体资源的元数据信息，从而获取到媒体资源的时长。下面是相关代码：

fetch('https://example.com/path/to/video.mp4')
  .then(response => response.blob())
  .then(blob => {
    return new Response(blob, {
      headers: { 'Content-Type': blob.type },
    }).arrayBuffer();
  })
  .then(arrayBuffer => {
    // 通过 MediaMetadata API 获取视频元数据
    const mediaMetadata = new MediaMetadata({
      duration: arrayBuffer.byteLength / 1024 / 1024,
    });

    const videoElem = document.createElement('video');
    videoElem.preload = 'metadata';
    videoElem.src = URL.createObjectURL(blob);
    videoElem.addEventListener('loadedmetadata', () => {
      console.log(`视频时长为 ${mediaMetadata.duration} 秒`);
    });
  });

在上面的代码中，我们使用了 fetch 函数从远程的视频 URL 中获取视频的二进制数据。然后我们使用 MediaMetadata 构造函数来创建一个媒体元数据对象，其中 duration 属性的值为视频文件的大小（单位为 MB）。接着创建一个新的 <video> 元素，设置 preload 属性为 metadata，告诉浏览器只加载视频的元数据。最后监听 loadedmetadata 事件，获取视频的时长。

总结

通过以上介绍，我们可以看出 JavaScript 中获取视频时长的方法比较简单，主要是利用 HTMLMediaElement 对象的属性和事件来获取。需要注意的是，在获取时长之前需要等待元数据加载完毕，这个过程需要时间。如果想在视频加载之前获取时长的话，可以使用 MediaMetadata API。