Popcorn.js player plugin revisit

I’m about to revisit Popcorn.js players. Right now we have 4 players, youtube, vimeo, soundcloud and baseplayer. All hacked up in their own way, and a maintenance nightmare. I intend to make basplayer something the other players derive from. This will reduce code surface, thus reducing bugs, keep things from getting fragmented and out of sync, and most importantly, test functionality once, reducing our testing phase and bugs in our test suites.

I’m thinking we break the current API regarding players with this patch, I think it’ll be worth it.

I think baseplayer will exist internally (it won’t be callable), and when you call:

Popcorn.player( "youtube" {});

it will create an instance of baseplayer, you can then pass in the additional features. So, if someone wants to use baseplayer without any additions, they can simply do this:

Popcorn.player( "baseplayer", {});

That will create a player emulating an HTML5 video players API that can then work in Popcorn, like this:

var p = Popcorn.baseplayer();

It will not actually display anything, but things like play, pause, currentTime will work and fire events.

To create a player, the idea is to add the needed functionality to make it work, and the Popcorn.player initialization code will look something like this:

Popcorn.player( "youtube", {
  setup: ( options ) {}, // creates the element and handles its ready state
  play: function( options ) {}, // simply start the setup element's play 
  pause: function( options ) {},
  currentTime: functipon( options ) {}, 

I am hoping in most cases, this is all we will need. So the internals of firing events can be handled in internal baseplayer code, because we can be smart enough to tell the overloaded play and currentTime to fire popcorn’s timeupdate.

This is all to setup a player plugin. From here, a user can then use it by doing this:

var p = Popcorn.youtube( "targetDiv", url );

The actual breakage of the API is minimal. The old way is below, the new above:

var p = Popcorn( Popcorn.youtube( "targetDiv", url ));

Positioning related code of the element will be setup as well. Not sure yet how that’ll look, but I do know the internal baseplayer won’t have a position, but it will have functions to manipulate the position, and probably have the position code look inside the element created by the setup function for the position related code.

I suspect there will be other issues while I work on this, but I’ll cross those bridges as I get to them, so I need to stay flexible to reduce the rage.


One Response to “Popcorn.js player plugin revisit”

  1. +9001 to this!!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: