10

Como posso adicionar legendas/subtitles a tag vídeo:

<video>
    <source src="video/video.mp4" type="video/mp4">
</video>
2
  • amigo vi que você colocou no github, como eu pego esse link para funcionar no player? eu clico em raw mais pelo link que gera não vai... obrigado! Commented 24/07/2021 às 15:58
  • Olá @MuriloSilva Não coloquei no meu github, na resposta só esta o formato de exemplo, não é uma legenda real, é só para ensinar você ou qualquer um que ler a resposta a criar a sua propria legenda
    – Syzoth
    Commented 24/07/2021 às 17:30

1 Resposta 1

9

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

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 .