1- vtt.js
2- ======
1+ # vtt.js
32
43[ ![ Build Status] ( https://travis-ci.org/mozilla/vtt.js.svg?branch=master )] ( https://travis-ci.org/mozilla/vtt.js ) [ ![ npm-version] ( http://img.shields.io/npm/v/vtt.js.svg )] ( https://www.npmjs.org/package/vtt.js ) [ ![ Dependency Status] ( https://david-dm.org/mozilla/vtt.js.svg?theme=shields.io )] ( https://david-dm.org/mozilla/vtt.js ) [ ![ devDependency Status] ( https://david-dm.org/mozilla/vtt.js/dev-status.svg?theme=shields.io )] ( https://david-dm.org/mozilla/vtt.js#info=devDependencies )
54
65Implementation of the [ WebVTT] ( https://developer.mozilla.org/en-US/docs/HTML/WebVTT ) spec in JavaScript. Can be used
76in NodeJS, on the browser, and many other places. Mozilla uses this implementation for parsing and processing WebVTT
87files in Firefox/Gecko.
98
10- ##Table of Contents##
9+ ## Table of Contents
1110
1211- [ Spec Compliance] ( #spec-compliance )
1312- [ API] ( #api )
@@ -42,8 +41,7 @@ files in Firefox/Gecko.
4241 - [ Writing Tests] ( #writing-tests )
4342 - [ Grunt Run Task] ( #grunt-run-task )
4443
45- Spec Compliance
46- ===============
44+ # Spec Compliance
4745
4846- [ Parsing] ( http://dev.w3.org/html5/webvtt/#webvtt-file-format-parsing ) (Completed)
4947 - [ File] ( http://dev.w3.org/html5/webvtt/#webvtt-file-parsing ) (Completed)
@@ -62,17 +60,16 @@ Spec Compliance
6260 - [ VTTCue] ( http://dev.w3.org/html5/webvtt/#vttcue-interface ) (Completed) *** Shims the TextTrackCue interface as well***
6361 - [ VTTRegion] ( http://dev.w3.org/html5/webvtt/#vttregion-interface ) (Completed)
6462
65- ### Notes###
63+ ## Notes
6664
6765Our processing model portion of the specification makes use of a custom property, ` hasBeenReset ` . It allows us to detect
6866when a VTTCue is dirty, i.e. one of its properties that affects display has changed and so we need to recompute its display
6967state. This allows us to reuse a cue's display state if it has already been computed and nothing has changed to effect its
7068position.
7169
72- API
73- ===
70+ # API
7471
75- #### WebVTT.Parser####
72+ ## WebVTT.Parser
7673
7774The parser has a simple API:
7875
@@ -94,7 +91,7 @@ use, a StringDecoder is provided via `WebVTT.StringDecoder()`. If a custom
9491StringDecoder object is passed in it must support the API specified by the
9592[ #whatwg string encoding] ( http://encoding.spec.whatwg.org/#api ) spec.
9693
97- #### parse(data)####
94+ ### parse(data)
9895
9996Hands data in some format to the parser for parsing. The passed data format
10097is expected to be decodable by the StringDecoder object that it has. The parser
@@ -108,12 +105,12 @@ parser.parse("<v.loud Mary>That's awesome!");
108105parser .flush ();
109106```
110107
111- #### flush()####
108+ ### flush()
112109
113110Indicates that no more data is expected and will force the parser to parse any
114111unparsed data that it may have. Will also trigger [ onflush] ( #onflush ) .
115112
116- #### onregion(region)####
113+ ### onregion(region)
117114
118115Callback that is invoked for every region that is correctly parsed. Returns a [ VTTRegion] ( #http://dev.w3.org/html5/webvtt/#dfn-vttregion )
119116object.
@@ -124,7 +121,7 @@ parser.onregion = function(region) {
124121};
125122```
126123
127- #### oncue(cue)####
124+ ### oncue(cue)
128125
129126Callback that is invoked for every cue that is fully parsed. In case of streaming parsing oncue is
130127delayed until the cue has been completely received. Returns a [ VTTCue] ( #http://dev.w3.org/html5/webvtt/#vttcue-interface ) object.
@@ -135,7 +132,7 @@ parser.oncue = function(cue) {
135132};
136133```
137134
138- #### onflush()####
135+ ### onflush()
139136
140137Is invoked in response to ` flush() ` and after the content was parsed completely.
141138
@@ -145,7 +142,7 @@ parser.onflush = function() {
145142};
146143```
147144
148- #### onparsingerror(error)####
145+ ### onparsingerror(error)
149146
150147Is invoked when a parsing error has occured. This means that some part of the
151148WebVTT file markup is badly formed. See [ ParsingError] ( #parsingerror ) for more
@@ -157,7 +154,7 @@ parser.onparsingerror = function(e) {
157154};
158155```
159156
160- #### WebVTT.convertCueToDOMTree(window, cuetext)####
157+ ## WebVTT.convertCueToDOMTree(window, cuetext)
161158
162159Parses the cue text handed to it into a tree of DOM nodes that mirrors the internal WebVTT node structure of
163160the cue text. It uses the window object handed to it to construct new HTMLElements and returns a tree of DOM
@@ -167,7 +164,7 @@ nodes attached to a top level div.
167164var div = WebVTT .convertCueToDOMTree (window , cuetext);
168165```
169166
170- #### WebVTT.processCues(window, cues, overlay)####
167+ ## WebVTT.processCues(window, cues, overlay)
171168
172169Converts the cuetext of the cues passed to it to DOM trees&mdash ; by calling convertCueToDOMTree&mdash ; and
173170then runs the processing model steps of the WebVTT specification on the divs. The processing model applies the necessary
@@ -179,7 +176,7 @@ computed styles (only of the divs to do overlap avoidance.
179176var divs = WebVTT .processCues (window , cues, overlay);
180177```
181178
182- #### ParsingError####
179+ ## ParsingError
183180
184181A custom JS error object that is reported through the
185182[ onparsingerror] ( #onparsingerror ) callback. It has a ` name ` , ` code ` , and
@@ -201,7 +198,7 @@ There are two error codes that can be reported back currently:
201198
202199** Note:** Exceptions other then ` ParsingError ` will be thrown and not reported.
203200
204- #### VTTCue####
201+ ## VTTCue
205202
206203A DOM shim for the VTTCue. See the [ spec] ( http://dev.w3.org/html5/webvtt/#vttcue-interface )
207204for more information. Our VTTCue shim also includes properties of its abstract base class
@@ -214,31 +211,31 @@ var cue = new window.VTTCue(0, 1, "I'm a cue.");
214211** Note:** Since this polfyill doesn't implement the track specification directly the ` onenter `
215212and ` onexit ` events will do nothing and do not exist on this shim.
216213
217- #### Extended API####
214+ ### Extended API
218215
219216There is also an extended version of this shim that gives a few convenience methods
220217for converting back and forth between JSON and VTTCues. If you'd like to use these
221218methods then us ` vttcue-extended.js ` instead of ` vttcue.js ` . This isn't normally
222219built into the ` vtt.js ` distributable so you will have to build a custom distribution
223220instead of using bower.
224221
225- ####toJSON()####
222+ #### toJSON()
226223
227224Converts a cue to JSON.
228225
229226``` js
230227var json = cue .toJSON ();
231228```
232229
233- ####VTTCue.fromJSON(json)####
230+ #### VTTCue.fromJSON(json)
234231
235232Create and initialize a VTTCue from JSON.
236233
237234``` js
238235var cue = VTTCue .fromJSON (json);
239236```
240237
241- ####VTTCue.create(options)####
238+ #### VTTCue.create(options)
242239
243240Initializes a VTTCue from an options object where the properties in the option
244241objects are the same as the properties on the VTTCue.
@@ -247,7 +244,7 @@ objects are the same as the properties on the VTTCue.
247244var cue = VTTCue .create (options);
248245```
249246
250- #### VTTRegion####
247+ ## VTTRegion
251248
252249A DOM shim for the VTTRegion. See the [ spec] ( http://dev.w3.org/html5/webvtt/#vttregion-interface )
253250for more information.
@@ -257,23 +254,23 @@ var region = new window.VTTRegion(0, 1, "I'm a region.");
257254cue .region = region;
258255```
259256
260- #### Extended API####
257+ ### Extended API
261258
262259There is also an extended version of this shim that gives a few convenience methods
263260for converting back and forth between JSON and VTTRegions. If you'd like to use these
264261methods then us ` vttregion-extended.js ` instead of ` vttregion.js ` . This isn't normally
265262built into the ` vtt.js ` distributable so you will have to build a custom distribution
266263instead of using bower.
267264
268- ####VTTRegion.fromJSON(json)####
265+ #### VTTRegion.fromJSON(json)
269266
270267Creates and initializes a VTTRegion from JSON.
271268
272269``` js
273270var region = VTTRegion .fromJSON (json);
274271```
275272
276- ####VTTRegion.create(options)####
273+ #### VTTRegion.create(options)
277274
278275Creates a VTTRegion from an options object where the properties on the options
279276object are the same as the properties on the VTTRegion.
@@ -282,15 +279,14 @@ object are the same as the properties on the VTTRegion.
282279var region = VTTRegion .create (options);
283280```
284281
285- Browser
286- =======
282+ # Browser
287283
288284In order to use the ` vtt.js ` in a browser, you need to get the built distribution of vtt.js. The distribution
289285contains polyfills for [ TextDecoder] ( http://encoding.spec.whatwg.org/ ) , [ VTTCue] ( http://dev.w3.org/html5/webvtt/#vttcue-interface ) ,
290286and [ VTTRegion] ( http://dev.w3.org/html5/webvtt/#vttregion-interface ) since not all browsers currently
291287support them.
292288
293- ### Building Yourself###
289+ ## Building Yourself
294290
295291Building a browser-ready version of the library is done using ` grunt ` (if you haven't installed
296292` grunt ` globally, you can run it from ` ./node_modules/.bin/grunt ` after running ` npm install ` ):
@@ -309,7 +305,7 @@ $ Done, without errors.
309305Your newly built ` vtt.js ` now lives in ` dist/vtt.min.js ` , or alternatively, ` dist/vtt.js ` for an
310306unminified version.
311307
312- ### Bower###
308+ ## Bower
313309
314310You can also get the a prebuilt distribution from [ Bower] ( http://bower.io/ ) . Either run the shell
315311command:
@@ -322,7 +318,7 @@ Or include `vtt.js` as a dependency in your `bower.json` file. `vtt.js` should n
322318live in ` bower_components/vtt.js/vtt.min.js ` . There is also an unminified
323319version included with bower at ` bower_components/vtt.js/vtt.js ` .
324320
325- ### Usage###
321+ ## Usage
326322
327323To use ` vtt.js ` you can just include the script on an HTML page like so:
328324
@@ -356,12 +352,11 @@ To use `vtt.js` you can just include the script on an HTML page like so:
356352</html >
357353```
358354
359- Node
360- ====
355+ # Node
361356
362357You have a couple of options if you'd like to run the library from Node.
363358
364- ### vtt.js###
359+ ## vtt.js
365360
366361` vtt.js ` is on npm. Just do:
367362
@@ -395,15 +390,14 @@ or a shim of one with the necessary functionality for either the parsing or proc
395390portion of the spec. The only shims that are provided to you are ` VTTCue ` and ` VTTRegion `
396391which you can attach to your global that is passed into the various functions.
397392
398- ### node-vtt###
393+ ## node-vtt
399394
400395Use [ node-vtt] ( https://github.com/mozilla/node-vtt ) . Node-vtt runs ` vtt.js ` on a PhantomJS page
401396from Node so it has access to a full DOM and CSS layout engine which means you can run any part
402397of the library you want. See the [ node-vtt] ( https://github.com/mozilla/node-vtt ) repo for more
403398information.
404399
405- Developing vtt.js
406- =================
400+ # Developing vtt.js
407401
408402A few things to note:
409403
413407* The [ Grunt Run Task] ( #grunt-run-task ) tool is handy for running the library without having
414408to run the whole test suite or set of tests.
415409
416- #### Tests####
410+ ## Tests
417411
418412Tests are written and run using [ Mocha] ( https://mochajs.org/ ) on node.js.
419413
@@ -434,13 +428,13 @@ $ mocha --reporter spec --timeout 200000
434428
435429See the [ usage docs] ( https://mochajs.org/#usage ) for further usage info.
436430
437- ###Writing Tests###
431+ ### Writing Tests
438432
439433Tests are done by comparing live parsed output to a last-known-good JSON file. The JSON files
440434can be easily generated using ` vtt.js ` , so you don't need to write these by hand
441435(see details below about [ Grunt Run Task] ( #grunt-run-task ) ).
442436
443- ####TestRunner####
437+ #### TestRunner
444438
445439There's a prebuilt API in place for testing different parts of ` vtt.js ` . Simply
446440require the [ TestRunner] ( https://github.com/mozilla/vtt.js/blob/master/tests/test-runner.js )
@@ -452,43 +446,43 @@ and [processing JSON file](https://github.com/mozilla/vtt.js/blob/master/tests/c
452446You can also check out the [ tests] ( https://github.com/mozilla/vtt.js/tree/master/tests )
453447directory for more examples on how to write tests.
454448
455- ####jsonEqual(vttFile, jsonRefFile, message, onDone)####
449+ #### jsonEqual(vttFile, jsonRefFile, message, onDone)
456450
457451First parses the WebVTT file as UTF8 and compares it to the reference JSON file
458452and then parses the WebVTT file as a string and compares it to the reference JSON
459453file.
460454
461- ####jsonEqualStreaming(vttFile, jsonRefFile, message, onDone)####
455+ #### jsonEqualStreaming(vttFile, jsonRefFile, message, onDone)
462456
463457Simulates parsing the file while streaming by splitting the WebVTT file into
464458chunks. Will simulate parsing like this ` n ` times for a single WebVTT file where
465459` n ` is the length in unicode characters of the file, so use this only on small
466460files or else you will get a timeout failure on your test.
467461
468- ####jsonEqualParsing(vttFile, jsonRefFile, message, onDone)####
462+ #### jsonEqualParsing(vttFile, jsonRefFile, message, onDone)
469463
470464Runs ` jsonEqual ` and ` jsonEqualStreaming ` in one go.
471465
472- ####jsonEqualProcModel(vttFile, jsonRefFile, message, onDone)####
466+ #### jsonEqualProcModel(vttFile, jsonRefFile, message, onDone)
473467
474468Runs the processing model over the ` VTTCues ` and ` VTTRegions ` that are returned
475469from parsing the WebVTT file.
476470
477- ####jsonEqualAll(vttFile, jsonRefFile, message, onDone)####
471+ #### jsonEqualAll(vttFile, jsonRefFile, message, onDone)
478472
479473Runs ` jsonEqualParsing ` and ` jsonEqualProcModel ` . Note that ` jsonRefFile ` should
480474contain JSON that is generated from parsing. The processing model test will compare
481475its results to a JSON file located at ` [vttFile]-proc.json ` . Therefore, if you
482476have a WebVTT file named ` basic.vtt ` the JSON reference file for the processing
483477model tests will be ` basic-proc.json ` .
484478
485- ####jsonEqualAllNoStream(vttFile, jsonRefFile, message, onDone)####
479+ #### jsonEqualAllNoStream(vttFile, jsonRefFile, message, onDone)
486480
487481Runs ` jsonEqual ` and ` jsonEqualProcModel ` use this if you want to do parsing
488482and processing tests, but do not want to simulate streaming because you
489483have too big of a WebVTT file.
490484
491- ### Grunt Run Task###
485+ ## Grunt Run Task
492486
493487You can automatically generate a JSON file for a given ` .vtt ` file using the
494488` run ` Grunt task.
0 commit comments