Defining your own HTML5 Video Object
March 18, 2011
Posted by on
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…
Eventually, I see the only limit being imagination.
Time to start getting inspired.