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.
This Saturday, I will be speaking on a roundtable on metadata at the Open Video Conference and presenting an informal demonstration of new, metadata-related software I’ve been working on at the “Hack Day” on Sunday.
For the past year or so, I’ve been hearing bits of the film industry slowly wake up to the fact that the state of media metadata is a mess. The complete lack of open, common data formats leaves media producers struggling to conform their data to a variety of proprietary formats, only to result in outdated and inaccurate information left under the control of others. Worse, existing processes discriminate against independent producers by limiting what counts as a “real” movie, album or other work.
I have been working on a project called Open Media Object Format, which is a free (both as in beer and as in speech) protocol and file format for publishing rich metadata on a range of media. The protocol creates a distributed network of information on media and its participants, allowing the information to spread while every creator maintains authority over their own work. And the format is designed to store semantic data in more detail than we’ve seen before. The Open Media Object Format is an effort to address the above problems while bringing metadata away from the mere administrative, opening up possibilities for pretty cool stuff we haven’t seen before.
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.
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.
Until now, I’ve been posting links automatically using del.icio.us. del.icio.us is a very useful social bookmarking tool. The site has an “experimental” feature that will automatically post to your blog a daily digest of any links you’ve bookmarked.
It’s a cool feature, but it’s extremely limited. You can’t import del.icio.us keyword tags as wordpress tags, and you can’t change that boring post title (e.g. links for 2007-11-27). Most importantly, it doesn’t let you filter which links get posted. So I’ve had to stop bookmarking things that wouldn’t be appropriate for the blog (even though they’d still be public).
So I’ve stopped it, until they fix it or until I come up with something better. From now on, if I have something to share, I’ll just write a post about it.
On the technical side of things, I want to discuss one very important feature of web hosting for filmmakers or anyone else. Frequently, a program running on a server will access other web sites behind the scenes (often using cURL). A major innovation of the vaguely defined Web 2.0 is that web applications can share data via XML (as in RSS) and other machine-readable formats. Previously, everything on the web was mostly stored in HTML, which ties the information to the layout, making it readable only by humans, making data-sharing tedious.
I’m working on some custom software that will use cross-site data sharing. But even WordPress, the blogging software that powers this site needs it to fully function. WordPress will certainly run without it, but here are some key features that require it:
Comment spam filtering. WordPress uses the Akismet plugin. To check incoming blog comments against a database of known spammers. It doesn’t work if your site can’t access the Akismet server.
Trackbacks and pingbacks allow your blog to automatically post a comment on other blogs that your posts reference. This is a great way to encourage cross-site discussion and make other bloggers aware that you’re writing about them. It’s also great for driving traffic to your site by creating a link on another site.
Update services such as Pingomatic notify blog directories every time you update your site. Certain plug-ins can also directly ping Google and other search engines so your search listings are as up-to-date as possible. Great for driving search traffic to your site
Feed Syndication. You may want to have on your site a list of links or posts from other services such as Flickr, Twitter or del.icio.us. There are WordPress plugins that will use RSS or Atom feeds to automatically update these lists.
Even if you’re hosting service does support cross-server connections, it’s not a bad idea to make sure the above features are enabled and working correctly.
Unbelievably, my current hosting service, aplus.net, does not allow this kind of intra-server data sharing. They claim that it’s a security problem, which I understand. But it’s so important that I have to switch to a different service and question the viability of their business. So I will be switching to Site5, which was recommended to me by Lance Weiler, who uses it to host the Workbook Project. So we’ll see how it turns out. (The fact that this site has been intermittently unavailable today has me more confident that this is the right decision.)
It can take two or three days to fully move a web site to a different hosting service, so don’t be surprised if you encounter some problems with this site. For starters, I’m going to disable comments on the old server to avoid synchronization issues. If there’s anything else that’s surprising or persists more than a few days, please do let me know.
