Popcorn.js Documentation

Modules

Modules add static functions to Popcorn.js' core.

data-timeline-sources

Purpose

Parse data-timeline-sources attribute on HTML elements.

This module uses Popcorn’s parsers to parse the data inside the data-timeline-sources attribute into a Popcorn instance.

Examples

The following examples showcases how the data-timeline-sources attribute can be used to automatically create Popcorn instances.

 1 <html>
 2       <head>
 3         <script src="popcorn-complete.js"></script>
 4       </head>
 5       <body>
 6         <video id="video" data-timeline-sources="data/data.json"
 7           controls
 8           width='250px'
 9           poster="../../test/poster.png">
10 
11           <source id='mp4'
12             src="../../test/trailer.mp4"
13             type='video/mp4; codecs="avc1, mp4a"'>
14 
15           <source id='ogv'
16             src="../../test/trailer.ogv"
17             type='video/ogg; codecs="theora, vorbis"'>
18 
19           <p>Your user agent does not support the HTML5 Video element.</p>
20 
21         </video>
22         <div id="footnote-container"></div>
23         <div id="map-container"></div>
24         <div id="iframe-container"></div>
25       </body>
26    </html>

sequence( containerId, sourcesArray )

Purpose

Create a sequence of video clips that play back seamlessly.

Options

  • containerId [String] - The id of the HTML element to place videos in
  • sourcesArray [Array] - An array of objects, which contain the following:
    • src [String] - Path to your media file
    • in [String Number] - Start time for this media file
    • out [String Number] - End time for this media file

Instance Methods

  • eq( index ) - Return a Popcorn object for the given object from the sourcesArray
    • index [Number] - The position in the sourcesArray to get the object from
  • play() - Plays the sequence
  • exec( time, callback ) - Executes a function at a given time in the sequence
    • time [Number] - The time in the sequence in which callback will execute
    • callback [Function] - The function that we will execute
  • listen( eventName, callback ) - Listen for an event and fire a callback when that event is triggered
    • eventName [String] - The name of the event to listen for i.e. play, pause, timeupdate, canplayall, etc
    • callback [Function] - The function to run when the event has been fired

Examples

 1 var sequence = Popcorn.sequence(
 2       "container-id",
 3       [
 4         {
 5           src: "assets/snowdriving.ogv",
 6           in: 0,
 7           out: 5
 8         },
 9         {
10           src: "assets/snowdriving.ogv",
11           in: 7,
12           out: 10
13         },
14         {
15           src: "assets/snowdriving.ogv",
16           in: 3,
17           out: 6
18         }
19     ]);
 1 var sequence = Popcorn.sequence(...);
 2 
 3     var p = sequence.eq( 0 );
 4 
 5     sequence.listen("play", function() {
 6       alert("The sequence has started playing");
 7     });
 8 
 9     sequence.exec( 8, function() {
10       alert("8 seconds into the sequence");
11     });
12 
13     sequence.play();

Live demo showing how to use the sequencer