Agregar subtítulos VTT a video con HTML5

Este es un pequeño ejemplo de cómo mostrar subtítulos en diferentes idiomas con la etiqueta de la etiqueta <video> de HTML5.


Publicado: Editado: Estado:

Agregar subtítulos VTT a video con HTML5

Antes de las tantas posibilidades multimedia que nos proporciona HTML5, teníamos que agregar los subtítulos a la hora de la conversión del video. Sin embargo, ahora midiante la etiqueta <track> nos permite agregar varios archivos de texto que contengan los subtítulos con el estándar VTT.

Razón por la cual decidí hacer está publicación, porque aunque parece mucho trabajo tener que crear los archivos de subtítulos, para proyectos un poco más grandes en los que se trabajará con la colaboración de traductores puede ayudar en gran medida, ya que se pueden agregar los subtítulos a medida que los colaboradores los envían, incluso para hacer correcciones o cambios resulta ser una de las mejores prácticas.

Requerimientos:

  1. Documento HTML (para realizar la prueba).
  2. Video con formato .ogg, .webm o .mp4 (preriblemente .mp4 por ser un estándar mayormente aceptado).
  3. Una imagen para usarla como "poster" o portada del video.
  4. Subtítulos en archivo con extensión .vtt (puedes ver esta publicación para aprender a crearlos).

Empezamos...

La estructura básica para agregar un video en HTML5 es el siguiente:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Tu navegador no sorporta la etiqueta VIDEO de HTML5.
</video>

Como sabrán, dentro de la etiqueta <video> podemos agregar tantos <source> como formatos del mismo video tengamos, en el código superior vemos dos etiquetas <source> para cada formato de video disponible (.mp4 y .ogg).

Pero a parte de agregar diferentes formatos, también podemos agregar subtítulos, con la etiqueta <track> para que el video pueda ser visto desde cualquier parte del mundo sin necesidad de dominar el idioma original del video y sin necesidad, tampoco, de crear videos diferentes para cada idioma.

La forma de usar esta etiqueta es la siguiente:

<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">

En el src escbribimos la URL de donde se encuentra el archivo de subtítulos, en kind le especificamos que se trata de subtítulos (subtitles), en srclang escribimos el idioma y en label de qué forma lo verá el usuario en el menú. Al agregar los subtítulos debe aparecer un menú similar al siguiente:

En este ejemplo tengo todos los archivos en un sólo directorio, por lo que el código del .html quedaría de la siguiente manera:

<!doctype html>
<html>
<head><meta charset="utf-8" /></head>
<body>
  <div class="VideoContainer">
    <h1>HTML 5 - Video</h1>
    <h2>Video MP4 con subtítulos VTT</h2>
    <video style="width: 480px;" controls poster="video-poster.jpg">
      <source src="FSF_30_360p.mp4" type="video/mp4">
      <track label="Español por Politecnia.net" kind="subtitles" srclang="es" src="FSF_30_360p_es.vtt" default="default">
      <track label="English by Politecnia.net" kind="subtitles" srclang="en" src="FSF_30_360p_en.vtt">
      <track label="Français par Politecnia.net"  kind="subtitles" srclang="fr" src="FSF_30_360p_fr.vtt">
  </video>
  </div>
</body>
</html>

He agregado 3 archivos con subtítulos (español, english, français). Lo importante a tomar en cuenta al agregar los <track> es que deben ser únicos, no pueden haber dos con el mismo label y srclang. Al seleccionar alguno desde el menu de selección que muestra el navegador, podremos ver los subtítulos en funcionamiento.

También puedes ver cómo crear archivos de subtítulos VTT o SRT en la publicación: Crear archivos de subtítulos VTT o SRT

Bibliografía

W3Schools - Video tag

Ejemplo con imágenes de mi autoría usando el video User Lib de la Free Software Foundation.

Dar puntos de agradecimiento
Reportar esta publicación

Déjanos tu comentario

Comentarios (2)

Falto el ejemplo funcionando

No consideré que fuese necesario. Pues tendría que subir incluso un video. Pero se puede ver un ejemplo en vido en FSF - User Lib que es donde ví el código HTML para insertar los subtítulos con los <track>.

SirOne

(Administrador)

Intereses

Café (elixir de dioses), música, programación, diseño, "El lado oscuro de la luna", The Big Bang Theory, iZombie.

Puntos: 174 Votos: 126