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>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>

CSS

html{font-family:arial;}

JavaScript

// Debug mode is off by default

// Create a plugin that will throw an error when it's start function runs
Popcorn.plugin( "foo", {
  start: function() {
    throw new Error();
  }
});

// Create Popcorn instance
var pop = Popcorn( "#video" );

// set up "foo" event
pop.foo({ start: 1 });

// The error will be caught by Popcorn.plugin.errors
pop.on( "error", function( e ) {

  // 'e' is Popcorn.plugin.errors, which can be accessed outside the "error" event callback.
  console.log( e );

});

pop.play();