Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

Popcorn.js + Embedded Video = Semantically Enhanced Video Content

Posted by bcmoney on March 9, 2012 in JavaScript, Multimedia, Semantic Web with 3 Comments


No Gravatar

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': '
CLOSE

Tear 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-

 

  1. JohnAugueNovember 9, 2012 - 10:05 am #1

    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??

    Reply
  2. Waldo PepitoNovember 27, 2012 - 3:47 am #2

    Video players are nice especially if they are very compact in size and lightweight… popcorn.js definitely has some cool features.

    Reply
  3. YvonneThePopcornPopperDecember 26, 2012 - 5:44 pm #3

    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

    Reply
Leave a Reply

No trackbacks yet.

No post with similar tags yet.

Posts in similar categories

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.

  • Archives

  • Switch to our mobile site