DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Painlessly Mix Media and Data Streams with Mozilla's New Popcorn 1.0

Painlessly Mix Media and Data Streams with Mozilla's New Popcorn 1.0

John Esposito user avatar by
John Esposito
·
Nov. 08, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
3.70K Views

Join the DZone community and get the full member experience.

Join For Free

Mozilla recently released version 1.0 of its new JavaScript framework for HTML5 media, called Popcorn.

You may be thinking, 'I know all about HTMl5; I can interact with media just fine.' Maybe, but Popcorn looks to make HTML5 media really, really easy to use.

For example, say you were showing a documentary film (or commercial advertisement!) about New York City, and wanted your users to see current hotel prices in the neighborhood presently on screen. Youtube provides this time-keyed link functionality, but those links appear in the video itself, and then you're tied to Youtube. But timing your link requests from a video to a datastream outside the video can be tricky, or at the very least annoying.

Mozilla's Popcorn.js is designed to make this kind of mingling of media and non-media streams painless and reliable. Here's their blurb:

Popcorn.js utilizes the native HTMLMediaElement properties, methods and events, normalizes them into an easy to learn API, and provides a plugin system for community contributed interactions.

Popcorn has dozens of plugins for common services and APIs, ranging from Twitter, to Maps, to media events, and more. But if it doesn’t do what you need right now, you can write your own plugins quickly and easily.

We'll get to the plugins later. But for the lazy-but-eager coder in you, here's how easy it is to key a textual footnote to a particular time-range in a video using Popcorn.js: 

   var pop = Popcorn("#ourvideo");

         // add a footnote at 2 seconds, and remove it at 6 seconds
         pop.footnote({
           start: 2,
           end: 6,
           text: "Pop!",
           target: "footnotediv"
         });

That's so short, it's less than a no-brainer. A million monkeys could write that JavaScript by accident.

But Popcorn.js opens a lot more doors than time-keyed events. To see what I mean, take a few minutes to browse the interactive documentary 'One Millionth Tower', created with Popcorn and premiered at Wired.com. The first thing to notice: the 3D model of the highrise project takes its weather from Toronto's actual weather conditions. So it's the reverse of pulling times out of a video: it's pushing weather data into a WebGL rendering. Sure, doable without Popcorn, but very simple with it.

The API is tiny but quite specific. Browse here, if you just want to develop with Popcorn. But Mozilla made the project fully open-source, and open requests for your involvement are scattered all over the Popcorn developer site -- so consider checking out the source too.

One of Popcorn's coolest features for rapid development is its already-considerable load of plugins, of which the above code's footnote is one. Other plugins currently available include:

  • Openmap
  • Code
  • Facebook
  • Googlefeed
  • Linkedin
  • Lowerthird
  • Pause plugin
  • Processing.js
  • Timeline
  • Tag This Person
  • Lastfm
  • Image
  • Wikipedia
  • Webpage
  • Flickr
  • Google Map
  • Twitter
  • GML
  • Mustache
  • Wordriver
  • Attribution
  • Subtitle

Some of these are very practical (Attribution), others are just flashy (Wordriver displays a periodically fading string of text). Notice that many of these plugins are specifically designed to break the ('fourth') wall between audiovisual representation of the world, and direct web access to things about the real world.

The idea isn't new, but now it's easy.

Follow the delicious buttery scent to the splash page (which includes some well-done promo videos) or the developer's site (a quiet, JavaScript-y gray). Or read the documentation raw (which, you may not be surprised to learn, does not address iOS-specific HTML5 audio/video issues) -- but maybe first run some demos to see what Popcorn can help you do.

 

Update: RAMP announced its official support for Popcorn.js at the Mozilla Festival in London last week. Looks like a significant endorsement from a major player in web content optimization. 

Media (communication) Data (computing) Mix (build tool)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Get Started With Cloud-Native Decision Automation on Quarkus
  • Better Scaffolding with jQuery - Part I
  • Low-Code Development: Why It Is Important and Why It Can't Replace Traditional Approach
  • Apache Harmony Finally Defeated

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo