Home Directory Services Articles Get Listed Login

Mozilla Reinvents Web Video With Popcorn 1.0

*Attention PHP Programmers* - Add A Free Listing! Get more clients.

Video on the web has always been a bit disappointing. After all, it’s pretty much just like television, only smaller. Unlike the rest of the web, video is just as much a passive experience in your browser as it is anywhere else.

Mozilla would like to change that. The company’s effort to bring a more interactive video experience to the web is known as Popcorn.js and it recently reached 1.0 status. If you’d like to play around with Popcorn, head on over to the Mozilla site and download a copy. Popcorn uses HTML5 video features and at the moment works best in Firefox and Chrome.

At its core, Popcorn is about making HTML5 web video into something more than just another television.

While it’s nice to have a way to embed videos without Flash, HTML5 video is capable of much more than just, well, video. It’s HTML, after all. That means it can tap into things like WebGL, or use JavaScript to augment video in real time — annotating videos with information like location, details about the people and topics in the video, subtitles, Twitter feeds, current weather information, links and much more.

Popcorn is simply a JavaScript library that aims to simplify the process of adding external data culled from around the web to your video. To give an idea of what’s possible with Popcorn, Mozilla is showcasing the movie One Millionth Tower, a documentary film about an apartment building and how residents imagine the future. One Millionth Tower premiered online last weekend at Wired.com. If you haven’t seen it yet, head over to the Underwire blog.

One Millionth Tower uses some tricks beyond Popcorn (like WebGL for some 3-D elements), but most of its coolest effects — like the way the environment in the film changes based on the real-time weather conditions and time of day at the Toronto high-rises where the documentary was filmed — are all courtesy of Popcorn.

If it happens to be snowing in Toronto when you watch the film, it will begin snowing in the virtual world of One Millionth Tower. At other points in the film Popcorn pulls outside information from Flickr, Wikipedia, Google Maps and, of course, Yahoo Weather. Pretty much any web service with an API can be plugged into an HTML5 video in real time with Popcorn.

A more mundane but potentially more widespread use for Popcorn is subtitles. Using Popcorn, a set of subtitles attached to a video could be sent on to an online translation tool and converted to whatever language you wanted on the fly. Popcorn could then pipe the translation back into the video. In other words, subtitle your movie once and anyone will be able to understand it.

So how does Popcorn work? Well, Popcorn.js takes the native HTMLMediaElement properties, methods and events — collectively known as HTML5 video — and normalizes them into an API. The API has a plug-in system so developers can contribute and reuse code for common tasks. In fact, Popcorn already has dozens of plugins for most popular web services like Twitter, various maps, Facebook, Processing.js and, of course, all the services mentioned above in conjunction with One Millionth Tower.

In addition to the Popcorn.js framework, there’s also Popcorn Maker, a web-based graphical user interface for creating Popcorn-based videos. Popcorn Maker is the newest member of the Popcorn family and is not yet a 1.0 release. Its goal is to offer the familiar timeline controls you’d expect in video editing software, but at the moment it’s an alpha release and can be a little buggy. Popcorn Maker is powered by another bit of JavaScript, dubbed butter.js, which could be used to add Popcorn editing features to any desktop video editing software, though as of this writing we aren’t away of any popular video editing apps that use it.

To get started making Popcorn movies head on over to MozillaPopcorn.org, grab the source code, read the documentation, check out the plug-ins and try Popcorn Maker. Also note that, if you prefer, Popcorn can be checked out through GitHub.

Homepage photo: jennie-o/Flickr

See Also:

• Mozilla’s Popcorn Project Adds Extra Flavor to Web Video
• Underwire: At Popcorn Hackathon, Coders Team With Filmmakers to Supercharge Web Video
• Underwire: Premiere: One Millionth Tower High-Rise Documentary Takes Format to New Heights

Source http://www.webmonkey.com/?p=52534
Thu, 10 Nov 2011 14:51:24 GMT
Tags: APIs, HTML5, JavaScript, Multimedia, Web Standards,

---

*Attention PHP Programmers* - Add A Free Listing! Get more clients.

---

APIs

---

HTML5

---

JavaScript

---

Members:

Adobe Builds Flash Sandbox for Firefox

Adobe has partnered with Mozilla to build a more secure version of Flash for Firefox. As with a prev

---

Titanium Mobile Android Development: Installation

In this series of tutorials we use Appcelerator’s Ti

---

W3C’s New ‘Do Not Track’ Group Aims for Better Web Privacy

The web's governing body has embraced the "Do Not Track" header, which might one day stop advertiser

---

This Week in Web – Email Validation, jCanvasScript, Android Development, JS Keyboard Events

PHP isEmail Function

Over the last couple of weeks the issues regarding email validation

---

Using Celery with Django

Introduction

In a recent Django project I needed to issue some HTTP requests to a websit

---

Article Tags
PHP Programmers Articles
Friends:
Live Help Chat Software
Web Design Quote
Web Design