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>
</video>

JavaScript

// create our popcorn instance
var $pop = Popcorn("#video"),
    doLoad = true;

//  create an exec to log some data
$pop.exec( 1, function() {
    
    console.log("Executed at the 1 second mark!");
});

// exec to change video sources
$pop.exec( 3, function() {
  //  make our video autoplay once it loads
  $pop.media.autoplay = true;
    
  //  Add new media source
  if ( doLoad ) {
    $pop.media.children[ 0 ].src = "http://download.blender.org/peach/trailer/trailer_400p.ogg";
    $pop.media.children [ 1 ].src = "http://download.blender.org/peach/trailer/trailer_720x405.mov";
  }
  
  // reload the video, notice the exec stays still and we have a new video source
  doLoad && $pop.load();
  doLoad = false;
});

// play the video
$pop.play();