Captions in HTML

Let's assume you have your video file and a caption file. If you are not using one of the online video hosting platforms, but want to put it on your own website, how do you do that?

File formats

First of all, make sure that your files are in a format that can be used by as many browsers as possible. MP4 and WebM work with all current browsers. Ogg works with most, but not with Safari. I generally use MP4.

Your caption file will need to be in VTT format. If you have a different caption format, you can use a free online tool to convert it to VTT.

Your code

The video element will need two elements inside it:

  1. source - this tells the browser where to find the video.
  2. track - this points to the caption file.
<video controls>
  <source src="file-name.mp4" type="video/mp4">
  <track src="file-name.vtt" kind="captions" srclang="en">
</video>

The attributes shown are the minimum that is needed for your video to work and for the captions to be accessible. It is important to give the language of the caption file and these language codes are the same as for success criterion 3.1.1 Language of page.

Clicky