Last month, I participated in an all-day workshop that Mozilla organized as part of Web Made Movies to introduce filmmakers to the possibilities of interactive video using Popcorn.js. I lobbied to be paired with Yasmine Elayat to create a prototype for her project, 18 Days in Egypt, an interactive documentary covering the recent revolution in Egypt, using citizen-produced video. It’s a credit to Yasmine’s knowledge of the material and the work of the Popcorn.js team that we were able to build and demo the whole thing in a single day.
View the prototype here. It should work in any modern web browser that handles html video (even Internet Explorer 9!). Below, I’ll discuss the challenges and solutions we discovered through the process of building a prototype that tells a story as well as it demonstrates the technology.
The goal of the prototype was to give an overall sense of the subject while giving a viewer the opportunity to “drill down” to additional media for more detail. As powerful as HTML video and Popcorn are, it’s easy to overwhelm the viewer with too much information. So we had to choose the content and design the layout and interaction to tell the story while making it beautiful and avoiding distraction. Read the rest of this entry »
Here’s another demo. This time I’m showing off HTML5 video with a pair of videos by the band Ok Go.
Ok Go made the video for “White Knuckles” all in one shot and by all accounts it wasn’t easy. Thankfully, they also posted an extensive video showing how they did it. The video shows the complex choreography from different angles, edited together in time with the final result. I thought the best way to appreciate the entire process would be to see them side by side.
The new-ish video features of HTML5 allow Javascript code enough control over embedded videos to get two of them playing in sync. Otherwise, they work just like images, so it’s easy enough to stretch and move them around. No plugins (Flash, Silverlight, etc.) are required, and it should work in Firefox, Chrome, Safari(?) and maybe Internet Explorer 9. But no iPhones, iPads or Androids. Your mileage may vary, especially on slow connections where the videos don’t load up quickly.
The approach is not perfect, as seeking around the videos will likely cause synchronization to go off a bit, even on the latest beta versions of both Firefox and Chrome. I’ve written some tricky and maybe even ugly code to try to minimize this problem, but it’s not perfect. The standard event model for the media controllers doesn’t offer quite as much control as I’d like, and the way the browsers load video asynchronously seems to make solving this problem impossible. If anyone has any thoughts or suggestions, please comment.
It’s been nice to see an increased awareness in the media community over the last few years of the opportunities to engage audiences on the Internet. There is a new batch of technologies becoming available that should enhance the kind of experiences, allowing for a level of interactivity and visual expressiveness that could match or rival the films themselves. I’ve been experimenting with some of these, and I wanted to share the results.
Among my favorite of these is the cluster of technologies around HTML5, including CSS3, WebSockets, faster Javascript and especially WebGL. WebGL is a powerful graphics library (analogous to OpenGL) that will give web developers access to hardware graphics acceleration in the browser, standard and without any plugins. Here is a demo I put together using WebGL to map audience demand data on the web to a 3D representation of the Earth.
This is just a prototype, and there’s a lot of room for improvement in performance, aesthetics and interactivity, but I think it shows the potential of what’s possible. The graphics are beyond what we’ve generally seen on the web before, and it’s combined with the kind of portable data that has been spreading around the web for the last few years. I’ll try to clean up the code and get a live demo online soon.
For now, WebGL is only available in Beta versions of Firefox and Chrome (and maybe Safari?). They’re worth downloading early if you’ve got the guts for the occasional bug, and they’ll hopefully be released in the next few months. If you want to take a shot at developing with WebGL yourself, there are great lessons at Learning WebGL and at Mozilla.
I’ve got lots more demos coming, and they’re cooler than this one, so check back for more in the next week or so. I’ll be posting them on YouTube and on Twitter.
As promised in the video, here is a list of some of the tools I use and recommend. If you have any to add, post them in a comment. I’ll update this post if I find any others that are useful.
General Information Tools
WordPress: This is the blogging software that runs this website, as well as foureyedmonsters.com, Workbook Project and tons of others. It’s free and open source. You can have it hosted for free on wordpress.com, or you can download it and install it on your own web server and customize it further. In addition to blog posts, you can set up more permanent “pages” for information about your film that isn’t time-based (example). Learn more and get WordPress at http://wordpress.org
Google Analytics: Most web hosting services provide basic reporting, but Google Analytics offers a clean, more reliable way to track your web traffic and drill down to find more information. I use this mostly to learn where incoming links are coming from and to see which pages and posts on my sites are getting the most attention. This is also free. If you have WordPress, you can use this plugin to easily get Analytics running on your site. Learn more and sign up for Google Analytics at http://google.com/analytics
Discovery Tools
Search Engine Optimization: This is not a specific software tool so much as a tactic for making your website easier to find through search engines. There are a few WordPress plugins out there, but your best bet is to search around the web for articles. Andrew Peterson, who worked on the Four Eyed Monsters distribution team sometimes blogs about SEO. Some people try to game the system or cheat to get higher search rankings, but I try to use tactics that will also make a site easier and more informal for humans as well as for Google. Learn about Search Engine Optimization on Wikipedia
Social Networks: This includes the obvious sites, like Facebook and MySpace, but many other sites have social networking components. YouTube, Flickr, Twitter or any other site that let’s you link up to other friends on the same service is a social network. Most social networks will show your friends what you’re up to, and they will show their friends in turn that they’re watching you.
Spreading and Sharing Tools
Social Bookmarking: A variety of tools exist that allow you to bookmark resources on the web and share them publicly. I use del.icio.us (a.k.a. Delicious), but there are a ton of others (Digg, StumbleUpon, Facebook, etc.), each a bit different in exact purpose and features. Encourage your audience to share your videos, posts, etc. on these sites. I use Social Bookmarking RELOADED, which is a WordPress plugin that automatically adds social bookmarking links to every post on my blog. Also, check out ShareThis, which is what you saw on the Iron Sky site in the above video.
Subscription Tools
RSS and Atom Feeds are formats of machine-readable XML versions of websites. They’re great for reading blogs using news reader software, such as Google Reader. The idea is that posts on blogs you read are pushed to you through the reader software so you don’t have to remember to go back to the blog website. They’re also great for syndicating information between sites. The differences between RSS and Atom are subtle and technical, so for right now, they’re almost the same exact thing. Learn more about feeds
Twitter is a service that allows you to very easily post short updates, up to 140 characters from your cell phone, IM (Jabber/GTalk), a website or a variety of software. People can subscribe to your Twitter feed using RSS/Atom or through Twitter itself via those same platforms (text messages, instant messaging, etc.). You can also use the same RSS feed to syndicate these updates to your website, Facebook or other services. This is a great way to keep the updates coming without much time investment. Learn more and sign up at Twitter.com
Interaction Tools
Disqus: WordPress and other blogging software come with built-in comment functions. Encourage your audience to post comments to keep the discussion going. Disqus is a service that plugs in to your blog and enhances the discussion features. Use these to keep your fans invested, get feedback on what you’re posting and see which fans are most involved. Learn more and sign up for Disqus
cforms: This should be obvious, but not every film site has this. I use this WordPress plugin to create a great contact form on my site so people can email me directly and privately without me having to post my email address online, which invites tons of spam. It also tracks incoming emails in a database so I can keep an eye on who’s in touch. Get cforms
Examples
Here are some film and media channel sites that show off some of the tools and strategies I talked about in this video.
This January at Slamdance, I covered this discussion on alternative funding methods for Filmmaker Magazine. After a month and a half of wrestling with video formats on YouTube, here is the entire panel. Notes and short excerpts clips are on the original post on Filmmaker.
Last week, at Sundance, I managed to squeeze in a quick meeting with Scott Kirsner, who writes one of my favorite blogs, Cinematech. Scott was in Park City to a panel called Digital Opportunities for Creatives, which I missed because it was after I left town. But we had a few minutes to talk about said opportunities, and Scott interviewed me on video for his blog.
Brian’s a smart guy… we mostly talked about the importance of collecting information about your fans (and who’s a super-fan versus someone who’s just mildly interested in your movie). We also touched on the deal that ‘Four Eyed Monsters’ did with YouTube and Spout, where YouTube offered the full movie for free, and Spout served as a sponsor, paying the filmmakers a buck for every new member who joined after watching the movie on YouTube.
Check out Scott’s original post and take a minute to look at some of the other posts on his site.
I’m heading out to Park City in a couple hours for the Sundance Film Festival. I’ll be video blogging, focusing mainly on the panels. But I’ll also be keeping an eye out for intelligent discussions and talks in non-Sundance venues. The plan is to post one video per day with a commentary and whatever additional resources are appropriate. The videos will be posted here and on Filmmaker Magazine‘s site.
If you’re going to be at Sundance and would like to meet up, drop me a line or find me by following me on Twitter. Have fun and remember: carry your phone charger at all times, and be careful opening the toothpaste that first time.
Peter Goldwyn and I disagreed on a few things, which made for a fun and interesting discussion. He seems like a smart guy, and it was good to hear from Peter and Clémence, who have very different sets of experiences.
Correction: In our discussion, I compared the theatrical film industry to the bottled water industry. I mis-stated some figures. Upon further research, I realized that the global bottled water business generates $50bn, whereas the U.S. market is closer to $10 billion (source: ResearchBuy MarketWikis). However, this is still more than the annual U.S. theatrical gross of $9.49bn (source: MPAA). So I think my point is still valid.
Two weeks ago, I had the pleasure of participating in the Power to the Pixel conference at the London Film Festival. Liz Rosenthal, director of the conference, invited me to join Arin, Susan and a number of other pals and speak to a breakout group after the rest of the conference. The Q&A was moderated by Richard Ayers of Magic Lantern.
I introduced myself and my role in the Four Eyed Monsters self-distribution. We focused on the application of traditional business principals to the changing models of media distribution. Have a look:
