Como usar e criar legendas de vídeo HTML5

HTML5 nos permite especificar legendas para vídeos usando elementos. Várias propriedades deste elemento nos permitem especificar coisas como o tipo de conteúdo que estamos adicionando, o idioma em que está e, claro, uma referência ao arquivo de texto que contém as informações reais da legenda.

 <video id=controles de vídeo> <fonte src=./step.mp4 type=video/mp4> <track label=中文字幕kind=legendas capítulos metadados srclang=zh src=./caption.vtt padrão> <track label=ABC kind=legendas srclang=de src=./caption1.vtt> <track label=Número kind=legendas srclang=es src=./caption2.vtt> </video>

• kind recebe um valor subtitles, indicando o tipo de conteúdo que o arquivo contém.
• O rótulo recebe um valor que indica o idioma no qual este conjunto de legendas está escrito - como inglês ou alemão - e esses rótulos aparecerão na interface do usuário para permitir que o usuário selecione facilmente o idioma em que deseja ver as legendas.
• src recebe em cada caso um URL válido apontando para o arquivo de legenda WebVTT relevante.
• srclang indica o idioma em que o conteúdo de cada arquivo de legenda está localizado.
• O atributo padrão é definido no elemento English para indicar ao navegador que esta é a definição de arquivo de legenda padrão a ser usada quando as legendas estão ativadas e o usuário não fez uma seleção específica.

O arquivo que contém os dados reais da legenda é um arquivo de texto simples que segue um formato especificado, neste caso o formato Web Video Text Track (WebVTT). A especificação do plug-in WebVTT ainda está em desenvolvimento, mas suas partes principais são estáveis, então podemos usá-la hoje.

Provedores de vídeo como a Blender Foundation fornecem legendas e legendas em formato de texto para seus vídeos, mas geralmente em formato SubRip Text (SRT). Eles podem ser convertidos para WebVTT usando um conversor online como o srt2vtt.

A extensão do arquivo é ==.vtt==

==.vtt==O tipo MIME do arquivo é text/vtt

Nos navegadores Chrome e Firefox, as legendas .vtt podem ser carregadas e exibidas sem quaisquer obstáculos. No entanto, para navegadores IE10+, embora as legendas .vtt também sejam suportadas, o tipo MIME precisa ser definido, caso contrário o formato WebVTT será ignorado. Uma maneira mais simples é adicionar um arquivo .htaccess na pasta onde as legendas estão localizadas e escrever AddType text/vtt .vtt nele.

//Você deve declarar ==WEBVTT== no início do arquivo

WEBVTT

//Hora de início-->Hora de término, unidade é milissegundos

00:00:00,001 --> 00:00:03,000

// Exibe as legendas correspondentes ao horário acima. O estilo pode ser definido separadamente aa é semelhante ao nome da classe.

<v aa>Nove Yinling Inferior 1111</v>

00:00:03.001 --> 00:00:06.000

<v bb>Deuses e Demônios 2222</v>

00:00:06.001 --> 00:00:09.000

Com meu corpo sanguíneo 3333

00:00:09,001 --> 00:00:12,000

Sacrifício 4444

00:00:12,001 --> 00:00:15,000

Três vidas e sete vidas 5555

O pseudoelemento ::cue é a chave para direcionar pistas de trilha de texto individuais para fins de estilo, pois corresponde a qualquer sugestão definida. Existem apenas algumas propriedades CSS que podem ser aplicadas às dicas de texto:

• cor
• opacidade
• visibilidade
• decoração de texto
• sombra de texto
• desempenho de taquigrafia em segundo plano
• descrever o desempenho da taquigrafia
• atributo abreviado de fonte
• altura da linha
• espaço em branco

==Nota: os estilos de cue do ::cue atualmente funcionam no Chrome, Opera e Safari, mas ainda não no Firefox. ==

WebVTT também oferece suporte a algumas tags HTML para controle de estilo. As mais comuns incluem tag sound ==v==, tag color ==c==, negrito ==b== tag, itálico ==i== tag e sublinhado ==u. == tag, bem como ==ruby== e ==lang== tags, etc.

 //Definir o estilo das legendas video::cue{ background-color:transparent; color:white; font-size:20px; v[voice= aa]){ color:green;}video::cue(v[voice=bb]){ color:rgb(0, 26, 128);}

Ou seja

Por padrão, as legendas do Internet Explorer 10+ estão habilitadas e o controle padrão contém um botão e um menu que fornece a mesma funcionalidade do menu que acabamos de criar. O atributo padrão também é suportado.

==Nota: o IE irá ignorar completamente os arquivos WebVTT, a menos que você defina um tipo MIME. Isso pode ser feito facilmente adicionando um arquivo .htaccess ao diretório apropriado contendo AddType text/vtt .vtt==

Safári

O Safari 6.1+ possui suporte semelhante ao Internet Explorer 10+, mostrando um menu com diferentes opções disponíveis e adicionando uma opção automática que permite ao navegador fazer uma seleção.

Chrome e Ópera

Esses navegadores têm implementações semelhantes: as legendas são habilitadas por padrão e o conjunto de controles padrão contém um botão 'cc' que ativa e desativa as legendas. O Chrome e o Opera ignoram o atributo no elemento default e, em vez disso, tentam combinar o idioma do navegador com o idioma da legenda

O texto acima é o método de usar e fazer legendas de vídeo HTML5 apresentado pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!