有趣且重要的JS知识合集（15）前端上传视频后获取视频的相关信息

 通过视频文件上传后监听loadedmetadata事件来获取视频属性

getVideoInfo(file) {
  return new Promise(resolve => {
    const videoElement = document.createElement('video')
    videoElement.src = URL.createObjectURL(file)
    videoElement.addEventListener('loadedmetadata', function() {
      resolve({
        duration: videoElement.duration,
        width: videoElement.videoWidth,
        height: videoElement.videoHeight
      })
    })
  })
}

使用方式

<div onclick="doInput">上传</div>

<script>
          doInput() {
            const inputObj = document.createElement('input');
            inputObj.addEventListener('change', this.readFile, false);
            inputObj.type = 'file';
            inputObj.click();
          },
          readFile() {
            const file = this.files[0]; // 获取input输入的文件
          },
          getVideoInfo(file) {
              return new Promise(resolve => {
                const videoElement = document.createElement('video')
                videoElement.src = URL.createObjectURL(file)
                videoElement.addEventListener('loadedmetadata', function() {
                resolve({
                    duration: videoElement.duration,
                    width: videoElement.videoWidth,
                    height: videoElement.videoHeight
                  })
                })
              })
          }
</script>