Popcorn.js and i-Docs: The Start of a Great Relationship?

 

The last article posted by Arnau Gifreu on the evolution and the future of the Internet invited me to start my collaboration with i-Docs introducing the first proposals that are coming from different studios to create audiovisual narratives using HTML5. At least three projects (Popcorn.js, Zeega, and 3wdoc) were born in the last year offering different HTML5-based solutions, in some case specially designed for making webdocs. This leads me to think we are at the beginning of a decade full of experiments that will take web communication onto the next level; maybe in the same way as Flash allowed in the early '00s, but I think the change will be stronger, mixing the best of amazing visual narratives with the powerful sense of collaboration and real-time communication given by web 2.0 and semantic data. The beginning of an era always sounds pretty cool, like the feel of being in a very primitive stage of next-generation digital storytelling, doesn’t it?

 

What is already sure is that in 2012 we’ll see a lot of works sprouting all around the world, some of them almost ready to be released. I’ll start by talking about Popcorn.js, the Open JavaScript and HTML5 media framework created by Mozilla within its project Web Made Movies, an open video lab lead by Brett Gaylor (best known for being the director of the documentary RIP: A Remix Manifesto), who will be one of the keynote speakers in the next I-docs Symposium in Bristol.

 

Popcorn.js was released in the summer of 2010. The aim was to bring coders and filmmakers together to explore a new technique to create video on the web (or web on the video, maybe: the HTML5 doesn’t split those concepts). And the best way to start was to provide an easy way to add extra data and metadata to videos: a classic web video screen is surrounded by a layout of data and related content that appears as the video plays. These data can be texts, images, other videos or links to any web content, and, of course, with the capacity of making real time searches in Google News, Wikipedia, Google Maps, Twitter, Flickr and whatever web or social network with a public API. This demo shows what we can do with the first versions of Popcorn.js.

 

 

So, now we know what the possibilities of relating web content to the videos are, let’s see what kind of content and with which narrative or informative purposes can this tool be used.

 

One of the most obvious is the identification of sources and places to explore further to look for more information. Thus the video works as the starting point of a hypertext from where to start browsing and to know more about a topic.

 

This makes a lot of sense in the remix works that can use Popcorn.js to reference the original source materials as the video plays, and link directly to them, when they come from the Internet. Jonathan McIntosh, an American remix artist who defines himself as a ‘pop culture hacker’, was one of the first who tried Popcorn.js in one of his works, a piece entitled Donald Duck Meets Glenn Beck in Right Wing Radio Duck. Here is the result, and here a post by the author explaining how he did it.

 

 

In this case it’s clearly not a documentary. But the remix technique, used for decades in the traditional documentary, and totally encouraged by the web 2.0, is very used in the interactive database documentary. That’s why we see a lot of possibilities to enhance and expand information when to take linear documentaries to the web.

 

Upian, the French studio that created webdoc masterpieces such as Prison Valley or Gaza \ Sderot, started to experiment with Popcorn.js in the beginning of this year, by complementing a couple of tv pieces produced by ARTE, Notre Poison Quotidien and Planète à Vendre. In both cases the primary work is a documentary that analyzes current issues like the the effects the chemicals used in factory farming have on our health, or the  changes in world agriculture since the alimentary crisis in 2008, respectively. Normally in this kind of documentaries the amount of information left behind is huge, and if they are able to arouse the viewer’s interest, curiosity will lead us to do our own research looking for more information. Popcorn.js helps us to get to that information presented within the documentary through the whole internet, in an easy way, and at the same time follow the course of the video.

 

For instance, in Planète à vendre, at the same time as we see in the documentary an interview with a journalist expert in prime materials, a box shows up below with a link to a search on the Financial Times website finding all the articles written by this journalist since 2007. Also we can see the last tweets with the hashtag #landgrab, and a counter with the number of square metres of land rented or sold in the time the video is playing.

 

 

From an informative point of view the usefulness of Popcorn.js seems clear, as well as its potencial as a tool for education, either to expand knowledge or to guide self-learning giving acces to further information and motivating student’s curiosity.

 

But what happens with more creative or experimental aspects? What about poetics and meaning construction? What about the fun part of this? Easy, people are beginning to try.

 

Upian itself, in its most recent approach to Popcorn.js, has gone a little bit further with Happy World, a documentary about how people in Burma live “according to the rhythm of the most absurd decisions made by their governors”. The project was made in collaboration with Cinquiéme Etage, a production company, with three media partners: LeMonde.fr, Courrier International and Owni. Let me translate what Dan Benzakein from Web Television Observer wrote about the “extended experience” achieved by Happy World.

 

 

The challenge of Popcorn.js here is to display this “constellation of interactive objects” synced with the main object (the documentary video). Sometimes this related content is only a graphic complement such as a banner with the titles of each chapter, and other times it is a link to further content. All this further content and extra information is compiled in another page, where you can follow it linearly. It’s the “bonus” page, which not only displays in linear order all the extra content but invites the viewer to send their own links or information. That’s only a different way to present information that could perfectly be displayed in a website as a blog post, or as an Storify piece. And I personally think it would work better. Enclosing this content to the video with the Popcorn.js tool makes full sense in order to link it to a precise moment of the narration. But, from the point of view of the person who wants to see the video, maybe it’s too disruptive. Mostly because if you click on a link on the side while the video is playing, the page is loaded and the video stops, so you can’t return easily to the point where you left the documentary. Opening the link in a new tab is the only way to discover the extra information without stopping viewing the documentary. Classic, but tricky.

 

 

Again, if we trust the criterion by which video on the Internet must be short, because our attention span is shorter, using Popcorn.js can be a good way to shorten our documentaries, leaving behind a lot of content that can be displayed at the same time, occupying a spatial as well as temporal dimension.

 

To mix and explore the different dimensions of a space is the aim of Katerina Cizek in the next stage of her Highrise project, as she presents it in the trailer of One Millionth Tower. We’re really looking forward to seeing how she uses Popcorn.js to work with 3-D spaces and augments the audiovisual and immersive experience formulated in Highrise.

 

Another of the big projects to be launched soon, #18daysinegypt, also announces a use of Popcorn.js in a very spatial way, according to this demo.

 

Until these two expected releases come out we can only imagine how Popcorn.js will be able to enhance the narratives in a different way to the informative, but I’m sure it will. And perhaps it’s too early to know how far can creators take the tool in a totally creative and meaningful way. Creators need to know the tool, to experience it and play without fear of losing control over their work. Also, they will need autoring tools for doing that without having coding skills. At least two are being developed: one is Butter and the other is Popcorn Maker, and both are still in an alpha version. Anyway, with these tools filmmakers will have to get used to see the whole internet as the palette and the canvas, beyond the timeline of their FinalCuts.

 

This was the purpose of the Living Docs Hack Day hosted by Mozilla few days ago in San Francisco, a two-day hacklab to show filmmakers the possibilities of Popcorn.js by creating some demos with the help of coders. One of these creators was Jigar Mehta from #18daysinegypt, who appears in this video among other filmmakers and developers who joined this Hack Day (and who will be another of our keynote speakers in the next i-Docs Symposium).

 

As read in this article written by Angela Watercutter in Wired.com, there are a few more projects interested in incorporating a Popcorn.js experience to their production, like The interrupters or 30 mosques. Please go to the article to find the links to each demo, most of them in a very experimental stage. And I know a lot more are coming.

 

For now we know the 1.0 version of Popcorn.js is to be released next week at the Mozilla Festival in London. It’s going to be exciting to see how a new fresh wave of filmmakers, journalists, designers and coders engage with this open source tool, and an open source way of making media, bringing together video and the next generation web. So far we have seen the prehistory of HTML5 interactive documentary, and the first shy attempts to enhance nonfiction storytelling using Popcorn.js (we’ll talk about other HTML5 tools in further posts). From now on, we have a long way ahead to try, experiment, create and play. It does sound prety cool.