How to put captions (subtitles) in videos?

There is the webvtt format, a file should have this format:

WEBVTT

0
00:00:00.000 --> 00:00:12.000
Teste

1
00:00:18.700 --> 00:00:21.500
Teste inicia em 00:18

2
00:00:22.800 --> 00:00:26.800
Olá mundo!

3
00:00:29.000 --> 00:00:32.450
Tchau

And save it to a file, preferably with the extension .vtt (although it does not affect anything)

HTML should look like this:

<video>
    <source src="video/video.mp4" type="video/mp4">
    <track label="Português" kind="subtitles" srclang="pt" src="legenda-portugues.vtt" default>
</video>

Note that this will work in HTTP, in place does not work (protocol file:// )

The attributes:

• label indicates to the user which subtitle he is using descriptively
• srclang must be set when using subtitles value in attribute kind
• src is the path to the legend
• default activates caption
• kind accepts several properties, for subtitles we use kind="subtitles"

Placing multiple captions

This is an example of using multiple captions, you can switch between languages

<video controls>
    <source src="video/video.mp4" type="video/mp4">

    <track label="Português Brasileiro" kind="subtitles" srclang="pt-br" src="subtitle/sub-pt-br.vtt" default>
    <track label="Português Portugal" kind="subtitles" srclang="pt-pt" src="subtitle/sub-pt-pt.vtt">
    <track label="American English" kind="subtitles" srclang="en-us" src="subtitle/sub-en-us.vtt">
    <track label="English" kind="subtitles" srclang="en-gb" src="subtitle/sub-en-gb.vtt">
</video>

Attribute kind="..."

• subtitles

  Subtitles provide translation of content that can not be understood by the viewer. For example, dialogue or non-English text in an English language film.

  Captions may contain additional content, usually extra background information. For example, text at the beginning of Star Wars movies, or the date, time and location of a scene.

• captions

  Closed Captions provide a transcript and possibly an audio translation.

  It can include important non-verbal information such as music tracks or sound effects. It can indicate the source of the suggestion (for example, music, text, character).

  Suitable for deaf users or when the sound is muted.

• descriptions

  Description of video content, which can be used by visually impaired people (I still can not test it, maybe it depends on screen readers)

• chapters

  Chapter titles are meant to be used when the user is browsing the video.

• metadata

  Tracks used by scripts are not visible to the user.

Source: link