JS获取视频的长宽和时长，并实现上传预览

前言

新接到一个需求，需要在上传视频时，对视频的分辨率和时长做一个限制，如果不符合规范则无法上传。这个需求在前端和后端都可以完成，但为了用户体验，还是放在前端来完成比较好。

解决方案

经过调查，可以使用如下的方法来处理：拿到 file对象 后，通过 URL.createObjectURL 将 file对象 转化为存放 blob 信息的 url。之后再创建一个 video实体Dom，然后通过 loadedmetadata 事件获取到视频的信息，该事件是异步的，所以封装成一个 Promise 处理，代码如下：

new Promise(resolve => {
  let videoElement = document.createElement('video');
  // 注意，这里的file必须是`file`类型对象
  videoElement.src = URL.createObjectURL(new Blob([file]));
  console.log(videoElement, 'videoElement')
  videoElement.addEventListener('loadedmetadata', function() {
      // 释放createObjectURL创建的对象
      URL.revokeObjectURL(this.src);
      resolve({
          videoWidth: videoElement.videoWidth, // 尺寸宽
          videoHeight: videoElement.videoHeight, // 尺寸高
          duration: videoElement.duration, // 视频时长 1表示一秒
      });
  });
}).then(videoInfo => {
    console.log(videoInfo, "视频信息")
});