/Get ready for some popcorn!

Get ready for some popcorn!

Intro

Popcorn  is Mozilla’s new HTML5 media toolkit, launched 5 November 2011 “version 1

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web. Popcorn.js is part of Mozilla’s Popcorn project.

Popcornjs Demo

Download

Popcorn-complete.js : http://popcornjs.org/code/dist/popcorn-complete.js

 Popcornjs : http://popcornjs.org/download

Start using popcorn

1 –   the GUI popcorn makerit’s a graphical user interface to insert your video and add your preferred effects, images, notes, text, etc… Then export the project in two formats “HTML or JSON” or just copy the code to your preferred web page 😀 2 – create a web page and add video & effects by yourself

  • create a html page
  • add two <div> elements in the page and give each one ID “one for the video – one for footnote “
  • link the popcorn core library
  • add the script for videos

Here is a HTML sample file

<!doctype html>
<html> 
<head>
 <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
 <script>
      // ensure the web page (DOM) has loaded
      document.addEventListener("DOMContentLoaded", function () {
           // Create a popcorn instance by calling the Youtube player plugin
         var example = Popcorn.youtube(
           '#video',
           'http://www.youtube.com/watch?v=CxvgCLgwdNk' );
         // add a footnote at 2 seconds, and remove it at 6 seconds
         example.footnote({
           start: 2,
           end: 6,
           text: "Pop!",
           target: "footnotediv"
         });
         // play the video right away
         example.play();
      }, false);
    </script> 
</head>
 <body> 
 <div id="video" ></div>
 <div id="footnotediv"></div>
 </body> 
</html>

It’s a simple web page with video element

The script just create an instance of popcorn by calling YouTube player plugin then adding footnotes and play the video

now just test the sample in your browser

More

Mozilla popcorn

popcorn.js     Enjoy your popcorn 😀