FileReaderを使用してビデオファイルの詳細を取得

Question

私は、ファイルをコンテナDIVにドラッグアンドドロップするのを容易にするWebベースのユーザーインターフェイスを用意しています。ドロップされたファイルが画像であれば、私は次のコードを使用し

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）と同じことを行うことができるようにする必要があります。しかし、Imageの要素/コンストラクタに似た、Video要素は表示されません。どのように動画要素のインスタンスを作成するのですか。一般的な属性と動画固有の属性を取得できますか？

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>