JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<div id="narration"></div>
<div id="foo"></div>

JavaScript

// create our popcorn instance
var wrapper = Popcorn.HTMLSoundCloudAudioElement( '#narration');
wrapper.src = "http://soundcloud.com/four-tet/burial-four-tet-nova";

pop = Popcorn(wrapper);

    pop.footnote({
        start: 1,
        end: 600,
        text: "Vimeo working!",
        target: "foo"
    });

        var states = function() {
            
            // store the readyState
            var rdy = pop.readyState();
            
            if ( rdy === 0 ) {
                console.log( "No data at all, readyState is " + rdy );
            } else if ( rdy === 1 ) {
                console.log( "We have metadata, duration is " + popcorn.duration() +
                             ", readyState is " + rdy );
            } else if ( rdy === 2 ) {
                console.log( "can play current location in video, readyState is " + rdy );
            } else if ( rdy === 3 ) {
                console.log( "can play current location in video and a bit more, readyState is " + rdy );
            }
            if ( rdy === 4 ) {
                console.log( "can play whole video at current buffer rate, readyState is " + rdy );
                pop.play();
            } else {
                setTimeout( states, 10 );
            }
        }
            
        states();