Informática, perguntado por ndenguecanha85, 6 meses atrás

fazer um vidio com legenda em html

Soluções para a tarefa

Respondido por rarukabing
1

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:


ndenguecanha85: eu sou iniciante e ainda trabalho com bloco de notas podem mim mandar como posso fazer no bloco de notas
rarukabing: assista um tuto no ytb
Perguntas interessantes