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>
<div id="footnote"></div>

JavaScript

// create popcorn instance
var popcorn = Popcorn( "#video" ),
    flag = true;

//  compose to log data at start and end
Popcorn.compose( "logger", {
    start: function( event, options ) {
        console.log( "START" );
    },
    end: function( event, options ) {
        console.log( "END" );
    }
});

// add some footnote events!
popcorn.footnote({
    start: 1,
    end: 4,
    text: "Again new footnotes to the video",
    target: "footnote",
    compose: "logger"
});

popcorn.play();