Video upload sample with duration and video sample after selecting a file.

index.html

<!-- This sample uses TailwindCSS, it works without but will not have any styling. -->
<div class="container mx-auto py-12 font-sans">
  <input type="file" class="bg-gray-100 p-5 block border mb-2" />
  <div class="duration py-2">Duration:<span class="font-bold px-2"></span></div>
  <div class="progress py-2"></div>
  <div class="video-sample w-4/12 bg-gray-200 shadow-md rounded border">   </div>
</div>

script.js

// This sample uses Babel.
let file = document.querySelector('input');
let durationElem = document.querySelector('.duration span');
let progress = document.querySelector('.progress');
let videoSample = document.querySelector('.video-sample');

window.addEventListener('DOMContentLoaded', (event) => {
    file.addEventListener('change', runAfterChange);
});

async function runAfterChange(e) {
      const video = await getVideo(e.target.files[0]);
      videoSample.appendChild(video);
      durationElem.innerHTML = Math.round(video.duration) + ' minutes';
      startUpload();
    }

const getVideo = (file) =>
  new Promise((resolve) => {
    let video = document.createElement('video');
    video.src = URL.createObjectURL(file);
    video.onloadedmetadata = () => resolve(video);
  });

function startUpload() {
  progress.innerHTML = 'Starting upload..';
}

style.css

.video-sample {
  min-height: 300px;
}