Dynamic HTML5 Source Data Annotation for Remix Video

I’ve recently been exploring ways to contextually present the audiovisual sources, notes and references used in my remix videos. I’m especially interested in the exciting possibilities of the HTML5 <video> element combined with the Popcorn.js framework to visually annotate the metadata in my more complex remixing projects. With that in mind I’ve put together an HTML5 video demo which dynamically displays a layer of data referencing the original source materials as the video plays. I have long been an advocate for remixers to transparently cite their sources as part of promoting open video, claiming our fair-use rights and as a way to make it easier for others to remix the same material in alternative ways.

I’m using my popular Donald Duck Meets Glenn Beck remix for this demo because of the large number of media fragments appropriated to construct it. I borrowed from 50 classic Donald Duck cartoons and over 30 Glenn Beck radio & TV broadcasts. You can now see exactly where each of those clips came from.

While watching the demo you will see related data dynamically appear in the boxes surrounding the remix, triggered by the video’s time code. If you click on any red text it will link you back to source materials in their original context. (1) Displays the current visual clip info. (2) Displays the current audio clip info. (3) Displays relevant wikipedia articles. (4) Displays production and factual notes.

A few scenes were created by compositing parts of two different cartoons or by digitally modifying other segments of the animation. Each change to the source is noted with text linking directly to the unaltered scene on YouTube.

Please be sure you are running an up-to-date HTML5 compatible web browser. The demo has been tested with the latest versions of Firefox, Chome, Opera and Safari OSX.

View the HTML5 dynamic remix video demo here

Note: I would advise watching the annotated version only after you have seen remix once already as its really intended for your 2nd viewing.

One common response from Glenn Beck fans was that my video took the talk show host’s “words out of context”. They are correct, of course, in a narrow technical sense because it is a remix. The real question though should be whether the remix fairly captures Beck’s overarching themes and messages in the larger context of our national discourse. I think it does and by providing an easy way to see the immediate context of each source clip you can now judge for yourself.

More geeky tech stuff:

In addition to Popcorn.js I have also utilized VideoJS to skin the <video> player. In the absence of a standard HTML5 video format, I am using both the open source ogg theora codec and the H.264 codec as a backup for Safari. I also played around with implementing some other new HTML5 tags like <header>, <section>, <aside> and <footer>.  You can check out the xml file for this project if you are interested.

Downloading the code:

If you feel like trying this demo with your own remix you can either download my modified code and design files and then insert your own video and XML metadata. Or you can build your own demo from scratch using Popcorn.js framework available on the project’s website.

This entry was posted in html5 and tagged , , , , , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.
  • connect

  • A history of subversive remix


  • Gendered Ad Remixer App


  • Media stories