JSFiddle - React, Tailwind, and code Playground

by Alexander Gusman

HTML

<input type="file" id="videoUpload" accept="video/*" />

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  const uploadButton = document.getElementById('videoUpload');
  uploadButton.addEventListener("change", function (ev) {
  	const { files } = ev.currentTarget;
    const video = document.createElement('video');
  	video.preload = 'metadata';
    video.onloadedmetadata = function() {
      window.URL.revokeObjectURL(files[0]); // Release url from memory
      alert(`Duration is ${parseInt(video.duration)}s, video width is ${video.videoWidth}, height is ${video.videoHeight}`)
    }

  	video.src = URL.createObjectURL(files[0]);
  });
});