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