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

Posted in html5 | Tagged , , , , , , , , , , , | Leave a comment

ZEMOS98 Interview on Political Remix Video

Here’s a short video interview I did while participating in the 2011 Zemos98 Festival in Seville Spain. They asked me to talk a little bit about Political Remix Video and how I got started making subversive mashups.

Posted in interview | Tagged , , , , , , , , | Comments closed

Building an HTML5 Video Remixer Web App

This post originally appeared on genderremixer.com on September 16th 2011

Elisa Kreisinger shares her experiences using the app to teach media literacy skills in the classroom

The 2011 Open Video Conference at New York Law School was devoted to “builders, tinkers, makers, and doers” and with that in mind I was excited to lead a session (entitled Building a Better Remix Maker) which focused on creating intuitive, accessible open tools to make video remixing easier and promote media literacy.

During the 2010 OVC Hack Day the original flash based Gendered Advertising Remixer Application was born from a collaboration with Zohar Babin from Kaltura. So the first order of business this year was to try and re-create a new open source version of the tool using HTML5, Popcorn.js and JavaScript.

And after three days of collaboration with an incredible team of people at the conference we were able to achieve just that! We currently have a working HTML5 demo version up and running. At the moment it requires either the latest Firefox or Chrome web browsers to work correctly. You can take a look at the code on github and fork the project to expand it or create your own version.

Martin Leduc leads a brainstorming session with educators on future HTML5 remixing apps

As part of the session we also sat down with media literacy advocates, educators and video artists to brainstorm ideas for future HTML5 video remixing tools for use in the classroom and beyond.

The flash version also got some exciting new features including the ability to swap selected clips and instantly see the inverse of your mashup pairing. Even better you can now download your remixes to your desktop or publish them directly to YouTube all from within the app! (You can also fork the Flex version on github.)

Jonathan McIntosh and Boaz Sender discuss goals for building the HTML5 Remixer

Stay tuned for more updates on these project!

Special thanks to the truly impressive groups of people we assembled to make this HTML5 remixer a happen. The core team included: Boaz Sender (@BoazSender), Zohar Babin (@zohar), Martin Leduc (@ikat381), Elisa Kreisinger (@elisakreisinger), Mark Reilly (@alien_resident), Greg Dorsainville (@ScienceLifeNY) Brian Chirls (@bchirls) and me – Jonathan McIntosh (@radicalbytes).

- Photos via curiousjohn on Flickr.

Posted in html5 | Tagged , , , , , , , , , , , , | Comments closed

Too Many Dicks on The Daily Show

Video description:
An episode of The Daily Show with Jon Stewart is interrupted by a remixed critique of the show’s gender imbalance and “boys’ locker room” comedy stylings. The remix takeover was created with clips borrowed from over 100 episodes of The Daily Show combined with the Flight of the Conchords song “Too Many Dicks on the Dance Floor” in order to subvert both sources.

I am a fan of The Daily Show about 50% of the time but often find myself disappointed with the overwhelmingly male-centered style, jokes, segments and guests each night. Sure the occasional, strategically deployed, dick joke can be an effective tool for pointing out sexism or undermining homophobia but more often than not Jon Stewart and his team just use penis humor to get cheap laughs. I can’t help but feel that there are, in fact, just too many dicks on the dance floor.

The serious lack of women in on-screen or leading creative roles on The Daily Show and other late-night comedy shows has been well documented and discussed in recent years. But here’s a quick recap: Only 3 of the 12 regular correspondences/contributors on The Daily Show are women. Only 2 of the 16 writers are women.  And so far barely 15% of the guests in 2011 have been women.

To be absolutely clear I’m not saying that Jon Stewart or his team are personally sexists but as host and Executive Producer Jon is largely responsible for the messaging, tone and culture of the Daily Show as a comedy institution. He could get creative in addressing the boys’ club comedy culture on the show – and, as a start, hire more women in leading creative roles. As Wyatt Cenac has pointed out, talented female comedians are not hard to find.

The original Flight of the Conchords song is not meant to be critical of sexism – in fact its heteronormative and it could be argued even a bit homophobic – but when it is combined with any male-centered media source it instantly becomes a subversive critical commentary. Try remixing it and see for yourself!

Press etc:
NEW The remix is now featured on Virgin America’s inflight TV BoingBoing channel
Sample This Show! Use of ‘Fair Use’ is Growing (Kansas City Star)

Inspiration:
This remix was inspired by the practice of fan vidding and specifically by the vid Star Trek Dance Floor created by Sloane. She used the same song to point out the lack of female characters in J.J. Abrams’ 2009 Star Trek reboot. In 2010 Feminist Frequency video blogger mashed-up the same song in order to highlight the violent phallic imagery in modern video games.

Subtitles:
• Help translate this video via Universal Subtitles
• See English captions on YouTube and Universal Subtitles

Video Formats:
Streaming and embedding via YouTube
Streaming and embedding via Blip.tv
NEW Download in webM format (16mb) – for your HTML5 projects!

Video Still: (Click for larger version)

 

 

 

Fair Use Notice & Licensing:
This transformative remix work constitutes a fair use of any copyrighted material as provided for in section 107 of the US copyright law. “Too Many Dicks on The Daily Show” by Jonathan McIntosh is licensed under a Creative Commons BY-NC-SA 3.0 License permitting non-commercial sharing and remixing with attribution.

Special Thanks:
Much thanks to vidder Laura Shapiro for helping to beta test the final edit. Also thanks to Paul Paz y Miño (@paulpaz on Twitter) for the use of his extensive Daily Show episode archive.

Further Reading on this Topic:

The Daily Show’s Woman Problem (Jezebel)
5 Unconvincing Excuses For Daily Show Sexism (Jezebel)
Among Late-Night Writers, Few Women in the Room (NY Times)
Number of women working in TV falls  (LA Times)
Women Of The ‘Daily Show’ Respond To Allegations Of Sexism (HuffPost)
The Only Women In The Late Night Writers’ Rooms (Jezebel)
Guess How Many Female Writers There Are On Late Night? (Jezebel)
The strange, men-only world of late-night TV (Salon)
• Does “The Daily Show” still have a woman problem? (Salon)

Posted in remix | Tagged , , , , , , , , , , , | Comments closed

Interview with the Barcelona TV show La Malla Tendencies

La Malla Tendencies is a Catalan-language television program produced by Canal Blau TV and Minifilms in Barcelona, Spain. The show focuses on the crossroads of art, film, music and technology. They interviewed me at the Centre de Cultura Contemporània de Barcelonaduring (CCCB) during my 2011 remix speaking tour of Spain and asked me to talk about pop culture hacking and remixing gendered toy ads.

The full episode can be seen here (mostly in Catalan)

Posted in interview | Tagged , , , , , | Comments closed

CCCB Lab Interview on the Remix Video Ecosystem

A short video interview I did with CCCB Lab in Barcelona (Centre de Cultura Contemporània de Barcelona) during my recent 2011 speaking tour in Spain. I was asked to speak about remix video as a political tool and if I think there are any ethical boundaries for remix artists. I also talk briefly about the challenges and benefits of using corporate publishing platforms like YouTube.

Posted in interview | Tagged , , , , , , | Comments closed