I love creating web applications for clients who truly want to incorporate, and have practical use for, the latest web technologies. The constant opportunity to do things that haven’t been done and execute in ways that haven’t been seen sets my brain to ludicrous speed! On the flip side, the rate at which these technologies evolve is baffling, and quickly yesterday’s bleeding edge work becomes today’s outdated code. For this reason, I’ve made it standard practice to occasionally revisit projects to see if they could benefit from an update, and how to go about it. This has been a great way to keep the skills sharp while also staying up to date on new technologies.
Today, I’ll be looking back at the M·A·C flash video player, working through how it could updated to use HTML5 Video and PopcornJS to duplicate its current functionality. My work with MAC has long since been complete, so I won’t be updating the original player, rather, I will be creating the updated application locally.
Check out the original project link, then the demo to view the final result. Finally, you can find a brief description of the code used for this update below.
Just some quick background notes on the current application and some information about how we’ll go about updating as unobtrusively as possible.
Old & Busted
Although the timing is not perfect, and never exactly the same between views, it works quite well. The downside is that cue points need to be created via some flash tool and can only be handled within the flash. This makes access to cue points a bit limiting, and cues can end up with a slight time warp after the video has been compressed and/or optimized for streaming.
HTML5 support is spreading like wildfire as we speak and the native <video> element’s sexiness is undeniable. The multimedia compatibility with devices such as the iPhone and iPad make a strong case to anyone looking to make their site available across multiple platforms.
To normalize the interface to <video>’s methods and properties we will be using the HTML5 video framework PopcornJS. PopcornJS is an event system for the HTML5 video element with some strong syntactic sugar for method chaining and timeline event manipulation. To duplicate the existing functionality, we’ll also be utilizing the Code Popcorn Plug-In. Both the library and plugin are available from the popcornjs github repo.
Build It Out
Video Related Markup
Adding Cue Points
Next, we initialize popcornjs and add the desired cue point functionality using the code popcorn plugin.
As I mentioned at the start, I believe that using past projects as a base for learning new methods and technologies to deliver that functionality has been invaluable. This simple exercise not only gave me an in-depth overview of a new js library, I also got some face time with new HTML5 elements. More importantly, it was all using a real world example that I was already familiar with. Had the live application actually been updated, the benefit would be a cross platform compatible video product catalog that would only use flash video as a fallback. That’s what I call a multiple positive, and is a great way to wrap thing up. Thanks for following along!