使用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>