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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    <html>
      <head>
        <script src="popcorn-complete.js"></script>
      </head>
      <body>
        <video id="video" data-timeline-sources="data/data.json"
          controls
          width='250px'
          poster="../../test/poster.png">

          <source id='mp4'
            src="../../test/trailer.mp4"
            type='video/mp4; codecs="avc1, mp4a"'>

          <source id='ogv'
            src="../../test/trailer.ogv"
            type='video/ogg; codecs="theora, vorbis"'>

          <p>Your user agent does not support the HTML5 Video element.</p>

        </video>
        <div id="footnote-container"></div>
        <div id="map-container"></div>
        <div id="iframe-container"></div>
      </body>
   </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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    var sequence = Popcorn.sequence(
      "container-id",
      [
        {
          src: "assets/snowdriving.ogv",
          in: 0,
          out: 5
        },
        {
          src: "assets/snowdriving.ogv",
          in: 7,
          out: 10
        },
        {
          src: "assets/snowdriving.ogv",
          in: 3,
          out: 6
        }
    ]);

1
2
3
4
5
6
7
8
9
10
11
12
13

    var sequence = Popcorn.sequence(...);

    var p = sequence.eq( 0 );

    sequence.listen("play", function() {
      alert("The sequence has started playing");
    });

    sequence.exec( 8, function() {
      alert("8 seconds into the sequence");
    });

    sequence.play();

Live demo showing how to use the sequencer