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>
<div id="percentage"></div>
<div id="paused"></div>

CSS

div { font-size: 30px; }

JavaScript

// create our popcorn instance, using frameAnimation to be super precise
var popcorn = Popcorn( "#video", { frameAnimation: true } );

// listen for timeupdate to update the percentage as the video is playing
popcorn.listen( "timeupdate", function( event ) {

    //update our percentage div with the percentage
    document.getElementById( "percentage" ).innerHTML = "" + ( this.played().end(0) / this.duration() ) * 100 + "%";
});

popcorn.listen( "paused", function( event ) {
		document.getElementById( "paused" ).innerHTML = "paused";
});

// play popcorn
popcorn.play();