Shayan's Software & Technology

My adventure as a Software Engineer continues..,

The Open Source WebVTT Standard

What is WebVTT?

WebVTT is an upcoming standard to the Internet that will allow VTT Files (.vtt) to add captions to online video content. These video captions will also have the functionality to be styled with CSS and with their own HTML5 tags.

Sample VTT File:


00:11.000 --> 00:13.000
<v Roger Bingham>We are in New York City

00:13.000 --> 00:16.000
<v Roger Bingham>We're actually at the Lucern Hotel, just down the street

00:16.000 --> 00:18.000
<v Roger Bingham>from the American Museum of Natural History

00:18.000 --> 00:20.000
<v Roger Bingham>And with me is Neil deGrasse Tyson

00:20.000 --> 00:22.000
<v Roger Bingham>Astrophysicist, Director of the Hayden Planetarium

A VTT File is identified by “WEBVTT” at the first line of the file and by the .vtt extension.

A VTT File contains timestamp intervals and the text to be displayed between those intervals in the video. This is where the text can also be formatted by using cue tags and CSS. Cue Text is written like HTML so if you were to input a special character such as “&” you would need to escape it by typing “&amp;”.


Here’s a video that explains webVTT in greater depth:

My Contribution to WebVTT?

I will test the cue text functionality of WebVTT for our 0.1 Release. This will include writing tests that are designed to either pass or fail. The tests will be comprised of .VTT files that will run through the parser with a number of test cases that are related to the cue text. The Cue text portion of a VTT file is the text below the timestamp intervals.. These tests will ensure the integrity of the current WebVTT parser.

What does it involve in terms of Technology?

The technology we will need to use as a team would be git for a uniform repository for version control. IRC chat for help with WebVTT related inquiries. we will need to know everything about WebVTT in terms of cue text and cue text tags.

What do you need to learn in order to do it, how will you learn it?

We will need to learn the WebVTT standard and know how it works by heart.

It can be found here

We also need to know how to use GIT.

We need to understand how UTF-8 characters will influence cue text.

Basic Programming knowledge in: HTML, CSS. JavaScript. which we all have at this point.

What fears or concerns do you have?

No fears, as of yet. I just hope we do a good job testing the parser thoroughly!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: