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

Question

我有一个基于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元素/构造函数。我如何去实例化一个视频元素，以便我可以获得通用属性以及视频特定属性？

Answer 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 => { 
 
    \t 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; 
 
}

<div id="dropzone">drop files here</div>