Popcorn.js Custom Plugin

I took on a custom Popcorn.js plugin for a client of ours who needed to display certain metadata about a video at certain points throughout the video. Initially, this process was shaping up to be a bear, requiring hacky delays to show/hide the information. This method also wasnt synced to the video, so if the client was at full CPU load, the content would routinely get out of sync with the video.

Popcorn.js

Luckily, Mozilla put out the Popcorn.js framework a few weeks ago to deal almost exclusively with these types of problems. However, the included plugins, while super useful, weren’t doing what I needed. Below is a quick walkthrough of my thought process and code samples to create this demo

Existing plugin

Popcorn does supply a couple of design patterns for authoring plugins, but after a few attempts, these werent’ yeilding results as fast as I wanted. I chose to alter an existing plugin that Popcorn ships with, the “Subtitle” plugin [source, extracted from the complete popcorn source].

Code Walkthrough

  Popcorn.plugin( "subtitle" , {
      manifest: {

This section is defining the title of your plugin, in this case “subtitle”, and preparing the plugin to take stock of what arguments it will expect and what type each of those arguments are

manifest: {
        about: {
          name: "Popcorn Pop Plugin",
          version: "0.1",
          author: "Steve Ottenad",
          website: "http://labs.steveottenad.com/"
        },
        options: {
          start: {
            elem: "input",
            type: "text",
            label: "In"
          },
          end: {
            elem: "input",
            type: "text",
            label: "Out"
          },
          target: "subtitle-container",
          text: {
            elem: "input",
            type: "text",
            label: "Text"
          }
        }
      },

This “manifest” section defines each of the arguments that the plugin can accept, as well as what type of objects the arguments are. Note that these manifest arguments are only necessary if you want to use the plugin you are building with Butter, Mozillas WYSIWYG editor that utilizes Popcorn.js

 _setup: function( options ) {
      var c = document.getElementById(f.target);
      f._container = document.createElement("div");
      c.style.width ='0px';
      if (!c && n.plugin.debug) throw Error("target container doesn't exist");
      c && c.appendChild(f._container);
}

Guess what this does? Ya, it is fired at the moment you call your plugin, NOT the moment it is called using the “Start” attribute. Make sure you are scoping your plugin correctly, this was the toughest part for me. The problem is that the plugin can/will create multiple instances of itself, so proper closure is important. In my finished code, I am using the “f” variable to store all instantiation variables and elements (I’m creating a div), and then reference that later in the start/end functions through the “C” variable. You can see the assignment of the f._container to the ‘c’ variable at the end of this function

start: function (f, c) {
	var outer = document.getElementById(c.target);
	c._container.innerHTML = c.text+'<br /><br /><a href="#" class="play button">Play</a>';
	var ref = this;
	ref.pause();
	animateItem(outer, c.width);
	$('.play').live('click', function(){
		toggleState(ref,this,false)
	});
	$('.pause').live('click', function(){
		toggleState(ref,this,true)
	});
 
},

The start function is what fires when your video gets to the point (in seconds) you defined in the plugin call. Each instance you create will have this function assigned to it, so again, its important to scope all your variables and pass in the reference to the function itself, which contains all your _setup variables. Another option would be to do most of your heavy lifting here in the start function if it wont slow down the video and/or doesnt need to be instantaneous

We start be referencing the target we passed in when calling the plugin, then insert some html into the container we created in the _setup function. We can reference all the options we passed into the plugin by using “c.” then the option name. Next, I’m assigning “this” to a variable, since we will need the reference to the actual element we are working on later in the game with some click handlers. The “animateItem” is handling the animation of the element we’ve created and then we’re assigning play/pause click handlers to allow for toggling of the video

end: function (f, c) {
	var outer = document.getElementById(c.target);
	c._container.innerHTML = 'All Done.';
	c._container.style.display="none";
	animateItem(outer, '0px');
},

Any functions you need to fire on the ‘end’ option (in seconds), but before the video actually reaches its end should go here in the “end” function. Im just using it to print out a message, then immediately hide the box, to make room for another instance of the plugin.