2

Olá, estou a criar um sistema de filmes e queria colocar as legendas nos filmes ingleses mas por algum motivo elas não aparecem e quando as vou activar e clico no botão ele desaparece e as legendas não aparecem. Eu tenho um arquivo .vtt com as mesmas:

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,

Codigo html:

<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>

Alguém sabe qual é o problema?

6
  • Qual navegador vc esta usando ? Commented 18/12/2018 às 15:02
  • Google Chrome Actualizado
    – tomas
    Commented 18/12/2018 às 15:02
  • Eu imagino que elas não são mostradas inicialmente (nem mesmo setando como default), o usuário tem de ativa-las. Veja esse link da documentação.
    – gcpdev
    Commented 18/12/2018 às 15:05
  • Mesmo Activando elas não aparecem, não sei porque
    – tomas
    Commented 18/12/2018 às 15:06
  • Veja no segundo bloco dessa parte, a partir da linha 16. A implementação mostra que vc pode definir o atributo mode como showing e data-state como active. Fora isso, se não houver nenhuma msg no console, não sei o que pode acontecer.
    – gcpdev
    Commented 18/12/2018 às 15:10

1 Resposta 1

2

Existem alguns pontos a serem corrigidos no seu arquivode legendas... O separador decimal para os millesegundos deve ser o . e não a ,. É recomendado que você inicie a primeira linha do seu .vtt com a assinatura WEBVTT. Seus arquivos podem ser validados nesse site.

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,

Outros pontos importantes:

  1. Tanto o vídeo quando os subtitles precisam ser disponibilizados através de um serviço http, não funciona localmente simplesmente abrindo o .html no browser.
  2. Caso os arquivos não estejam disponíveis no mesmo domínio do seu site, é necessário adicionar o atributo crossorigin no seu elemento <video>.
  3. Se você declarar a propriedade default em sua <track> o player já irá exibir aquela legenda por padrão na reprodução do conteúdo.

Veja uma demo funcionando logo abaixo, coloquei duas legendas iguais em tracks diferentes porque ainda não encontrei um exemplo melhor.

<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>

2
  • Leandro Angelo, as duas legendas estão em inglês, elas estão apontando para o mesmo endereço. Commented 21/08/2020 às 4:20
  • 1
    @AugustoVasques Sim, eu sei, era apenas para demonstrar que ambas declarações funcionam com o carregamento do arquivo. Afinal, o player não sabe o que está exibindo, apenas relaciona as marcações com o andamento da execução do vídeo.... Commented 21/08/2020 às 11:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .