HTML 5, Arcade Fire, and the next generation of multimedia storytelling

The Web is about to undergo an important shift with the adoption of HTML 5 and CSS3. I’ve been hearing about this for some time, and I’ve been talking to people about the new standards and trying to understand just what they mean. But nothing beats a good demo to break through some numbing techno babble. And this past week, we got a thrilling demonstration thanks to Arcade Fire and Google.

The Canadian band and Google teamed up to create what they’re calling an HTML 5 film called, “The Wilderness Downtown.” Though some critics have really noted that the film shows off HTLM 5 and CSS3.That’s an important technical distinction for developers. But what interests me is the greater dynamism and interactivity they allow. And that will create opportunities to rethink the way news organizations approach multimedia projects.

Many of us first heard about HTML 5 when Apple’s Steve Jobs starting talking it up while declaring war on Adobe’s Flash, the technology that powers most of the video we watch on the Web. Jobs criticized Adobe for not being more innovative with Flash, which he also called a processing hog. Adobe fired back. But this dispute seemed for most of us to be rather obscure. For that matter, I still don’t the rationale to keep Flash off the iPhone and iPad.

With the Arcade Fire film, we can now see what Jobs is talking about. And I have to say, I’m blown away.

To get the full effect, let me suggest you download Google’s Chrome Browser first. The film has been optimized to play in Chrome. (which brings up another issue that I’ll get to later.)

Then you go to The Wilderness Downtown and type in the address of your childhood home. This can be hit or miss, because the film is integrated with Google’s Street View. So the address needs to be one that Street View has filmed. If none of yours work, you can view my film here.

What unfolds next is astonishing, in my opinion. The film pulls in your address and mashes up the film with Google Maps and Street view. You see a video of a boy running down a suburban street, while his outline is also imposed into a satellite view of your neighborhood. As the music picks up pace, various panels open and close, like pop ups, showing different perspectives. At one point, as the boy spins around in one panel, the Street View spins around in another panel in sync revealing your/my house.

It’s hard to explain why, but this is deeply affecting. And it becomes more so when a postcard pops up, asking you to write a note to “your younger self.” You can then click on the postcard while the video is still playing and type a note, and draw, with your mouse, right on the postcard. Matched with the music, this becomes a powerful, emotional experience.

When it’s done, you can immediately see the potential for a new, more interactive multimedia storytelling. HTML 5 and CSS3 can be hard to understand from a technical perspective. But let me share the best explanation I’ve heard.

As the Web works now, when you want to do something like watch a video, you have to stick an object inside a container put it in the browser. One such container is Flash. But when you put something in Flash, it’s like putting plastic wrap around it. You can’t search on it. You can’t interact with it much. With HTML 5, you can now run video in the browser without the plastic wrap around it.

So in the case of things like the Arcade Fire video, you can let people interact with it in real time, and you can continually mash it up with different things on the Web.

In the case of a news organization, I can imagine all sorts of ways to build a crowdsourced video of some event by putting the initial video on the Web, and then allowing other people to contribute data to it so that it morphs the video, or in some instances, allows them to personalize it. Looking back at the Haiti earthquake, imagine starting with a reported segment that then allows people to enter different addresses to view damage in specific areas. This would be hard to do for a breaking clip, but if you created a huge database of crowdsourced photos and video that were geo-tagged, there’s an interesting possibility.

And of course, this is just one example. You can see other Chrome experiments here.

For another perspective on the shift to HTML 5, take a few minutes to watch this video of Scribd founder Jared Friedman talking earlier this year at the Web 2.0 Expo in San Francisco. Scribd allows you to upload documents and view them through a Flash file. Earlier this year, the company made a bold decision to scrap Flash and move to HTML 5. Among the advantages: The text of the documents placed inside Flash can’t be searched. But with HTML 5, now they can be read by search engines.

Here’s Friedman:

And here’s his slides:

Scribd: HTML5 & The Future of Publishing

One final note: While this is all very exciting, it’s also going to be a potential pain. HTML 5 standards are still being worked out, and it’s expected they’ll be implemented over the course of a decade. Each browser developer must bake the new standards into their product, and many will do so at different paces. That means we could be headed for a long stretch of compatability issues, like the ones we had in the 1990s with Navigator and Explorer. (When every site had a ‘this site best viewed in…’ sign somewhere).

In the case of the Arcade Fire, there’s been some grumbling that the site seems optimized for Chrome, and tries to steer you there, when Firefox also has some HTML 5 baked in, as does Microsoft’s next version of Explorer. For more on that potential headache, read this solid write-up from TechCrunch about the “Coming Browser Wars.”