使用 FileReader 获取视频文件详细信息答案

【问题标题】：Getting video file details using FileReader使用 FileReader 获取视频文件详细信息
【发布时间】：2016-08-11 18:26:35
【问题描述】：

我有一个基于 Web 的用户界面，便于将文件拖放到容器 DIV 中。如果拖放的文件是图像，我使用以下代码：

let droppedFile = evt.dataTransfer.files[0];
let img = new Image();
let reader = new FileReader();
reader.onloadend = function() {
  img.src = reader.result;
  let fileDetails = {};
  let n = droppedFile.name.indexOf('.');
  fileDetails.name = droppedFile.name.substring(0, n != -1 ? n : droppedFile.name.length);
  fileDetails.extension = droppedFile.name.substring(n != -1 ? n+1 : '');
  fileDetails.fileType = droppedFile.type;
  fileDetails.width = img.naturalWidth;
  fileDetails.height = img.naturalHeight;
  // display fileDetails in another DIV...
}
reader.readAsDataURL(droppedFile);

我需要能够对视频文件（例如 MP4）做同样的事情。但是，我没有看到任何Video 元素，类似于Image 元素/构造函数。如何实例化视频元素，以便获得通用属性以及视频特定属性？

【问题讨论】：

标签： javascript video filereader

【解决方案1】：

您不需要使用 FileReader。使用以下代码：

const video = document.createElement('video')
video.addEventListener('loadedmetadata', event => {
  console.log(video.videoWidth, video.videoHeight)
})
video.src = URL.createObjectURL(droppedFile)

完整代码：

const dropzone = document.getElementById('dropzone')
dropzone.addEventListener('dragover', event => event.preventDefault())
dropzone.addEventListener('drop', event => {
  event.preventDefault()
  const droppedFile = event.dataTransfer.files[0]
  const video = document.createElement('video')
  video.addEventListener('loadedmetadata', event => {
  	console.log(video.videoWidth, video.videoHeight)
  })
  video.src = URL.createObjectURL(droppedFile)
})

*, ::before, ::after {
  box-sizing: border-box;
}
#dropzone {
  width: 600px;
  height: 300px;
  border: 2px dashed blue;
  border-radius: 3px;
  background-color: white;
  color: gray;
  font-family: sans-serif;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 400ms;
}
#dropzone:hover {
  cursor: pointer;
}

&lt;div id="dropzone"&gt;drop files here&lt;/div&gt;

【讨论】：

如果我不仅想要获取元数据，而且在用户完成查看元数据并单击上传按钮后不久将其上传到服务器，该怎么办？在这种情况下，我需要使用 FileReader API 吗？
@WebUser 是的。‌‌‍

【解决方案2】：

 var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = (e) => {
      var videoElement = document.createElement('video');
      videoElement.src = e.target.result;
      var timer = setInterval(() => {
        if (videoElement.readyState === 4) {
          if(videoElement.duration) {
            console.log(file)//the file object
            console.log(videoElement.duration) //video duration
          }
          clearInterval(timer);
        }
      }, 500)
    }
    reader.readAsDataURL(file);

【讨论】：