Home/ Questions/Q 6370965
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:59:56+00:00

I want to display different context-sensitive content during a video playing on a website.

  • 0

I want to display different context-sensitive content during a video playing on a website. I am using HTML5 video and need a JavaScript API to handle eventing. I will need to control the video player as well as react to different time intervals in the video.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Popcorn.js is an open source JavaScript library for programming rich interactive experiences with HTML5 Video and Audio elements and provides a very simply API to “display different context-sensitive content during a video playing on a website”.

    Take a look at the demo gallery here: http://popcornjs.org/demos

    Here is a tutorial, build with Popcorn.js, that shows how to create a simple Popcorn.js program: http://popcornjs.org/popcorn-101

    The docs can be found here: http://popcornjs.org/api (this is still in progress)

    The following example uses the Popcorn Footnote plugin to display a simple message under the video at specific time in during the playback:

    <!DOCTYPE html> 
<html> 
<head> 
  <title>Popcorn Simple Example</title> 
  <script src="http://code.jquery.com/jquery.min.js"></script> 
  <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script> 

  <script> 
  $(document).bind( "ready", function(){
      // Create a popcporn instance by calling Popcorn("#id-of-my-video")
    var pop = Popcorn("#video");


    // add a footnote at 2 seconds
    pop.footnote({
          start: 2,
          end: 6,
          text: "This footnote is the stepping stone of progress!",
          target: "footnote-container"
        });

    // play the video right away
    pop.play();

  });
  </script> 
</head> 
<body> 
  <video height="180" width="300" id="video" controls> 
  <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source> 
  <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source> 
  <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source> 
  </video> 


<div id="footnote-container"></div> 
</body> 
</html>

    Working example here: http://jsfiddle.net/rwaldron/6PEU8/

    A recent demo shows how you could use an audio element as a slideshow controller, here: http://jsfiddle.net/rwaldron/DjmLM/

    • 0