Popcorn.js is a JavaScript library for working with HTML 5 video and audio in a web page.Popcorn.js provides an easy way for manipulating of videos like adding subtitles,integrating google maps etc along with the video on a web page.This Javascript libray can be configured even with less technical know-how or prior HTML or JavaScript experience and knowledge.The main benefit of using this Javascript library is that one can create time-based interactive media on the web.That is Popcorn uses Javascript to link real-time data visualizations,social media and supplemental media to the video playback.
Here we will see the basic scripting and usage of Popcorn and some additional Plugins used in Popcorn to provide rich hypermedia effects.
BASIC USAGE
To get started, you’ll first include the Popcorn.js script in a basic HTML file — you may use just the core or the fully loaded Popcorn.js.
Example..
Or,
download popcorn.js and include it using
Next add a video/audio to your page-This example illustrates using an HTML5 video
Modifying the above code..
html> <head> <script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script> </head> <body> <video height="180" width="300" id="myvideo" controls="controls"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"> </video> <div id="footnote"></div> </body> </html> |
This creates a video player element with an ID “myvideo”,and this ID will be used to indicate to "Popcorn" which video to control.
The example contains videos in .mp4,.ogv and .webm formats to ensure it plays across all major browsers.Also there is a div with ID "footnote" this is to be used later for displaying some text.
Now,adding some javascript lines to create an instance of Popcorn and perform some action.The code below will display some text at 5 second point in the video and the text disappears at 10 second point.
Example..
html> <head> <script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script> <script> document.addEventListener( "DOMContentLoaded", function() { var popcorn = Popcorn( "#myvideo" ); popcorn.footnote({ start: 5, end: 10, target: "footnote", text: "Footer Text" }); }, false ); </script> </head> <body> <video height="180" width="300" id="myvideo" controls="controls"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"> </video> <div id="footnote"></div> </body> </html> |
Also we can make use of Popcorn for You Tube and Vimeo videos that needs to run from a web server.
POPCORN WITH YOUTUBE VIDEOS
The YouTube player allows the use of any Youtube video with the Popcorn.js framework.
Code for Popcorn in you tube..
var pop = Popcorn.youtube( "#video", "http://www.youtube.com/watch?v=9oar9glUCL0" );
pop.footnote({
start: 1,
end: 5,
text: "Works with youtube!",
target: "footnote-div"
});
pop.play();
|
POPCORN WITH VIMEO VIDEOS
Vimeo player as well allows use of Popcorn.js framework.
Code for Popcorn in vimeo..
var pop = Popcorn.vimeo( "#video", "vimeoURL" );
pop.footnote({
start: 1,
end: 5,
text: "Works with vimeo!",
target: "footnote-div"
});
pop.play();
|
PLUGINS IN POPCORN
There are a number of plugins available to achieve several kinds of enhancements just by writing a few Javascript line and adding your little customization.Some of those illustrated here.
Facebook
Google Map
Tag This Person
Image Subtitle Wikipedia
Webpage
Footnote
Facebook
Facebook plugin makes it easy to display elements of facebook at certain time along with video.
Facebook elements like 'LIKE',COMMENT,ACTIVITY... are some of them.
 |
| Fig-1 Facebook elements "LIKE" and "COMMENT" along with video. |
The code snippet to be added in the Javascript file is..
pop.facebook({
start: 8,
end: 10,
target: 'side',
type: 'like', //or comments foa a Facebook comment element
href: 'http://net.tutsplus.com'
});
|
There are some OPTIONS which need to be set by some user input or default values for Facebook plugin.
Start [number]: time you want the plugin to execute (mandatory- in the above code 8 seconds)
End [number]: time you want the plugin to stop (mandatory-10 seconds)
Target [string]: ID of the element to display the content (mandatory-side)
Type [string]: LIKE [default], LIKE-BOX, ACTIVITY, FACEPILE, LIVE-STREAM etc. (
mandatory -like,comments)
Href [string]: URL of the page to like; defaults to the current page (optional)
There are other options as well.
Googlemap
Tagthisperson
Subtitle
Image
Googlefeed
Wikipedia
Webpage
A map of 'Paris' is displayed to the target div at 10 second point of video using Google Map plugin.
 |
| Fig-2 Map of 'Paris' added from google maps at 10 seconds to the 'side' section of the document. |
Javascript..
pop.googlemap({
start: 10,
end: 12,
target: 'side',
type: 'SATELLITE',
location: 'Paris',
zoom: 6
});
|
Google Map options are..
Start [Number] - The time you want the Googlemap to appear.(mandatory)
End [Number] - The time you want the Googlemap to be hidden.(mandatory)
Target [String] - Target is the id of the DOM element that you want the map to appear in. (mandatory)
Type [String] - either: HYBRID (default), ROADMAP, SATELLITE, TERRAIN...
location [String] - An address/location to center the map on. Must be present if lat and lng are not specified.
zoom [Number] - defaults to 0
Tag is a Popcorn plugin that displays a name,link and image.In the following Fig-3 we have two 'tags' added at differant time.
 |
| Fig-3 Two different tags added at 1 seconds and 12 seconds to the 'tags'. |
Javascript..
pop.tagthisperson({
start: 1,
target: 'tags',
person: 'Dany',
image: 'img/dany.jpg',
href: 'danysspace.blogspot.in'
});
|
pop.tagthisperson({
start: 12,
target: 'tags',
person: 'Big Buck Bunny',
image: 'img/buck.jpg',
href: 'http://en.wikipedia.org/wiki/Big_Buck_Bunny'
});
|
Options are..
Start [Number] - is the time that you want this plug-in to execute (mandatory- )
End [Number] - is the time that you want this plug-in to stop executing (Here not mentioned,so the tag is not removed)
Person [String] - is the name of the person who you want to tag
Target [String] - is the id of the document element that the text needs to be attached to.
Subtitle
Another important plugin is 'Subtitle',which helps in adding subtitles over the video or a div.
Javascript..
pop.subtitle({
start: 1,
end: 5,
text: "Subtitles using Popcorn.....",
});
|
In the options the subtile 'text' is to be given along with the start and end options.
 |
| Fig-4 Subtitles over video |
Image
Images can be added/removed at certain time using Image plugin.
Javascript..
pop.image({
start: 2,
end: 10,
target: 'side',
href: 'http://www.marlabs.com/',
src: 'img/marlabs.jpg'
});
|
Has options similar to that of 'Tagthisperson'.
Mention the URL to an RSS feed,and the posts will be displayed in the element you specify.
Javascript..
pop.googlefeed({
start: 4,
end: 10,
target: 'side',
url: 'http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml'
});
|
In the option url,the URL of the RSS feed is given.
 |
| Fig-5 Image and RSS feed using 'Image' and 'googlefeed' plugins. |
Contents from wikipedia can be added to target space with the aid of 'wikipedia' plugin.
Javascript..
pop.wikipedia({
start: 12,
end: 14,
target: 'wiki',
src: 'http://en.wikipedia.org/wiki/Big_Buck_Bunny',
title: 'BIG BUCK BUNNY',
numberofwords: 25 });
|
Contents from Wikipedia are displayed in the div 'wiki'.The source is given in option 'src',and title to be displayed as 'title'.'Numberofwords' specifies the number of words to be pulled in to the target from the source.
 |
| Fig-6 Displaying text from Wikipedia using plugin. |
Creates an iframe and shows the web page given by the user in the URL.
Javascript..
pop.webpage({
start: 16,
target: 'side',
src: 'http://mozillapopcorn.org/'
});
|
Options says the start time ,target,and the source web page.
 |
| Fig-7 Shows web page in side div. |
In addition to those mentioned her there are many other plugins like Footnote,Twitter,Linkedin,Timeline... The complete list and description can be referred here.
