JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>

JavaScript

// create our popcorn instance
var popcorn = Popcorn( "#video" );

// set preload to metadeta, which gets us information like the videos dimensions, duration, etc
popcorn.preload( "metadata" );

// function to show our data once its been preloaded
var rdyState = function() {
    
    if ( popcorn.media.readyState >= 2 ) {
        
      console.log( popcorn.duration() );
      console.log( popcorn.media.width );
      console.log( popcorn.media.height );
    } else {
        setTimeout( rdyState, 10 );
    }
}
    
// call our function
rdyState();