Popcorn.js Documentation

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
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
27
28
29
30
31
32
33
34
35
36
37
38

    <html>
      <head>
        <script src="popcorn-complete.js"></script>
        <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', function () {

          var p = Popcorn("#video");

          p.parseJSON( "data/data.json", function() {
            alert( "JSON Parsed Successfully" );
          });

        }, false);

        </script>
      </head>
      <body>
        <video id="video"
          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>

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
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.sbv"
          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>

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
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.srt"
          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>

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
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.ssa"
          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>

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
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.ttml"
          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>

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
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.ttxt"
          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>

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
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.vtt"
          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>

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
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.xml"
          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>