Update Flash Cue Points with HTML5 and PopcornJS

Share

MAC HTML5 Video

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.

View Project View Demo


Overview

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

“Old & Busted” may be an unfair characterization of the method, nonetheless the MAC flash player utilizes flash cue points that, when fired, trigger a javascript listener to make defined changes to the DOM. More specifically, the textual instructions and related products directly below the video. The list of products to be displayed for any given cue point is stored in a json object containing a time flag, in number of seconds, that marks the location in the video at which those products are to start being displayed. Because the user can scrub the video at any time, the current video time is transmitted each time a cue point is fired as well as after the completion of any video seek events. That video time is then used to determine the list of products with the closest time flag that has already occurred. The list of products is updated along with any copy related to the given cue point.

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.

New Hotness

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.

Popcorn.js is an HTML5 javascript library for integrating the web into video production

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

The update will consist primarily of 3 parts. Adding references to the required javascript libraries, updating the markup for the video player, and finally, adding events for the existing cue point data.

Adding Libraries

Video Related Markup

Adding Cue Points

For the cue point data, I am going to use the exact same object that the existing javascript code is using to determine product display.
Next, we initialize popcornjs and add the desired cue point functionality using the code popcorn plugin.

As you can see, by using the already existing javascript config for the cue points, it was necessary to manipulate the data a bit, but nothing too ridiculous. In a production environment, you would probably want to update and optimize the use of the cue point configuration.

Conclusion

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!

Share

Tags: , , , , ,

No comments yet.

Post your comment