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

// show how much of the data is buffered right onDomReady
console.log( popcorn.buffered() );

// only show start and end values if there is something to show
if ( popcorn.buffered().length > 0 ) {
  console.log( "start",  popcorn.buffered().start() );
  console.log( "end", popcorn.buffered().end() );
}

//show how much of the data is buffered 3 seconds after the Dom is ready
setTimeout(function() {
    console.log( popcorn.buffered() );
    console.log( "start", popcorn.buffered().start() );
    console.log( "end", popcorn.buffered().end() );
}, 3000 );