Software by Steven

Sometimes a square peg is a round hole

Defining your own HTML5 Video Object

With the introduction of HTML5, the <video> element offers a great deal of flexibility and scriptability to web-based video technologies. Popcorn.js takes this and runs with it, allowing everything on the page to work with a video to create great interactive webpages. Just check out what secretrobotron has made to see what I’m talking about. This can be taken further if you wrap non-HTML5 video sources so that they appear to look and act like HTML5 video.

I’ve been doing a lot of twiddling with this lately, and see lots of applications for it. A simple example is a slideshow, made up of an array of images timed to change every, oh, five seconds or so. This is no different from an ordinary video where thousands of images change at a rate of 24 or more times per second. If this ordinary array of images were wrapped to look like a video, it could then be tied into Popcorn and let loose. Not only could a slideshow be started, stopped and seeked through but other neat options begin to open up.

What if we want to dynamically caption the slide show images? What if we want to cue an <audio> element to play a sound for different sections of the slide show? What if we want to show additional information about the images or author like Twitter, Google Maps or more? This functionality is readily-available through Popcorn’s plugins. But if we really want to get creative…

We could make one of the images in the slide show actually be a <canvas> element hosting a Processing.js sketch which plays for a few seconds in the middle of a slideshow. In that Processing.js sketch we could then have JavaScript that runs completely independent of Popcorn but may interact and control it to create a relationship where the player and video feed off of each other. We could also simplify things and just go back to our array of ordinary images but increase the cycling time from once every 5 seconds to once every 1/24 of a second to create fluid motion. Doing this would emulate a video in every sense, but 100% dynamic images means 100% dynamic video content.

Eventually, I see the only limit being imagination.

HTML5 Video (like HTML5 Audio) implements a standard interface called “HTMLMediaElement”. You can check out the spec here. To get a video-like object going, all one has to do is have a JavaScript object define the methods and attributes of this interface. Such is the nature of open web, where innovation only requires knowledge and expectation of an interface. While some work in this area has been done for the 0.4 version of Popcorn (out now), the real playground will open for the 0.5 release where it will be as easy to create custom “player plugins” as it is right now to make ordinary plugins.

Time to start getting inspired.


One response to “Defining your own HTML5 Video Object

  1. Pingback: Custom HTML5 Video Objects: Timing « Software by Steven

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: