Home arrow Web Standards arrow Mozilla Popcorn Maker 1.0 Makes Videos More Interactive
WEB STANDARDS

Mozilla Popcorn Maker 1.0 Makes Videos More Interactive


As a website developer, you know how difficult it is to add text, overlays, links, and other potentially interactive elements to videos. Earlier this month, however, Mozilla changed that when they released Popcorn Maker 1.0. Based entirely on web standards, this video editing software allows even non-programmers to achieve excellent results.

Author Info:
By: Terri Wells
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
November 19, 2012

print this article
SEARCH DEVARTICLES

As a website developer, you know how difficult it is to add text, overlays, links, and other potentially interactive elements to videos. Earlier this month, however, Mozilla changed that when they released Popcorn Maker 1.0. Based entirely on web standards, this video editing software allows even non-programmers to achieve excellent results.

As you'll learn from the application's tutorial, Popcorn Maker operates off of a timeline onto which the user drops various elements, or “events.” These events can be text, images, Google Maps, Wikipedia entries, links to other web pages, and more. Users can position these elements to pop up not only at certain points in the timeline, but in certain positions on the video (such as the upper lefthand corner). Users can also control how long they stay on screen, how big they are, and how they leave the screen.

Since users can add web pages, which change over time, videos created with Popcorn Maker may look a little different each time they're played. The application doesn't simply take a snapshot of what you've uploaded to use and save it; if you've added web pages and web links, “the data is pulled live from the web as the video is played back,” explained Shawn Knight writing for Tech Spot. “What you end up with is something that is much more like a webpage than a simple video clip since it can be interactive and embedded with numerous helpful links.”

While Popcorn Maker's tutorial gives one a feel for how it is done, it can be hard to understand the true potential of the application to add rich information to a video without seeing it in action. The Verge included in its article on the topic a TED talk which had been enhanced with Popcorn Maker. It's worth spending the 15 minutes watching the video to see what can be done.

I won't lie – at some points in the video, the “enhancements” distract rather than truly add. But many other additions were both well-timed and highly relevant. The user of the app added a Google Map when the speaker mentioned a particular location; a link to the LinkedIn profile of someone the speaker said helped on the project; a link to the paper being discussed when the speaker mentioned he couldn't go into its full details; gave the name of a volunteer who helped with the final demonstration of this TED talk; and more. I found myself wanting to stop the talk at certain points to click on these links to fuller background information. I let it play without doing so – but I may replay the enhanced version of the talk later so I can check out those links.

Keep in mind that Mozilla is committed to open source, and it definitely shows in Popcorn Maker. Knight notes that “Popcorn Maker hosts your creations and provides an embeddable player for finished projects. And congruent with Mozilla's open source philosophy, the player includes a 'remix' button that allows anyone to use your work as a jumping off point for a new video.” If you would like to take videos for your blog or website to the next level without putting in a painful amount of work, consider checking out Popcorn Maker.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All Web Standards Tutorials
More By Terri Wells


blog comments powered by Disqus
WEB STANDARDS ARTICLES

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials