Popcorn.js event effects framework landing in 0.7

We’re just finishing up Popcorn.js 0.7.

One of the major things landing in this patch, is effects.

Effects are not just limited to effects, so we also decided to use the word compose. This allows our largest use case being effects to be obvious, but we also make it known that on a more abstract level, something exists. This way, the API itself is speaking the language of the user.

You create an effect plugin almost exactly like you create a regular plugin.

You can create a plugin like so:

Popcorn.plugin( "pluginname", {
  start: function( event, options ) {},
  end: function( event, options ){}
});

So create a plugin name, and define some functionality for start and end. Note, this is a very minimal example, as I was not intending to get too deep into creating a plugin.

Anyway, you can create an instance of your plugin like so:

popcorn.pluginname({
  start: 1,
  end: 5
});

This means, between 1-5 seconds in the video, your defined start function will be called, and when it leaves the 1-5 time range, it’ll call your defined end function.

Effects work similar in creation, but to create an instance from an effect, you apply it to another plugin instance “composing functionality”.

Example:

Popcorn.compose( "effectname", {
  start: function( event, options ) {},
  end: function( event, options ){}
});

popcorn.pluginname({
  start: 1,
  end: 5,
  compose: "effectname1 effectname2" // this way, we can apply as many effects as we wish
});

So now, that single plugin instance has the functionality of the start and end functions of the effect. Something to note is currently, the original plugin’s events fire first, then any composed events will be fired in the order they appear in the compose list.

Here is an example of it all in action.

Here, I create an effect for applying a css class name to the event’s target on start, and after 250 milliseconds later, it’ll go away. Using this, the potential for using CSS transitions is huge.

A more simplified demo.

Here, I do this:

    document.addEventListener( "DOMContentLoaded", function () {

      var p = Popcorn( "#video" )
      .play() 
      .footnote({
        start: 5, // seconds
        end: 15, // seconds
        target: "footnotediv",
        text: "This video made exclusively for drumbeat.org",
        effect: "applyclass",
        applyclass: "test1, test2"
      })
      .footnote({
        start: 20, // seconds
        end: 45, // seconds
        target: "footnotediv",
        text: "Visit webmademovies.org for more details",
        effect: "applyclass",
        applyclass: "applyoverlay: .overlay, hover: parent"
      });
    }, false);

What is happening here is the first footnote is simply having the two css classes applied to their target’s on start, and removed on end. Pretty simple.

The second footnote is not so simple. Here I am using CSS selectors split by semi-colon “classname: selector, classname: selector”. classname is the name of the class to apply, and selector is the target to apply it to RELATIVE to the target.

I want to stress that compose and effect are the same things, and that applyclass is only ONE example of how to use this. This is not limited to effects.

This is all pretty new stuff, and what I’ve just written is as far as I know the only documentation for effects. So anyone attempting to build an effect right now, is a trail blazer!