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)
If you are an entrepreneur, you might often get confused about when to raise venture c...Leave a Reply
No trackbacks yet.
No post with similar tags yet.
Posts in similar categories
- Reality TV or Glorified Karaoke Competition? [INFOGRAPHIC]
Cami Hadley and the team over at Cable.tv have created an excellent infographic that summarizes the state of Reality TV singing competitions:
Created by www.Cable.tv
While this does an excellent job of showing the behind-the-scenes absurdity of big budget Reality TV shows, a better question is why is these types of shows are such big-budget events? People... - Semantic Web and LinkedData Explained For The Lay Person
The Semantic Web is beginning to gain steam along with the related (but separate) NoSQL and BigData movements; but what is the Semantic Web (commonly abbreviated "SW")? The term itself sounds like some uber geek-speak and turns off most people without a technical background and appreciation of web evolution almost immediately after hearing it. However,... - SkipSearch ALPHA released
The ALPHA version of SkipSearch has been released!!!
SkipSearch is a proprietary front-end to OpenRecommender, an open source recommendation engine. Its primary features include:
Easy-to-use Interface with hover-intent to reduce clicks, audio controls & shortcuts
Lightweight HTML5 / CSS3 layout
Mobile-friendly, responsive design
Schema.org properties and support for RDFa/Microformats
Import data from multiple accounts (Google/Yahoo/Microsoft/Twitter/Facebook/LinkedIN/Last.FM/StumbleUpon and other social media account integration)
Export functionality... - 11 Ways To Be Remarkably Exceptional
Here's an opposite take on the excellent "11 ways to be unremarkably average" comic by Gavin Aung Than (aka ZenPencils), which was itself inspired by and borrows from a quote by Chris Guillebeau. The funny thing is, if you reverse these warnings and follow the opposite of the steps outlined in that Guillebeau quote, hidden within... - CNN-style Interactive News Ticker (HTML5/CSS3)
With the real, true and unbiased news inevitably moving online towards the so-called "Alternative Media" (which really is almost reaching the point where it is not alternative so much as the first go-to source), its a good idea to start replicating some of the most useful elements from Television, Print and Radio (aka. the rest... - FOAF and the Facebook Death Star
Since the February confirmation of the Facebook IPO, Facebook has continued to stagnate in user-base yet as an organization it holds no punches as it attempts to grow internationally, and its stock price continues to soar as Class A shares finally open up to the average person (major investment firms had first dibs at the... - Unboxing the MintChip
The Royal Canadian Mint(RCM) has sponsored the MintChip Challenge 2012 in an effort to attract developers to the idea of developing software for the MintChip and giving away their best financial application ideas, basically, for free (on the long-shot that you are one of the few who win).
Starting April 1st, 2012, they began mailing out... - Cross-Platform Social Media Sharing Tool
Social media has taken over the web (for now) and the name of the game is sharing, something legislation like SOPA and PIPA just didn't seem to understand. Rather than figuring out a new economic model based on the reality of sharing on the web, that rewards this type of activity (which is essentially just... - iScroll with HTML5 Video and Pause/Resume
iScroll 4 is the latest version and release of an excellent content slider-type JavaScript component by Matteo Spinelli. While one may argue that content sliders are a dime a dozen, iScroll differs in the fact that it has full support for all the main WebKit for iOS gestures including pinch/zoom, pull-up/pull-down, smooth scrolling and screen... - OpenRecommender v1.0 released!
This is a post to announce the ALPHA release of OpenRecommender, version 1.0.
Have you ever wondered if there was a better way to find information on the web? Before today, there has been lots of ways from targeted search to surfing aimlessly, or from social sharing via SNS platforms like Facebook or Google+ to required...
BC$ = Behavior, Content, Money
The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:
1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.
2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.
3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.
Tried using it once a to share chat comments in real-time, however I hadn’t seen it demonstrated together with YouTube so effectively other than the little demo on the project site. Its a great tool to help visualize your content and enhance it, but its tough to do real-time chats that stay relevant to the content without a trash/badword filter, as there are just too many trolls out there… maybe could be an interesting subject for a future post??
Video players are nice especially if they are very compact in size and lightweight… popcorn.js definitely has some cool features.
I’m extremely impressed with your writing talents and also with the structure of your blog as you’ve taken complex topics and made them accessible and easy to understand. Is this blog done by paid subject matter only or do you choose your own topics and customize it yourself? Anyway keep up the excellent quality writing, it is uncommon to locate a great blog like this one these days… Going to keep working on my Popcorn.JS skills