DZone
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
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
11 Monitoring and Observability Tools for 2023
Learn more
  1. DZone
  2. Data Engineering
  3. Data
  4. 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 · Interview
Like (0)
Save
Tweet
Share
3.89K 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

  • Key Elements of Site Reliability Engineering (SRE)
  • Introduction to Automation Testing Strategies for Microservices
  • The 5 Books You Absolutely Must Read as an Engineering Manager
  • OWASP Kubernetes Top 10

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • 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: