Problems with captioning HTML5 videos

Asked

Viewed 465 times

1

I made this little code based on what I read on the Internet, but the captions don’t appear in any browser I tested.

<div class="embed-responsive embed-responsive-16by9">
<video poster="filmes/A-cabana-HD.jpg" class="embed-responsive" controls autoload>
  <source src="filmes/filme.mp4" type="video/mp4">
  <track label="Português" kind="subtitles" srclang="PT-BR" src="filmes/legenda.vtt" default/>
  <b>Por favor: entre com um navegador que tenha suporte a HTML5</b>
</video>
</div>

What to do to make subtitles work in HTML5?

html html5 html5-video

1 answer

1


There is not much secrecy in HTML5, but most problems occur because:

  1. The user’s browser/player simply does not support subtitles, although it supports video.
  2. The src link is wrong, try downloading manually at the given address to see what appears. Interestingly yours is filmes/leghe da.vtt.
  3. The subtitle VTT file exists, but it is not the expected format. It is not a masked STR with VTT extension?
  4. Some browsers do not allow running locally, that is, you need to put on the production server to work.
  • 1

    It was more for the 3° Option. I just didn’t understand, I didn’t see much difference in writing from srt to vtt, I put WEBVTT in srt and renamed to caption.vtt but it didn’t work. I used an online converter and it worked. What’s the secret?

  • 1

    There are some differences between the two formats, read the section Main Differences from str: https://en.wikipedia.org/wiki/WebVTT. But the main one is the coding of the text file (which is not only seen by observing the content). Webvtt accepts only UTF-8, it is possible that your SRT was ANSI.

  • 1

    I get it, thank you!

Browser other questions tagged html html5 html5-video

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