Popcorn Trigger Example

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

CSS

html{font-family:arial;}

JavaScript

// create popcorn instance
var $pop = Popcorn("#video");

$pop.listen( "timeupdate", function() {
    
    if ( this.currentTime() > ( this.duration()/2 ) ) {
        // trigger custom trigger
        this.trigger( "halfDone", {
            name: "halfDone trigger",
            someReallyInterestingdata: 12345
        });
    }
});

// listen for custom listener
$pop.listen( "halfDone", function( data ) {
    console.log( "we Made it halfway!" );
    console.log( "name: ", data.name );
    console.log( "more data: ", data.someReallyInterestingdata );
});

$pop.playbackRate(90);

//play
$pop.play();