Media Formats and Video Captions


In this lesson, students will learn:

  • How to support multiple media formats within the <audio> and <video> element with a fallback
  • How to support non-HTML5 browsers with a Flash fallback

Media Format

Video Caption/Subtitles

WebVTT files

The MIME type of WebVTT is text/vtt. WebVTT is a text-based format, which must be encoded using UTF-8.

A WebVTT file (.vtt) contains cues, which can be either a single line or multiple lines, As shown below:

WebVTT body

The structure of a WebVTT file requires two things and has four optional components.

  • An optional byte order mark (BOM)
  • The string WEBVTT
  • An optional text header to the right of WEBVTT
    • There must be at least one space after WEBVTT
    • You could use this to add a description to the file
    • You may use anything in the text header, except newlines or the string “-->"
  • A blank line, which is equivalent to two consecutive newlines.
  • Zero or more cues or comments.
  • Zero or more blank lines.

The <track> elements supports several attributes.Resources

Web Video Text Tracks Format (WebVTT)
WebVTT: The Web Video Text Tracks Format

Files to Download
Sound File
Video File


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s