Generar elemento track HTML
O pega el texto de los subtítulos
Opciones
Los subtítulos son para espectadores que pueden oír el audio y necesitan las palabras: una traducción, o el mismo idioma escrito. Los captions son para espectadores que no pueden oírlo, así que además llevan lo que el sonido dice a todos los demás: música, una puerta, un teléfono sonando. El mismo archivo puede servir para cualquiera de los dos propósitos, por eso la página pregunta en lugar de adivinar, y el valor no se puede cambiar después desde dentro del elemento. No se ofrecen descripciones, capítulos ni metadatos: ninguno se puede rellenar con el contenido de un archivo de subtítulos.
Una etiqueta corta de idioma como en, en-GB o pt-BR, que nombra el idioma de las palabras de los subtítulos, no el idioma del video. Una pista que se declara como subtítulos está obligada a nombrar un idioma, así que vaciar este recuadro vuelve a en en lugar de quitar el atributo; y como todos los atributos se imprimen en el resultado, puedes ver el valor de reserva antes de pegar nada.
Texto libre: Español, Español (SDH), Français. Es la línea que un espectador elige cuando una página ofrece más de una pista, así que escríbela como la reconocería tu público. Vaciar el recuadro quita el atributo por completo en lugar de escribir uno vacío, lo que devuelve el nombre al reproductor; una etiqueta vacía pondría una fila sin nombre en ese menú.
Activado, los subtítulos aparecen en cuanto se reproduce el video. Un elemento multimedia solo puede tener una pista predeterminada, así que déjalo desactivado cuando la página ya lleve una: una segunda pista que se declara predeterminada hace que los reproductores elijan la equivocada, mientras que no ser la predeterminada solo significa que el espectador la activa por su cuenta.
La velocidad de fotogramas con la que se cuentan los tiempos. En las páginas de formato es lo que necesita MicroDVD, porque guarda los tiempos como números de fotograma. En las páginas de velocidad de fotogramas es la velocidad con la que se cronometró el archivo (la versión para la que se hicieron los subtítulos), y el segundo recuadro de la página toma la velocidad del video con el que vas a usarlos. 23,976, 24, 25, 29,97, 30, 50, 59,94 y 60 son las habituales. Equivocarla desplaza toda la línea de tiempo, y en las páginas de velocidad de fotogramas la desplaza por una proporción en lugar de por una cantidad fija.
Esta página mete tus subtítulos dentro de un único elemento que puedes pegar en una página. Lo que sale es una sola línea `<track>` con el WebVTT incrustado en su atributo `src`, de modo que el texto de los subtítulos viaja con el propio marcado: no hay un segundo archivo que subir, ni una ruta que acertar, ni forma de que un reproductor acabe buscando algo que no está.
Esa incrustación es todo el sentido de la página, y la razón es cómo tratan los navegadores los archivos locales. Una pista se descarga en lugar de dibujarse, y el navegador rechaza esa descarga cuando la propia página se abrió desde el disco, así que un `<track src="film.vtt">` en una página guardada en el escritorio no muestra absolutamente nada: ningún error en pantalla, un menú de subtítulos vacío y una línea en la consola que casi nadie abre. Un URI `data:` nunca se descarga —el texto está en el atributo—, así que ahí sí funciona. El coste es el tamaño, ya que cada espacio y cada salto de línea del WebVTT se convierten en tres caracteres, y ese coste merece la pena aquí: el elemento existe para que funcione por sí solo.
Los atributos vienen de las casillas del panel, porque ninguno se puede leer de tu archivo. `kind` es el que más importa: subtitles es una traducción para espectadores que no pueden seguir el audio, y captions es la versión más completa que además lleva música y efectos de sonido para quienes no pueden oírlo. Un archivo lleno de [portazo] y notas musicales podría ser cualquiera de los dos, y solo tú sabes para qué público se hizo, así que la página pregunta en lugar de adivinar. Los otros tres son el idioma del texto, el nombre que aparece en el menú de subtítulos del reproductor y si la pista debe abrirse sola.
Dos de esas casillas se comportan de forma distinta cuando las vacías, y la diferencia conviene conocerla. Vaciar el nombre del menú elimina el atributo por completo, porque la etiqueta es opcional y omitirla simplemente deja la elección al reproductor. Vaciar la casilla del idioma no hace eso: una pista que se declara como subtítulos tiene que nombrar un idioma, así que una casilla vacía recurre a `en` en lugar de producir un elemento al que le falta algo que está obligado a tener. Ninguna de las dos es una sustitución silenciosa: la salida imprime todos los atributos, así que ves lo que produjeron tus casillas.
El texto de los subtítulos dentro del elemento lo escribe el mismo generador de WebVTT que usan las páginas de conversión, lo que significa que un archivo que llegó como WebVTT conserva todo lo que llevaba fuera de sus bloques: el texto de la línea `WEBVTT`, los bloques de comentario y de estilo, y los ajustes por bloque que deciden dónde se sitúa una línea en pantalla. No se cambia nada de tu archivo y no se sube nada; las palabras, los tiempos y el estilo salen en el estado en que llegaron.
Ejemplos
Un archivo SRT con las casillas predeterminadas
Entrada
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Resultado
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
Una línea de salida, y el archivo entero dentro de ella: %0A es un salto de línea y %20 un espacio, así que el WebVTT viaja en el atributo src en lugar de estar en un archivo junto a la página. Los cuatro atributos son las cuatro casillas: el idioma del texto, la fila que el espectador elige en el menú del reproductor y default, que es lo que hace que esta pista se abra sola. Los números de bloque del SRT se conservan como identificadores de bloque.
Un archivo WebVTT entra como el mismo WebVTT
Entrada
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
Resultado
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
Todo lo que un archivo WebVTT guarda fuera de sus bloques sobrevive: la observación de la línea WEBVTT, el bloque NOTE, el bloque STYLE que decide cómo se ven los subtítulos en el reproductor, la línea de nombre del bloque y el ajuste por bloque align:start position:10% (el %25 de ahí es un signo de porcentaje, codificado porque un porcentaje suelto no está permitido dentro de un URI). Un archivo que entró como WebVTT sale como ese mismo WebVTT. Las dos casillas dicen en-GB y English (UK), porque esta copia se hizo para un público británico: nada en el archivo lo decía.
Subtítulos para espectadores que no pueden oír
Entrada
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
Resultado
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
El archivo está lleno de efectos de sonido y música, que es exactamente para lo que sirve kind="captions" —subtítulos para quienes no pueden oír—, y la casilla es el único sitio donde se puede decir. Aparte, el nombre del menú se escribió como Tom & "the boss" y sale como Tom & "the boss": una comilla sin escapar habría cerrado el atributo ahí mismo y habría convertido el resto del nombre en atributos basura del elemento.
Tres casillas vaciadas o desactivadas
Entrada
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
Resultado
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
Tres casillas cambiadas, tres resultados distintos, porque el marcado pide cosas distintas. El nombre del menú desaparece del elemento por completo: es opcional, y omitirlo deja la decisión al reproductor. La casilla del idioma está vacía y aun así produce srclang="en": una pista que se declara como subtítulos debe nombrar un idioma, así que no existe un idioma vacío, y el valor de reserva se ve en la salida. El interruptor de predeterminado está apagado y ese atributo también desaparece, así que esta pista no se abrirá sola, que es la dirección segura cuando una página lleva más de una.
Preguntas frecuentes
¿Sigo necesitando un archivo .vtt junto a mi página?
No, y ese es el sentido de la página. El WebVTT se escribe en el atributo src como un URI data:, así que el elemento lleva sus propios subtítulos. Puedes pegarlo en una página, enviar el archivo por correo o moverlo a otra carpeta y los subtítulos seguirán apareciendo. Lo único que hay que vigilar es que todo es un solo atributo: si copias solo una parte de esa línea larga, habrás roto el URI y la pista quedará vacía.
¿Funcionará si abro el archivo HTML directamente desde mi equipo?
Sí, y ese caso es la razón por la que la página incrusta los subtítulos. Cuando una página se abre desde el disco, el navegador se niega a descargar un archivo de pista separado, así que una pista que apunta a film.vtt no mostraría nada: ningún error visible, solo un menú de subtítulos vacío. Un URI data: no se descarga en absoluto, el texto ya está en el atributo, así que funciona igual en tu escritorio que en un servidor.
¿Por qué la salida es mucho más larga que mi archivo de subtítulos?
Porque cada carácter que no es una letra o un dígito se convierte en tres dentro de un URI: un espacio es %20 y un salto de línea es %0A. Un archivo de cien kilobytes pasa a unos cuantos cientos. Base64 sería más corto, alrededor de un tercio más que el original en lugar del doble, pero el resultado sería un muro de caracteres ilegibles; tal como está, puedes mirar el atributo src y reconocer tu propio diálogo dentro, lo que compensa el tamaño extra en un archivo que vas a pegar en una página y mantener a mano.
¿Por qué no hay atributo label después de vaciar la casilla?
Porque el nombre de un menú es opcional en el marcado, y omitirlo no significa sin nombre, sino que el reproductor decide qué mostrar en su menú de subtítulos, que suele ser el idioma. Vaciar la casilla elimina por tanto el atributo en lugar de escribir uno vacío, ya que label="" se vería como una fila en blanco en ese menú. Puedes volver a poner un nombre cuando quieras; es una cadena normal y nada más de la página depende de ella.
¿Cuál es la diferencia entre subtitles y captions en esta página?
Para quién son. Los subtitles suponen que el espectador puede oír el audio y necesita las palabras traducidas o escritas; los captions suponen que no puede oírlo, así que llevan además la información que a un público oyente le llega por el sonido: música, puertas, un teléfono que suena. Un archivo puede servir para cualquiera de los dos fines y el mismo texto está en ambos, así que la página no puede saber cuál quieres. Tampoco se puede cambiar después dentro del elemento, así que elige el que necesite tu público.
¿Cuáles de los otros tipos de pista se quedaron fuera?
Tres: descriptions, que narran la imagen para espectadores que no pueden verla; chapters, que es navegación y no subtítulos y tiene su propia página en este sitio; y metadata, que no se muestra a nadie. Ninguno de los tres se puede rellenar con el contenido de un archivo de subtítulos, así que ofrecerlos solo te dejaría construir un elemento que no muestra nada. Los dos que se ofrecen son los dos que un archivo de subtítulos puede servir de verdad.
¿Se cambia algo de mis subtítulos al entrar?
El texto, los tiempos y el estilo no cambian, y un archivo WebVTT conserva sus propios bloques de comentario, estilo y región además de sus ajustes por bloque. Lo que sí cambia es la forma: las líneas se reescriben en sintaxis WebVTT, que es lo que leen los reproductores, así que la coma de 00:00:01,000 en un SRT pasa a ser un punto. Se elimina un byte a propósito: una marca inicial que dice que el archivo es UTF-8, porque el URI data: ya declara la codificación y la marca aparecería como tres caracteres sueltos al principio.