Archive for August, 2011

Popcorn.js player plugin revisit

Posted in open source, video, webmademovies on August 24, 2011 by scottdowne

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.

San Francisco sprint

Posted in open source, video, webmademovies on August 19, 2011 by scottdowne

This week I have been in San Francisco’s Bay Area Video Coalition doing a butter.js and popcorn-maker sprint, along with getting in direct contact with people using this product.

I am finding how important it is to get into direct contact with people using your product because these are usually the people that are not part of your workflow, and thus don’t know how to get into contact with you. When using software, it is easy to forget that it was created by someone, that there is a human (or many) behind the software. I know I have done this, and it is usually when I am angry with software, I may even go so far as to curse the software by name, as if the software itself was a living entity that created itself. In reality, there is someone responsible for the software, with the ability to change it. Seeing this person makes it easy to put a face to the shadowy living entity that is software.

The rest of my time has been spent adding in new features and requests to Popcorn-Maker, which the current unreleased version can be found here.

The main thing I’ve done is incorporating timeline ticks under the video playhead, representing what time the video currently rests at.
Also, allowing the timeline area to zoom in or out by either using shift+mousewheel, or a scrollbar. The scrollbar UI was implemented by Dave Seifried.
Finally, using arrow keys to move the events and update the video’s playhead, which was initially implemented by Dave Seifried.

Some more depth.

When using arrow keys to move events, or the playhead, you can hold shift to move them on a larger increment.
You can also hold ctrl when moving events to anchor one side, to stretch the event, instead of moving it. You can then hold shift and ctrl, to expand on a larger increment, then do this while holding ctrl, shift and left and right at the same time, and you can stretch both sides of the event, while keeping the event centered.

I initially had the zoom at 6 layers, but users were requesting a larger number of layers, so I changed it to 12.

Again, you can try it out here.

Follow

Get every new post delivered to your Inbox.