JS-获取视频总时长

介绍

本文主要介绍在获取到视频的URL之后，如何通过js方法获取视频的总时长，兼容了web页面、APP内嵌h5页面、小程序内嵌h5页面~

适用场景：

web页面、APP内嵌h5页面、小程序内嵌h5页面

JS代码：

一、获取视频时长方法

注：其中getENVIR、checkIfIOS方法见链接：https://timor419.github.io/2021/11/25/JS-getEnvironment/

getVideoDuration(url) {
  // IOS的微信小程序中无法触发onloadedmetadata
  if (this.getENVIR() === 'wxapp' && this.checkIfIOS()) {
    return new Promise((reslove) => {
      let audio = new Audio(url);
      audio.muted = true;
      audio.play().then(() => audio.pause());
      audio.addEventListener('loadedmetadata', function() {
        reslove(parseInt((audio.duration * 1000).toString(), 10));
      });
      audio.muted = false;
    });
  }
  return new Promise((reslove) => {
    let video = document.createElement('video');
    video.preload = 'metadata';
    video.src = url;
    video.onloadedmetadata = () => {
      reslove(parseInt((video.duration * 1000).toString(), 10));
      video = null;
    };
  });
},

二、调用方法

1 2	const duration = this.getVideoDuration('https://cdn.webuy.ai/static/lib/resource/2021/11/25/1637813076906_4250.mp4'); console.log('视频总时长：', duration);