JSFiddle - React, Tailwind, and code Playground

by Kunal Virk

HTML

<button type="button" id="getDuration">Get video length</button><br>
 
<video id="myVideo" width="320" height="176" controls>
  <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<p class="vid-duration"></p>

JavaScript

var vid = document.getElementById("myVideo");
var vdur = document.querySelector('.vid-duration');
var trigger = document.querySelector('#getDuration');

trigger.addEventListener('click', myFunction);

function myFunction() { 
  var dur = vid.duration;
  
  vdur.innerText = (dur/60).toFixed(1);
}