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;

// add some footnote events!
popcorn.footnote({
    start: 2,
    end: 6,
    text: "TOGGLING EVENTS",
    target: "footnote"
});

// toggle footnote off
popcorn.toggle( "footnote" );

// when the video hits the end, toggle back on for events this time aroun
popcorn.on( "timeupdate", function() {
    
    // if were at the end of the media
    if ( this.ended() && flag ) {
        
        flag = false;
        
        // toggle footnote on
        this.toggle( "footnote" );
        this.autoplay( true );
        this.load();
    }
});

// play popcorn
popcorn.play();