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