JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

// we only want to show the controls of our video and begin playing it once more then half of the video has been loaded
var loaded = function() {
    
    // store the returned timeRanges object as we use it more than once
    var buff = popcorn.buffered();
    
    // if we have buffered more then half the video
    if ( buff.length > 0 && buff.end(0) > ( popcorn.duration() / 2 ) ) {
        popcorn.controls( true );
        popcorn.play();
        console.log( "LOADED" );
    // if less then half the video has loaded call our function again
    } else {
        console.log( "Still Loading...." );
        setTimeout( loaded, 10 );
    }
}
        
loaded();