Como adicionar legendas a um vídeo em html?

Tentei usar o elemento track, mas não funcionou..pode dizer-me se estou a fazer algo de errado?

<video controls="controls" id="video1" width="450">
    <source src="A taste of TED.mp4" type="video/mp4">
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English">
 </video>

o ficheiro das legendas (TED.vtt) parece-se com isto: 

WEBVTT

1
00:00:01.000 --> 00:00:10.000
This is the first line of text, displaying from 1-10 seconds

2
00:00:15.000 --> 00:00:20.000
And the second line of text
separated over two lines
Author: Edric, 2014-01-10
Source

2 answers

O código: 

<video controls="controls" id="video1" width="450">
    <source src="A taste of TED.mp4" type="video/mp4" />
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English" />
</video>

Funciona. O que você pode estar fazendo de errado é que você está usando .srt legendas em vez de .vtt

Srt: 

1
00:01:21,700 --> 00:01:24,675
Life on the road is something 
I was raised to embrace.

Vtt: 

WEBVTT

01:21.700 --> 01:24.675
Life on the road is something 
I was <i>raised</i> to embrace.

O que tens de fazer é:

  • iniciar o ficheiro de texto com WEBVT
  • remova os marcadores cue no início de cada subtítulo, ou substitua - os por prefixos Cue.
    • Opcionalmente, remova o marcador de 00: hora no início de cada hora.
  • converte a vírgula antes da milissegundo marca em cada hora de amostragem até um ponto decimal (fácil o suficiente com um find-replace:, 7 to .7, por exemplo).
    • Opcionalmente, adicione a marca de estilo ao texto das legendas.
  • Guarde o ficheiro com A.vtt extensão e link para ele a partir de um elemento em uma página HTML5.

Também pode ser possível que o seu bowser web não suporte a tag de vídeo, eu sei, por exemplo, que alguns celulares não reproduzem vídeos com esta tag!

    A segunda parte da resposta foi: retirado de um posto de Dudley Storey.
 2
Author: rsm, 2015-06-07 22:51:46 
<video controls="controls" id="video1" width="450">
    <source src="A taste of TED.mp4" type="video/mp4" />
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English" />
</video>
 0
Author: Arsen Babajanyan, 2014-01-10 19:20:17