How to use and add VTT to a video

I’ve been doing a lot of work recently on WCAG guidelines on making websites accessible and usable for all users. Something which I discovered and never knew about is using WebVTT which is a basic text file to add subtitles, audio description to video rather than embed straight into the video.

What is a WebVTT

A Webvtt file stands for Web Video Track Format. It’s a text file which contains cues about a video. The file can be written in any editor. Alternatively there are websites which allow you can upload a video and place the Audio descriptions/Captions and it will generate the file. One such website is https://www.vtt-creator.com/. Which where you can add the captions then download the file

Sample file

Below is what a WebVTT file looks like.

WEBVTT - Demo video

00:00.000 --> 00:02.000
Camera pans in

00:02.001 --> 00:10.001
Camera show spoon

00:10.001 --> 00:18.000
Shows the cake

The top of the file is where we state Webvtt file along with the title of the video. The next sections is when the caption starts in minutes followed when the caption should leave for example if you wanted a caption to start at 10 seconds and finish at 15 seconds it would be 00:10:00 –> 00:15:00. Finally the line below is the caption

Adding it a video

The file is saved as a VTT extension and added as track element with the video element. On the track attribute you have the following attribute src where the file is save, label for the name of the caption and finally default if the caption is enabled from the start.

<video src="cake.webm">
    <track src="demo.vtt" label="English" kind"description" default />
</video>

Demo

Further reading

As you can see it’s really easy to add captions to a video rather than adding captions in Adobe Premier. There are several more functionality you can add to the file such as styling and position. This was a brief overview but want further reading see the articles from the list below

• MDN Docs WebVTT – https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API
• Css Tricks – Improving Video Accessibility with WebVTT, https://css-tricks.com/improving-video-accessibility-with-webvtt/