# Using captions with HTML's video element

DevFeed: [Using captions with HTML's video element](<https://devfeed.tech/articles/using-captions-with-html-s-video-element-9421.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/using-caption-services-with-html5-video/>)

Author: Nat Tarnoff

Published: 2013-07-17T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [XML](<https://devfeed.tech/topics/xml.md>), [Frameworks](<https://devfeed.tech/topics/frameworks.md>)

Tags: [content](<https://devfeed.tech/tags/content.md>), [flash](<https://devfeed.tech/tags/flash.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [transcripts](<https://devfeed.tech/tags/transcripts.md>), [video](<https://devfeed.tech/tags/video.md>), [video-js](<https://devfeed.tech/tags/video-js.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

This article explains how to make HTML5 video more accessible by adding captions and transcripts. It covers using the video element's track element, the WebVTT caption format, alternative formats such as TTML, and YouTube's auto-generated captions as a transcription aid.

## Source excerpt

One of the great things about the internet is the ability to share video. With HTML we can now use video without the use of Flash. This makes video more accessible as the controls are located in the DOM. However, to do accessible video right, you need to include captions and transcripts. In addition to making video accessible to those with hearing issues, having a transcript on the page can provide you localization of a video not always available in the local language. Transcripts also give all users an alternate way to access the information presented in a video. Additionally, with a transcript on your page, you may increase your search engine rankings by making your content easily indexed by search engine crawl spiders. So how do we pull off putting captions into a video after the video has been produced? Fortunately, the video element has a solution for us. We have to provide a transcript file as a track element after the video source files. <video class="span12 readable" poster="your-video-poster.jpg" controls title="My Movie"> <source src="your-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="your-video.ogg" type='application/ogg' /> <source src="your-video.webm" type='video/webm' /> <track src="your-video-transcript.vtt" label="English Captions" kind="subtitles" srclang="en-us" default /> </video> Many frameworks built on top of the video element make it even simpler to add in captions, like Video.js. But what do these track files look like? WebVTT One of the most commonly-used caption formats is Web Video Text Tracks (WebVTT), which is saved as a file with the extension .vtt. This is a specially formatted text document. It contains each of the cues numbered, followed by the start time & end time and finally the text. It is recommended to include in the text the name of the person talking. Some styling can be included in the text via basic HTML elements like i or b. We start it by declaring it a WEBVTT file. WEBVTT 1 00:00:09.000 --