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 »
Recently, I’ve been doing some work with Mozilla around their Web Made Movies project. They’ve been experimenting with the integration of video and the Web enabled by the multimedia features available in modern browser and building tools like Popcorn.js. As we’re starting to take some of those projects out of the lab and into the real world, it’s been interesting to see how those tools hold up and what features are inspired by these situations.
With just a few hours advance notice, the Popcornjs crew put together a video/data mash-up of President Obama’s State of the Union speech for PBS, in which text analysis is displayed in time with the video. Among such a long video, with so much data, WMM leader Brett Gaylor asked if I could build in a feature making it easy to Twitter a short URL right to a point in the middle of the video. Sure I could. Unfortunately, an external service we were using to access the Twitter API broke down, so we couldn’t get the feature working in time to go live. I’ve worked around it, and here it is now.
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.
Yesterday, a friend lamented that he didn’t know of a way to send someone a link to a YouTube video so that it would skip to a certain point. He knew some actors who wanted to show off videos they were in without making people wait through the whole beginning.
Type or paste the URL of a YouTube video into the form
(Optional) Enter the desired starting time
Click Load
Copy the link from your browser’s URL bar or…
When the video loads, play or scrub to the exact desired starting time.
Pause the video
Copy the link or embed code from the form at the bottom to get the link to this video at your starting point.
The format of the URL is pretty simple, if you want to put it together manually. http://chirls.com/v/VIDEO_ID/TIME
VIDEO_ID is that weird string of characters that comes after the “=” in a YouTube watch page link.
TIME is the starting point in seconds. This should not be less than 0 or more than the duration of your video. It must be in whole seconds.
If people find this useful, I’ll keep updating it with new features and bug fixes. Please leave notes and suggestions in the comments section on this post.
Update (March 1, 2009): I’ve changed the URL structure so that the time comes after a slash instead of a “#”, because the old format screwed things up when posting to Twitter and a few other small problems. The old format still works, so existing links should be fine. If you leave off the time, the page will load with your video starting from the beginning.
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.
