JSFiddle - React, Tailwind, and code Playground

by Peter Galiba

HTML

<figure>
  <video id="video" preload="metadata"
    src="https://cdn.theguardian.tv/mainwebsite/2015/07/20/150716YesMen_desk.mp4"
    width="320" height="240" controls="controls"></video>  
  <figcaption id="duration"></figcaption>
</figure>

JavaScript

(function() {
  var video = document.getElementById('video')
  	, duration = video.duration || null
    
  if (duration) {
  	displayDuration(duration)
  } else {
    video.addEventListener('durationchange', function(event) {
      duration = event.target.duration
      displayDuration(duration)
    })
  }
  
  function displayDuration(d) {
    document.getElementById('duration').textContent = 'Duration: ' + Math.round(d * 1000) + 'ms'
    // alert after 1 seconds
		setTimeout(function() {
      alert(duration)
    }, 1000)
  }

}())