Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Experimental implementation of regions in WebVTT building on Anne's WebVTT parser.
JavaScript
Branch: master
Failed to load latest commit information.
scripts
tests Move from "height" to "lines" in region spec.
.hg_archival.txt
Big_Buck_Bunny_extract.mp4
Big_Buck_Bunny_extract.webm
README.md
cpc_video.html
cpc_video.mp4
cpc_video.vtt Move from "height" to "lines" in region spec.
cpc_video.webm
cpc_video_clean.html
dom_construction.js
helpers.js
parser.html
parser.js
player.html
serialize.js

README.md

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:

Something went wrong with that request. Please try again.