Mozilla's HTML5 Video Framework
Popcorn.js is Mozilla's HTML5 video and media library for the open web. It allows web developers, filmmakers, artists, designers and others to easily create timeline based web productions. Popcorn.js helps simplify media API and implementation differences between browsers and includes a powerful event system and a rich plugin architecture and plugins.
Popcorn.js can be used with almost any media type you can imagine, from HTML5 audio and video, to YouTube and Vimeo, to SoundCloud, etc. Popcorn.js also has plugins to allow content from popular web sites and services to be integrated easily, for example, Wikipedia, Facebook, Google Maps, etc.
Anything you can do on the web can be turned into a Popcorn.js plugin, and become part of a timeline-based web experience. Popcorn.js breaks video out of the box and allows media to fully interact with the rest of the web.
Try a live code example here.
- Install
node and npm, find more details here - Install express running the command
npm install --save express - Run the command
node serverfrom the root path ofpopcorn-js - Open your favourite browser and navigate to
http://localhost:8000/test/
Note. Some tests need focus and might be failing, refer to console or test output to check when a test fails.
The Popcorn.js community is a mix of developers, filmmakers, artists, and everything in between. If you are interested in using Popcorn.js or helping us build it, you can use one or more of the following:
You can follow the project's bugs and activity here.
Popcorn.js offers a powerful plugin architecture. Plugins are a way for developers to wrap web functionality and allow it to be placed on a timeline, responding to a point in a video or other media resource.
Take a look at our growing gallery of officially supported plugins.
Have you built a cool plugin, or have an idea for one? Let us know!
Popcorn.js is made available under the MIT License.
Popcorn.js is built and maintained by a growing community, with the support of:
A changelog can be found here.