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 our popcorn instance
var popcorn = Popcorn( "#video" );

// listen for timeupdate
popcorn.on( "timeupdate", function( event ) {

    // if the video is paused
    if ( this.paused() ) {
      
        // add a footnote!
        this.footnote({
            start: popcorn.currentTime(),
            end: popcorn.currentTime() + 1  > popcorn.duration() ? popcorn.duration() : popcorn.currentTime() + 1,
            text: "Footnote at " + popcorn.currentTime() + " ",
            target: "footnote"
        });
    }
});

// play the video
popcorn.play();

// PAUSE THE VIDEO IN ORDER TO FIRE THE EVENT