Popcorn.js + Embedded Video = Semantically Enhanced Video Content
Popcorn.js is an incredibly useful framework for adding timing-based events and/to Semantic metadata to rich content.
Tear gas used against OWS protesters - Image via Wikipedia
According to Mozilla: “Popcorn makes video work like the web. We create tools and programs to help developers and authors create interactive pages that supplement video and audio with rich web content, allowing your creations to live and grow online.”
With it, you could even re-create VH1’s famous “popup video” or MuchMusic’s Video-on-trial effect.
To implement Popcorn with a standard HTML5 video player, the basic structure looks as follows:
<html>
<head>
</head>
<body>
<video id="ourvideo" width="300" height="180">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
</video>
<div id="footnote"></div>
<script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script>
<script>
document.addEventListener( "DOMContentLoaded", function() {
var popcorn = Popcorn( "#ourvideo" );
popcorn.footnote({
start: 2,
end: 5,
target: "footnote",
text: "Pop!"
});
}, false );
</script>
</body>
</html>
By default Popcorn.js will simply output text (or mixed HTML content) directly to the DOM. To give it more of an authentic “pop-up video” type of feel, I added some CSS effects courtesy of earlier work done by Nicholas Gallagher in Pure CSS Speech Bubbles, as well as some dynamic full-screen video resizing courtesy of WebDesignerWall in Elastic Videos and last but not least, the audio effect for the popup comes from the DailyWav archives.
The resulting CSS was as follows:
/********************* TOOLTIP *********************/
.tooltip {
position:absolute;
width:60%;
padding:15px 30px;
margin:0;
color:#fff;
text-shadow:#123456 1px 1px 1px;
background:#5a8f00; /* default background for browsers without gradient support */
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
background:-moz-linear-gradient(#b8db29, #5a8f00);
background:-o-linear-gradient(#b8db29, #5a8f00);
background:linear-gradient(#b8db29, #5a8f00);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
z-index:1000000;
}
.tooltip a { color:goldenrod; text-decoration:none; border-bottom:1px dotted #ccc; }
/* display of quote author (alternatively use a class on the element following the blockquote) */
.tooltip + p { margin:15px 0 2em 85px; font-style:italic; color:grey; }
.tooltip + p:before { content:" ~ "; }
/* creates the triangle */
.tooltip:after {
content:"";
position:absolute;
bottom:-50px;
left:50px;
border-width:0 20px 50px 0px;
border-style:solid;
border-color:transparent #5a8f00;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* Close text (could be an icon) */
#closeWindow { cursor:pointer; float:right; margin:-15px 10px 2px 5px; color:red; }
/********************* VIDEO *********************/
#video {
width:100%;
max-width:1280px;
display:block;
text-align:center;
margin:0 auto;
}
* html #video #player {
margin-bottom: 30px;
margin-bottom: 0;
}
#video #player {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
#video #player video,
#video #player iframe,
#video #player object,
#video #player embed,
#video #player applet {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:1;
}
The resulting JavaScript behavior can be set up as such:
// capture "CLOSE" click and hide Tooltip
$(document).ready(function () {
$('#closeWindow').live('click', function () {
$(this).parent().parent().hide();
});
});
document.addEventListener("DOMContentLoaded", function () {
// Create a popcorn instance by calling the Youtube player plugin (apply to element with id="video-player", and on the specified video URL)
var popcornVideo = Popcorn.youtube('#player', 'http://www.youtube.com/watch?v=j7r2ETi5C1A&autoplay=1');
// add a footnote at 25 seconds, and remove it at 1 minute and 5 seconds mark
popcornVideo.footnote({
'id': 'wikipedia',
'start': 25,
'end': 65,
'target': 'popups',
'title': 'Tear Gas',
'text': 'CLOSETear gas, formally known as a lachrymatory agent or lachrymator (from lacrima meaning "a tear" in Latin), is a non-lethal chemical compound that stimulates the corneal nerves in the eyes to cause tearing, pain, and even blindness. Common lachrymators include OC, CS, CR, CN, nonivamide, bromoacetone, phenacyl bromide, xylyl bromide and syn-propanethial-S-oxide (from onions). Lacrymators often share the structural element Z=C-C-X, where Z indicates carbon or oxygen, and X indicates bromide or chloride.
',
'top': '10%',
'left': '70%'
});
// play the video right away
popcornVideo.play();
}, false);
Lastly, the HTML structure should look something like this:
<section id="semantic-video">
<article id="contextual-info">
<div id="overlayDiv"></div>
<div id="overlayDiv-Map"></div>
<div id="popups"></div>
</article>
<article id="video">
<div id="player"></div>
</article>
</section>
Check it out in action with YouTube below, using a video that provides a contextual popup about protest footage from Occupy Wall Street, which in this case really adds a chilling effect and helps feel a sense of injustice committed towards the Occupy Oakland protesters (by displaying the definition of “tear gas” from Wikipedia alongside the YouTube clip of the news footage where they lightly gloss over the fact that tear gas may have been released):
-or-
Related articles
- #MozFest – Build ‘social video’ using Popcorn Maker (blogs.journalism.co.uk)
- Popcorn Framework Brings Interactive Video To The People’s Choice Awards (reelseo.com)
- Semantic Web In Action – Triplify | David Kuhta (davidkuhta.com)
- The Semantic Line Interface (developers.slashdot.org)
- Suggest semantic tags for short snippets of text (stackoverflow.com)
- Mozilla Reinvents Web Video With Popcorn 1.0 (webmonkey.com)
