JSFiddle - React, Tailwind, and code Playground

by popcornjs

HTML

<script src="http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video id="video" controls src="http://download.blender.org/peach/trailer/trailer_400p.ogg"></video>
<div id="duration">Duration: </div>
<div id="dimensions">Dimensions: </div>

CSS

video {
    width: 300px;
    height: 200px;
}

JavaScript

var p = Popcorn( "#video" );

p.on( "loadedmetadata", function( e ) {
    var dimensionsDiv = document.getElementById( "dimensions" ),
        rect = dimensionsDiv.getBoundingClientRect();
    
    document.getElementById( "duration" ).innerHTML += this.duration();
    dimensionsDiv.innerHTML += "Left: " + rect.left + 
        ", Right: " + rect.right +
        ", Bottom: " + rect.bottom +
        ", Top: " + rect.top;
});

p.play();