Captions do not appear in HTML5 video tag

Asked

Viewed 546 times

1

Hi, I’m creating a movie system and I wanted to put subtitles on English movies but for some reason they don’t show up and when I turn them on and click the button it disappears and subtitles don’t appear. I have a file . vtt with the same:

1
00:00:26,460 --> 00:00:30,434
Boa noite, senhoras e senhores.
Estamos prestes a aterrar em Seattle.

2
00:00:30,464 --> 00:00:33,270
Está bom tempo, com vento de leste.

3
00:00:33,300 --> 00:00:36,440
A temperatura no solo é de 20 graus

4
00:00:36,470 --> 00:00:39,347
Em nome da tripulação,
na cabina e no cockpit,

Html code:

<video width="1020" height="640" controls>
      <source src="Rings.mp4" type="video/mp4">
      <track label="Português" kind="subtitles" srclang="pt" src="Rings.vtt">
    Your browser does not support the video tag.
    </video>

Does anyone know what the problem is?

html5 html5-video

  • Which browser you are using ?

  • Google Chrome Updated

  • I imagine they are not shown initially (not even set as default), the user has to activate them. See that link of documentation.

  • Even if they don’t show up, I don’t know why

  • Look in the second block that part, from line 16. The implementation shows that vc can define the attribute mode as showing and data-state as active. Other than that, if there is no msg on the console, I don’t know what can happen.

  • @IMM I believe you have already managed to solve the problem, if not, take a look at my answer.

Show 1 more comment

1 answer

2

There are some points to be corrected in your subtitles file... The decimal separator for the milleseconds should be the . and not the ,. It is recommended that you start the first line of your .vtt with the signature WEBVTT. Your files can be validated in this website.

WEBVTT

1
00:00:26.460 --> 00:00:30.434
Boa noite, senhoras e senhores.
Estamos prestes a aterrar em Seattle.

2
00:00:30.464 --> 00:00:33.270
Está bom tempo, com vento de leste.

3
00:00:33.300 --> 00:00:36.440
A temperatura no solo é de 20 graus.

4
00:00:36.470 --> 00:00:39.347
Em nome da tripulação,
na cabina e no cockpit,

Other important points:

  1. Both video and Subtitles need to be made available through a service http, does not work locally simply by opening . html in the browser.
  2. If files are not available on the same domain as your website, you need to add the attribute crossorigin in its element <video>.
  3. If you declare ownership default in his <track> the player will already display that subtitle by default when playing the content.

See a demo working right below, I put two equal subtitles in different Tracks because I haven’t found a better example yet. 

<video width="50%" src="//thepaciellogroup.github.io/AT-browser-tests/video/ElephantsDream.mp4" controls crossorigin="anonymous">
  <track kind="subtitles" src="//thepaciellogroup.github.io/AT-browser-tests/video/subtitles-en.vtt" srclang="en" label="Inglês" default>
  <track kind="subtitles" src="//thepaciellogroup.github.io/AT-browser-tests/video/subtitles-en.vtt" srclang="pt" label="Português">     
</video>

  • Leandro Angelo, the two subtitles are in English, they are pointing to the same address.

  • 1

    @Augustovasques Yes, I know, it was just to demonstrate that both statements work with uploading the file. After all, the player does not know what is displaying, only relates the markings to the progress of the video execution....

Browser other questions tagged html5 html5-video

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