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"> 
<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" );

// listen to timeupdate and check for how much of the video is seekable
popcorn.on( "timeupdate", function() {
    
    // if over half of the video has loaded
    if ( this.seekable().end() > this.duration() / 2) {
        this.controls( true );
    }
});

// play the video
popcorn.play();