JSFiddle - React, Tailwind, and code Playground

by edwardsharp

HTML

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

JavaScript

// create our sequence
var sequence = Popcorn.sequence(
                "container-id",
                [
                    {
                        src: "http://videos.mozilla.org/serv/webmademovies/atultroll.webm",
                        in: 0,
                        out: 3
                    },
                    {
                        src: "http://videos.mozilla.org/serv/webmademovies/justintime.ogv",
                        in: 174,
                        out: 180
                    },
                    {
                        src: "http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv",
                        in: 0,
                        out: 6
                    }
                ]);

// play popcorn
sequence.play();

sequence.footnote({
    start: 0,
    end: 2,
    text: "footnote",
    target: "foo"
});

// get popcorn object of first video
console.log( sequence.eq( 0 ) );

//exec something at 4 seconds
sequence.exec( 4, function() {
    console.log( "AT 4 SECONDS" );
});