translate

WebVTT-with-regions


WebVTT Parser with Regions

This code is an experimental implementation of CEA 708 caption feature support into WebVTT.

It follows the specification at http://www.w3.org/community/texttracks/wiki/MultiCueBox .

Loading the demo

Load parser.html in your browser.

  • it contains a demo WebVTT file
  • it outputs what the browser would accept as a parsed version of that file
  • it outputs a rendering of each cue in the WebVTT file on a fake video viewport

You can edit the WebVTT file live and it will immediately update the parsed output and the rendering.

Load player.html in your browser.

  • it contains a demo WebVTT file
  • it does the parsing, DOM construction, and rendering
  • it outputs an actual video element with rendered captions on top

Running the test suite

node ./scripts/validate.js -v

Test parsing a single file

node ./scripts/parse.js file.vtt

Known bugs

While the parser is complete, the rendering is not fully implemented yet:

  • missing support for vertically rendered text
  • missing support for rtl text
  • when "align" is added to cue settings, positioning breaks

Thanks

The code is based on a parser and validator that Anne van Kestern implemented:
https://github.com/annevk/webvtt

WebVTT parser and validator

Relevant links:

Rating

ABOUT

LESS COMMENTS

MESSAGE REVIEW OK

Ok