<input type="file" id="video-upload">
<div id="meta"></div>

const fileUpload = document.getElementById("video-upload");

fileUpload.addEventListener("change", event => {
  const resultEl = document.getElementById("meta");
  const file = event.target.files[0];
  const videoEl = document.createElement("video");
  videoEl.src = window.URL.createObjectURL(file);
  
  // When the video metadata has loaded, check
  // the video width/height
  videoEl.onloadedmetadata = event => {
    window.URL.revokeObjectURL(videoEl.src);
    const { name, type } = file;
    const { videoWidth, videoHeight } = videoEl;
    
    resultEl.innerHTML = `
      Filename: ${name}<br/>
      Type: ${type}<br/>
      Size: ${videoWidth}px x ${videoHeight}px`;
  }
  
  // If there's an error, most likely because the file
  // is not a video, display an error.
  videoEl.onerror = () => {
    resultEl.innerHTML = 'Please upload a video file.';
  }
})