Home

Plans & Pricing Get Started Login

How to Create A WebVTT File

  • header

    A “Web Video Text Track” file, also known as WebVTT (.vtt), is increasingly becoming a popular subtitle/caption file format. It originated in 2010 by the Web Hypertext Application Technology Working Group (WHATWG), to support text tracks in HTML5.

    How is WebVTT different from SRT?

    WebVTT was “broadly based on” the SupRip format, and was even called WebSRT with the same .srt file extension. It was later renamed WebVTT, and introduced with the <track> tag for HTML5.

    Unlike the SRT caption format, WebVTT allows for description and metadata information to be included within the frames. This information is not displayed to the viewer.

    Can you spot the differences between a .vtt and a .srt?

    webvtt and a srt file

    All WebVTT files start with the line “WebVTT,” while SRT files don’t use an SRT distinction, and instead begin with a “1” for first caption sequence.

    In an SRT file, frames are required to be separated by cue identifiers. In WebVTT, they are optional.

    Furthermore, in a WebVTT, the timecodes are separated by full stops, rather than commas.

    WebVTT files must also have a UTF-8 encoding, which is not required in an SRT file.

    Lastly, the WebVTT format can support additional information, such as frame placement.

    What are the parts of a WebVTT file?

    A WebVTT file has two requirements and many optional components.

    The two requirements are:

    • WEBVTT at the beginning of the transcript
    • A blank line in between each caption frame. In WebVTT, a blank line indicates the end of a sequence.

    The optional components are:

    • A byte order mark (BOM): tells the reader this filed is encoded with UTF-8. An example of a BOM would go something like: EF BB BF.
    • A header to the right of the WEBVTT. There must be a single space in between, and must not include a newline or “-->” You can use this to describe the file.
    • Comments: indicated by NOTE and on separate lines.
    • A sequence number: these are optional but can help keep your captions organized.
    • Positioning information: included on the same line after the second timecode.

    WebVTT format broken down

    All sequences begin with a timecode. The time format used is minutes:seconds.milliseconds or hours:minutes:seconds.milliseconds, with the milliseconds rounded to 3 decimal places. Each time stamp is separated by a two-hash arrow (-->).

    You can use a hyphen to indicate the start of a caption, such as:

    hyphen before the first line in the caption

    Keep in mind that you do not want to have blank lines within a caption sequence. A blank line indicates the end of a sequence and should only be used to separate the captions in different timecodes.

    Comments can be added and they will not be seen by the end user. You can use comments to describe a file or keep reminders within the file. Comments must start with NOTE, followed by a space or a new line. Like in a sequence, you cannot have a blank line between a single comment, otherwise it closes the comment. You can include as many characters within a comment.

    They can look like this:

    Comments:Are indicated by NOTE, They can be on the same line or a separate line as a NOTE, Comments should be separated from the sequences by a blank line,Comments can have zero to as many characters as necessary,Comments can be placed anywhere

    Cue settings indicate the positioning of the caption. These are added after the second timecode, with a space in between. You can use cue settings to indicate where the captions will be placed and positioned. You can also indicate the width of the text area, and alignment of the text. You can even use cue settings to make the text bold, italic, or underlined.

    Here is an example:

    cue setting example

    Track tags are used to specify time text tracks. You can define the type of tract with a “kind” attribution. There are five kinds: subtitles, captions, descriptions, chapters, and metadata. By default, a < track > tag will be a subtitle unless otherwise defined.

    Why should I use a WebVTT file?

    WebVTT is increasingly becoming a popular captioning format. The benefit of using it is that it allows for greater flexibility. You can add additional information such as frame placement, styling, and comments.

    WebVTT is also the format choice for HTML5 video.

    Some of the most common platforms that use WebVTT are:

    How to create your own WebVTT file

    To create a WebVTT, you can either create them yourself or hire a professional captioning company. With a professional service, you can avoid having to figure out timecodes or worry about positioning. If time is a constraint, it’s a great alternative.

    If you decide to DIY your captions, follow the steps below to create your own WebVTT file from scratch. Depending on the operating system you use (Mac or Windows PC), the instructions are slightly different.

    If you use a Mac...

    1. Open a new file in TextEdit.
    2. To begin, type “WEBVTT” to indicate this is a .vtt file, then press enter twice to leave a blank line.
      Note: you can
      include a title or comment before your caption sequence. If you decide to include a comment either do it on the same line as “WEBVTT” or press enter and start a new NOTE.

      Enter the beginning and end timecode using the following format:

      hours:minutes:seconds.milliseconds – –> hours:minutes:seconds.milliseconds
      timecode

      If you choose to add a sequence indicator, such as a “1,” do so on a separate line, above the timecodes.

      Then press “enter.”

      Note: to add cue settings simply put a space between the second timecode and add position, size, alignment, etc.

    3. In the next line, begin your captions. Try to keep a 32-character limit, with 2 lines per caption so that the viewer doesn’t have to read too much and the caption doesn’t take up too much space on the screen. Also make sure your captions are compliant with captioning guidelines.*
    4. After the last text line in the sequence, press “enter” twice. Make sure to leave a blank line to indicate a new caption sequence.


      Here are two examples of the same WebVTT file. You can see how comments, sequence numbers, and cue settings are used.


      two examples of the same webvtt file

    5. Repeat the steps until you have a completed transcript.
    6. To save your file as a .vtt, first go to Format → Make Plain Text, or use the keyboard shortcut: Shift + Command + T.


    7. changing to plain text

    8. Next, go to File → Save
    9. Under “Save As,” type the name of your file, but switch “.txt” to “.vtt
    10. Uncheck both “Hide Extension” on the bottom left hand side of the menu, and “If no extension is provided, use “.txt””.


    11. saving vtt form

    12. Then hit save.
    13. Congratulations! Now you are ready to upload your captions.

    If you use Windows...

    1. Open a new file on Notepad.
    2. li>To begin, type “WEBVTT” to indicate this is a .vtt file, then press enter twice to leave a blank line.
      Note: you can include a title or comment before your caption sequence. If you decide to include a comment either do it on the same line as “WEBVTT” or press enter and start a new NOTE.

      Enter the beginning and end timecode using the following format:

      hours:minutes:seconds.milliseconds – –> hours:minutes:seconds.milliseconds
      timecode

      If you choose to add a sequence indicator, such as a “1,” do so on a separate line, above the timecodes.

      Then press “enter.”

      Note: to add cue settings simply put a space between the second timecode and add position, size, alignment, etc.

    3. In the next line, begin your captions. Try to keep a 32-character limit, with 2 lines per caption so that the viewer doesn’t have to read too much and the caption doesn’t take up too much space on the screen. Also make sure your captions are compliant with captioning guidelines.*
    4. After the last text line in the sequence, press “enter” twice. Make sure to leave a blank line to indicate a new caption sequence.


    5. Here are two examples of the same WebVTT file. You can see how comments, sequence numbers, and cue settings are used.

      two examples of the same webvtt file

    6. Repeat the steps until you have a completed transcript.
    7. To save, go to File → Save.
    8. Under “File Name,” type the name of your transcript using “.vtt” at the end.
    9. Under “Save as type:” select “All Files.”
    10. Save As SRT

    11. Then hit save.
    12. Congratulations! Now you are ready to upload your captions.

    *For more information on captioning guidelines refer to the following white papers:

    How to upload your WebVTT file

    Depending on the media player, lecture capture software, and video recording software you choose to upload your video, the process to upload your WebVTT file will be different. Use the following 3Play Media guides to learn how to upload your caption file.

    The downside of creating your own WebVTT files

    So, if you want to create your own captions, creating a WebVTT file from scratch is an easy and free way to do it. The only downfall is that you have to create your own timecodes and any other style elements, which makes DIY captioning more time consuming.

    How long it will take to caption a video depends on the length of your video, your experience captioning videos, and the quality of the video. Typically, if you are an experienced transcriptionist, a five-minute video can take 5 to 10 times the length of the video, or 25-50 minutes total. If you create your own timecodes and cue settings through a WeBVTT file, this may take longer.

    But don’t let the time it takes to create captions keep you from adding captions to your videos. There are numerous benefits to captioning your videos, such as improving your SEO and opening up your content to new audiences, from viewers who are deaf/hard of hearing, to viewers who know English as a second language, to viewers who simply enjoy using captions.

    Though many people choose to create their own captions to save on costs, if you are captioning many videos or your videos are long, consider hiring a captioning service. With a captioning service, you do not need to worry about timecodes or making sure your captions are compliant with the laws. A good captioning service will take care of all the logistics within a reasonable amount of time, as well as offer a 99% accuracy rate or higher. Before choosing a vendor though, make sure you research who will be captioning your videos, as well as their captioning and transcription process to understand their rates.

    __

    If you’re looking for top quality and reasonably priced captions or transcripts, check out our pricing and get started with 3Play today!

    Pig View Pricing CTA

Leave a Reply

Your email address will not be published. Required fields are marked *