Como posso adicionar legendas/subtitles a tag vídeo:
<video>
<source src="video/video.mp4" type="video/mp4">
</video>
Como posso adicionar legendas/subtitles a tag vídeo:
<video>
<source src="video/video.mp4" type="video/mp4">
</video>
Existe o formato webvtt, um arquivo deve ter este formato:
WEBVTT
0
00:00:00.000 --> 00:00:12.000
Teste
1
00:00:18.700 --> 00:00:21.500
Teste inicia em 00:18
2
00:00:22.800 --> 00:00:26.800
Olá mundo!
3
00:00:29.000 --> 00:00:32.450
Tchau
E salve-o em um arquivo, de preferência com a extensão .vtt
(apesar de não afetar em nada)
O HTML deve ficar assim:
<video>
<source src="video/video.mp4" type="video/mp4">
<track label="Português" kind="subtitles" srclang="pt" src="legenda-portugues.vtt" default>
</video>
Note que isto irá funcionar em HTTP, em local não funciona (protocolo file://
)
Os atributos:
label
indica para o usuário qual a legenda que esta usando de forma descritivasrclang
deve ser definido quando usar o valor subtitles
no atributo kind
src
é o caminho aonde se encontra a legendadefault
ativa a legendakind
aceita diversas propriedades, para legendas usamos kind="subtitles"
Este é um exemplo de uso de múltiplas legendas, você pode alternar entre os idiomas
<video controls>
<source src="video/video.mp4" type="video/mp4">
<track label="Português Brasileiro" kind="subtitles" srclang="pt-br" src="subtitle/sub-pt-br.vtt" default>
<track label="Português Portugal" kind="subtitles" srclang="pt-pt" src="subtitle/sub-pt-pt.vtt">
<track label="American English" kind="subtitles" srclang="en-us" src="subtitle/sub-en-us.vtt">
<track label="English" kind="subtitles" srclang="en-gb" src="subtitle/sub-en-gb.vtt">
</video>
kind="..."
subtitles
O subtítulos fornecem tradução de conteúdo que não pode ser compreendido pelo espectador. Por exemplo diálogo ou texto que não é inglês em um filme de língua inglesa.
As legendas podem conter conteúdo adicional, geralmente informações de fundo extra. Por exemplo, o texto no início dos filmes Star Wars, ou a data, hora e local de uma cena.
captions
Os "closed captions" proporcionam uma transcrição e possivelmente uma tradução de áudio.
Pode incluir importantes informações não verbais, tais como pistas de música ou efeitos sonoros. Pode indicar a fonte da sugestão (por exemplo, música, texto, caractere).
Adequado para usuários com deficiência auditiva ou quando o som é silenciado.
descriptions
Descrição do conteúdo do vídeo, o que pode ser usado por pessoas com defiencia visual (ainda não pude testar, talvez dependa de leitores de tela)
chapters
Os títulos de capítulo são destinados a serem usados quando o usuário está navegando na vídeo.
metadata
Faixas usadas por scripts, não é visível ao usuário.
Fonte: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track