Buffy vs Edward: HTML5 Pop-Up Video Edition

buffy popup video poster

HTML5 poster attribute image for the demo

Last year I used the HTML5 <video> element combined with the PopcornJS framework to dynamically display source media data in separate boxes around my Donald Duck Meets Glenn Beck remix as the video played in real time. This time around I was interested in exploring ways to layer data directly on top of the video itself.

A few months ago during the 2011 Open Video Conference I began a conversation with Brian Chirls of the Mozilla Popcorn team about the possibility of creating a pop-up video style template for PopcornJS.

In order to demonstrate video data layering I thought it’d be fun to mimic the style of VH1’s classic Pop-Up Video show using my viral remix Buffy vs Edward. Over the next couple months Brian and I brainstormed how pop-ups could best be implemented using a Popcorn Maker template so that anyone could easily create their own pop-up videos. At the official alpha launch of the Popcorn Maker tool during the 2011 Mozilla Festival in London Brian had a working version of the template up and running. I was even able to hack together a 1st rough draft of this demo to show at the MozFest closing circle.

Click above to open the Buffy vs Edward pop-up demo

Now that I’ve had some extra time to iron out the bugs you can see pop-up demo for yourself. There are 70 separate pop-ups with data covering everything you ever wanted to know about Buffy vs Edward including production notes and even a few tips for dealing with real-life stalkers. Please make sure you are using the latest Chrome or Firefox web-browsers. I hear from others that it also works in the latest Opera as well as the newer Safari desktop and ipad versions (sorry iphone users Apple currently disables inline video playback and forces videos into full screen mode without the pop-ups). Click here to open the Buffy vs Edward pop-up video demo!

A few notes on my authoring process

This time around I used the newly released Mozilla Popcorn Maker app to assist me in the PopcornJS authoring process. Back when I built my Donald Duck demo I had to individually hand coded each annotation into one giant XML document. Thankfully the Popcorn Maker has now made everything a whole hell of lot easier.

Pop Video template options

Before I opened my Popcorn Maker project though I had to transcode my video file into a open video format that plays nicely with HTML5. I picked WebM for this demo – which I was able to easily encode with the nifty FireFogg encoder plugin for Firefox.  I also used a fallback mp4 file type for Safari and ipad since Apple doesn’t natively support Ogg Theora or WebM. Once that was done I hosted the video on my server, plugged the video URL into Popcorn Maker and selected the “Pop Video” template.

At that point I was able to simply drag and drop each pop-up on the timeline and see the result almost immediately in the video box above (See screen-grab of my workflow inside the app below). After placing a pop-up on the timeline I could just double click to open the options window to enter my text, set the pop-up duration and choose an icon.

When finished, Popcorn Maker gave me the option to export a basic HTML page with my project embedded which I tweaked to fit the style of my own website. Since this demo had so many pop-up elements and took over a month to complete I also made extensive use of the JSON export function to save/back-up my progress into a text file as I worked.

Workflow inside the Mozilla Popcorn Maker app

This entry was posted in html5 and tagged , , , , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment