How to put subtitles (subtitles) in videos?

Asked

Viewed 3,600 times

9

How can I add subtitles/Subtitles to the video tag:

<video>
    <source src="video/video.mp4" type="video/mp4">
</video>
html html5

  • friend saw that you put in github, how do I get this link to work in the player? I click raw more by the link that generates will not... thanks!

  • Hello @Murilosilva I did not put in my github, in the answer only this example format, is not a real caption, it is only to teach you or anyone who read the answer to create your own caption

1 answer

8


There is the format webvtt, a file must 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 (despite not affecting at all)

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, local does not work (protocol file://)

The attributes:

  • label indicates to the user which legend it is using in a descriptive way
  • srclang should be set when using the value subtitles in the attribute kind
  • src is the way where the legend lies
  • default activates the legend
  • kind accepts several properties, for subtitles we use kind="subtitles"

Placing multiple subtitles (subtitles)

This is an example of using multiple subtitles, 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

    The subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film.

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

  • captions

    The "closed captions" provide a transcription and possibly an audio translation.

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

    Suitable for deaf users or when the sound is muted.

  • descriptions

    Description of the content of the video, which can be used by people with visual impairment (I haven’t been able to test, maybe depends on screen readers)

  • Chapters

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

  • Metadata

    Tracks used by scripts, not visible to the user.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.