JSFiddle - React, Tailwind, and code Playground

by popcornjs

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

var states = function() {
    
    // store the readyState
    var rdy = popcorn.readyState();
    
    if ( rdy === 0 ) {
        console.log( "No data at all, readyState is " + rdy );
    } else if ( rdy === 1 ) {
        console.log( "We have metadata, duration is " + popcorn.duration() +
                     ", readyState is " + rdy );
    } else if ( rdy === 2 ) {
        console.log( "can play current location in video, readyState is " + rdy );
    } else if ( rdy === 3 ) {
        console.log( "can play current location in video and a bit more, readyState is " + rdy );
    }
    if ( rdy === 4 ) {
        console.log( "can play whole video at current buffer rate, readyState is " + rdy );
        popcorn.play();
    } else {
        setTimeout( states, 10 );
    }
}
    
states();