Cómo usar y crear subtítulos de vídeo HTML5

HTML5 nos permite especificar subtítulos para vídeos mediante elementos. Varias propiedades de este elemento nos permiten especificar cosas como el tipo de contenido que estamos agregando, el idioma en el que se encuentra y por supuesto una referencia al archivo de texto que contiene la información real de los subtítulos.

 <video id=controles de video> <fuente src=./step.mp4 tipo=video/mp4> <etiqueta de pista=中文字幕kind=subtítulos capítulos metadatos srclang=zh src=./caption.vtt predeterminado> <etiqueta de pista=ABC kind=subtítulos srclang=de src=./caption1.vtt> <etiqueta de pista=Número kind=subtítulos srclang=es src=./caption2.vtt> </vídeo>

• A kind se le asigna un valor subtítulos, que indica el tipo de contenido que contiene el archivo.
• A la etiqueta se le asigna un valor que indica el idioma en el que está escrito este conjunto de subtítulos, como inglés o alemán, y estas etiquetas aparecerán en la interfaz de usuario para permitir al usuario seleccionar fácilmente el idioma en el que desea ver los subtítulos.
• A src se le asigna en cada caso una URL válida que apunta al archivo de subtítulos WebVTT correspondiente.
• srclang indica el idioma en el que se encuentra el contenido de cada archivo de subtítulos.
• El atributo predeterminado se establece en el elemento en inglés para indicarle al navegador que esta es la definición de archivo de subtítulos predeterminada que se utilizará cuando los subtítulos estén activados y el usuario no haya realizado una selección específica.

El archivo que contiene los datos de subtítulos reales es un archivo de texto simple que sigue un formato específico, en este caso el formato Web Video Text Track (WebVTT). La especificación del complemento WebVTT aún está en desarrollo, pero sus partes principales son estables, por lo que podemos usarla hoy.

Los proveedores de vídeo como Blender Foundation proporcionan subtítulos y subtítulos en formato de texto para sus vídeos, pero normalmente en formato SubRip Text (SRT). Estos se pueden convertir a WebVTT utilizando convertidores en línea como srt2vtt.

La extensión del archivo es ==.vtt==

==.vtt==El tipo MIME del archivo es texto/vtt

En los navegadores Chrome y Firefox, los subtítulos .vtt se pueden cargar y mostrar sin ningún obstáculo. Sin embargo, para los navegadores IE10+, aunque los subtítulos .vtt también son compatibles, es necesario definir el tipo MIME; de lo contrario, se ignorará el formato WebVTT. Una forma más sencilla es agregar un archivo .htaccess en la carpeta donde se encuentran los subtítulos y escribir AddType text/vtt .vtt en él.

//Debe declarar ==WEBVTT== al principio del archivo

WEBVTT

//Hora de inicio-->Hora de finalización, la unidad es milisegundos

00:00:00.001 --> 00:00:03.000

// Muestra los subtítulos correspondientes al tiempo anterior. El estilo se puede configurar por separado y es similar al nombre de la clase.

<v aa>Nueve Yinling inferior 1111</v>

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

<v bb>Dioses y demonios 2222</v>

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

Con mi cuerpo de sangre 3333

00:00:09.001 --> 00:00:12.000

Sacrificio 4444

00:00:12.001 --> 00:00:15.000

Tres vidas y siete vidas 5555

El pseudoelemento ::cue es la clave para apuntar a pistas de texto individuales con fines de estilo, ya que coincide con cualquier señal definida. Sólo hay unas pocas propiedades CSS que se pueden aplicar a las sugerencias de texto:

• color
• opacidad
• visibilidad
• decoracion-de-texto
• sombra de texto
• rendimiento de taquigrafía de fondo
• describir el rendimiento de taquigrafía
• atributo taquigráfico de fuente
• altura de línea
• espacio en blanco

==Nota: Los estilos de cue de ::cue actualmente funcionan en Chrome, Opera y Safari, pero aún no en Firefox. ==

WebVTT también admite algunas etiquetas HTML para el control de estilo. Las más comunes incluyen etiqueta de sonido ==v==, etiqueta de color ==c==, etiqueta de negrita ==b==, etiqueta de cursiva ==i== y subrayado ==u. == etiqueta, así como etiquetas ==ruby== y ==lang==, etc.

 //Establece el estilo de los subtítulos del vídeo::cue{ background-color:transparent; color:white; font-size:20px; line-height: 100px;}//Establece el estilo de los subtítulos de una sola línea::cue( v[voice= aa]){ color:verde;}video::cue(v[voice=bb]){ color:rgb(0, 26, 128);}

ES DECIR

De forma predeterminada, los subtítulos de Internet Explorer 10+ están habilitados y el control predeterminado contiene un botón y un menú que proporciona la misma funcionalidad que el menú que acabamos de crear. También se admite el atributo predeterminado.

==Nota: IE ignorará por completo los archivos WebVTT a menos que defina un tipo MIME. Esto se puede hacer fácilmente agregando un archivo .htaccess al directorio apropiado que contenga AddType text/vtt .vtt==

Safari

Safari 6.1+ tiene soporte similar para Internet Explorer 10+, mostrando un menú con diferentes opciones disponibles y agregando una opción automática que permite al navegador hacer una selección.

Chrome y Ópera

Estos navegadores tienen implementaciones similares: los subtítulos están habilitados de forma predeterminada y el conjunto de controles predeterminado contiene un botón 'cc' que activa y desactiva los subtítulos. Chrome y Opera ignoran el atributo del elemento predeterminado y en su lugar intentan hacer coincidir el idioma del navegador con el idioma de los subtítulos.

Lo anterior es el método para usar y crear subtítulos de video HTML5 presentado por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!