Popcorn Context

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" autoplay 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>

CSS

html{font-family:arial;}

JavaScript

(function(Popcorn) {
    
  Popcorn.plugin( "funzo" , function( options ) {

    return {
      _setup: function() {
        // optional   
    }
      },
      start: function( event, options ) {
        // Do stuff at the start!
        this.mute();
      },
      end: function( event, options ) {
        // Do stuff at the end!
        console.log("The End!");
      }, 
      _teardown: function() {
        // optional            
      }
        
    };
  });
    
})(Popcorn);

// "$pop" is a Popcorn instance
var $pop = Popcorn("#video");

// "funzo" is an instance method!
$pop.funzo({
    start: 2, 
    end: 5
});

//play the video
$pop.play();