On April 24, 2010 i attended Drumbeat, a Mozilla initiative aimed at gathering creative people around big ideas and practical projects that will improve the Open Web. One of the projects that rose from this initiative is WebMadeMovies – an innovation lab transforming the way we create and experience video on the web. With the announcement of HTML5 and the new <video> <audio> and <canvas> tags came a whole new era for web users. However, in order for users and developers to benefit from these new tags – without having to study them that it – easy use tools have to be made available. If you have read my blog before, you would know that I am currently working on a project that allows 2D and 3D visualizations via the <canvas> element called processing-js. Now, I am pleased to announce the start of a new project specifically made for WebMadeMovies. The project is called popcorn-js and its aim is to allow movie-makers to work and share their stories online. Because the project in still in its infant stage it is hard to say which direction it will go but one thing is for sure: it will be open-source.
To get some hype and spread the word about popcorn-js, the popcorn team has released a working demo. I know what you are thinking, it looks awesome but what am i looking at? Let me take some time to explain. The one sentence answer is popcorn-js displays meta data that was added to the video via a separate XML file. So if a filmmaker wants to share a video and emphasize some important points like featured people, news stories about the topic, background information, or even the current location they can do so by following an XML structure. The XML structure has not been finalized. We are currently working on a way to make it easy and quick to write and even discussing the possibility of giving the user the ability of exporting information from Final Cut Pro.
If you are interested in using popcorn-js to enhance your own video here is how to do it:
- download the source files from GitHub
- edit the webmademovies.xml file found in the xml folder
- edit the <video> tag in the index.html so that it links to your video. Note the video can be already online or in a directory
- launch index.html and see the magic happen
Whats next for popcorn-js
We are currently looking for ideas for new demos. Some ideas include blurring parts of the video on mouse-over, editing the video online, and making the actual video spin. We are also discussing turning popcorn-js into a video library similar to processing-js that will enable video interaction and manipulation.
Looking to get involved?
There is countless ways for people to get involved in the project including idea generation, video generation, bug filing, documentation, promotion, and of course writing code. If you want to get involved here is a list of links to get you started:
- #popcorn irc channel
- popcorn-js lighthouse account
- popcorn-js GitHub repo you can fork from
- to join an online discussion or see people’s comments visit the project site
- to view the most recent demo visit webmademovies.org
- mozilla wiki