fazer um vidio com legenda em html
Soluções para a tarefa
Resposta:
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 preferencia 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 descritiva
srclang deve ser definido quando usar o valor subtitles no atributo kind
src é o caminho aonde se encontra a legenda
default ativa a legenda
kind aceita diversas propriedades, para legendas usamos kind="subtitles"
Colocando múltiplas legendas (subtítulos)
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>
Atributo kind="..."
subtitles
O subtitulos 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, carácter).
Adequado para usuários surdos ou quando o som é silenciado.
descriptions
Descrição do conteudo do video, 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 video.
metadata
Faixas usadas por scripts, não é visivel ao usuário.
Explicação: