Parsers

Parsers parse Popcorn data into events. Data can be stored in various types. JSON and XML can store any kind of Popcorn event, while supported subtitle formats ( SBV, SRT, SSA, TTML, TTXT and VTT ) can be parsed into subtitle events.

parseJSON( fileName, callback )”

Purpose

The JSON parser will parse valid JSON into Popcorn events.

The user can also specify the source of their json file using a data-timeline-sources attribute on the media tag. When Popcorn is instantiated, it will search each media element for a data-timeline-sources attribute and try and parse the specified file. NOTE: this requires the use of the data-timeline-sources module

Options

fileName [String] - A path to the JSON file.
callBack [Function] - An optional function to be executed when the JSON data has completed parsing.

Use Case

Parse a JSON file containing popcorn data

Example

Parses a JSON file:

 1 <html>
 2       <head>
 3         <script src="popcorn-complete.js"></script>
 4         <script type="text/javascript">
 5 
 6         document.addEventListener('DOMContentLoaded', function () {
 7 
 8           var p = Popcorn("#video");
 9 
10           p.parseJSON( "data/data.json", function() {
11             alert( "JSON Parsed Successfully" );
12           });
13 
14         }, false);
15 
16         </script>
17       </head>
18       <body>
19         <video id="video"
20           controls
21           width='250px'
22           poster="../../test/poster.png">
23 
24           <source id='mp4'
25             src="../../test/trailer.mp4" type='video/mp4; codecs="avc1, mp4a"'>
26 
27           <source id='ogv'
28             src="../../test/trailer.ogv"
29             type='video/ogg; codecs="theora, vorbis"'>
30 
31           <p>Your user agent does not support the HTML5 Video element.</p>
32 
33         </video>
34         <div id="footnote-container"></div>
35         <div id="map-container"></div>
36         <div id="iframe-container"></div>
37       </body>
38     </html>

SBV parser

Purpose

The SBV parser allows the user to parse SBV subtitle data in order to populate a subtitle track event.

The user specifies the source of their SBV file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the specified file.

Here is some additional information on the SBV subtitle format.

Options

data-timeline-sources [String] - a media element attribute that specifies the source of the file to be parsed

Use Case

Parse a SBV file of subtitle data

Example

Parses a popcorn SBV subtitle file to populate a subtitle track

 1 <html>
 2       <head>
 3         <script src="popcorn-complete.js"></script>
 4       </head>
 5       <body>
 6         <video id="video" data-timeline-sources="data/data.sbv"
 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>

SRT parser

Purpose

The SRT parser allows the user to parse SRT subtitle data in order to populate a subtitle track event.

The user specifies the source of their SRT file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the specified file.

Options

data-timeline-sources [String] - a media element attribute that specifies the source of the file to be parsed

Use Case

Parse a SRT file of subtitle data

Example

Parses a popcorn SRT subtitle file to populate a subtitle track

 1 <html>
 2       <head>
 3         <script src="popcorn-complete.js"></script>
 4       </head>
 5       <body>
 6         <video id="video" data-timeline-sources="data/data.srt"
 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>

SSA parser

Purpose

The SSA parser allows the user to parse SSA subtitle data in order to populate a subtitle track event.

The user specifies the source of their SSA file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the specified file.

Options

data-timeline-sources [String] - a media element attribute that specifies the source of the file to be parsed

Use Case

Parse a SSA file of subtitle data

Example

Parses a popcorn SSA subtitle file to populate a subtitle track

 1 <html>
 2       <head>
 3         <script src="popcorn-complete.js"></script>
 4       </head>
 5       <body>
 6         <video id="video" data-timeline-sources="data/data.ssa"
 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>

TTML parser

Purpose

The TTML parser allows the user to parse TTML subtitle data in order to populate a subtitle track event.

The user specifies the source of their TTML file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the specified file.

Options

data-timeline-sources [String] - a media element attribute that specifies the source of the file to be parsed

Use Case

Parse a TTML file of subtitle data

Example

Parses a popcorn TTML subtitle file to populate a subtitle track

 1 <html>
 2       <head>
 3         <script src="popcorn-complete.js"></script>
 4       </head>
 5       <body>
 6         <video id="video" data-timeline-sources="data/data.ttml"
 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>

TTXT parser

Purpose

The TTXT parser allows the user to parse TTXT subtitle data in order to populate a subtitle track event.

The user specifies the source of their TTXT file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the specified file.

Options

data-timeline-sources [String] - a media element attribute that specifies the source of the file to be parsed

Use Case

Parse a TTXT file of subtitle data

Example

Parses a popcorn TTXT subtitle file to populate a subtitle track

 1 <html>
 2       <head>
 3         <script src="popcorn-complete.js"></script>
 4       </head>
 5       <body>
 6         <video id="video" data-timeline-sources="data/data.ttxt"
 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>

VTT parser

Purpose

The VTT parser allows the user to parse VTT subtitle data in order to populate a subtitle track event.

The user specifies the source of their VTT file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the specified file.

Options

data-timeline-sources [String] - a media element attribute that specifies the source of the file to be parsed

Use Case

Parse a VTT file of subtitle data

Example

Parses a popcorn VTT subtitle file to populate a subtitle track

 1 <html>
 2       <head>
 3         <script src="popcorn-complete.js"></script>
 4       </head>
 5       <body>
 6         <video id="video" data-timeline-sources="data/data.vtt"
 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>

XML parser

Purpose

The XML parser allows the user to parse XML data that contains popcorn data in order to populate a popcorn instance.

The user specifies the source of their XML file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the specified file.

Options

data-timeline-sources [String] - a media element attribute that specifies the source of the file to be parsed

Use Case

Parse a XML file of popcorn data

Example

Parses a popcorn XML file ( this example is assuming your XML file is called data.xml ) and that you are using data-timeline-sources

 1 <html>
 2       <head>
 3         <script src="popcorn-complete.js"></script>
 4       </head>
 5       <body>
 6         <video id="video" data-timeline-sources="data/data.xml"
 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>