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 preload="none">
<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

var v = document.getElementById( "video" );

// Listen for emptied event (may fire right away, since video is initially empty)
v.addEventListener( "emptied", function( e ) {

  console.log( "emptied fired!" );

}, false );

v.addEventListener( "canplay", v.play, false );

// Load the first video source.
v.load();

// emptied can fire by calling load twice
setTimeout(function() {
  v.load();
  v.pause();
}, 6000 );