Subtítulos en vídeos con HTML 5

in HTML 5 on by Gisela Torres

Hace tiempo escribí sobre una de las características más esperadas en el entorno web: la reproducción nativa de vídeo sin necesidad de plugins. Pero HTML 5 no pretende quedarse sólo ahí sino que seremos capaces de controlar mucho más de nuestras reproducciones. En este post nos centraremos en la característica subtítulos, la cual está ganando terreno cada vez más. Una prueba clara es el siguiente ejemplo (excepto en Firefox)

La idea es que estos subtítulos cumplan con el sistema Closed Caption para que las personas con deficiencia auditiva o visual puedan comprender el contenido que les queremos transmitir, o simplemente para dotar a nuestros vídeos de una transcripción en otros idiomas.
Dependiendo del navegador podremos utilizar diferentes formatos, como por ejemplo TTML, SRT, WebVTT, etcétera. En este post hablaremos del último nombrado.

WebVTT: Web Video Text Tracks

Se trata de un formato diseñado para el marcado de los recursos externos vía texto. Un ejemplo simple de subtítulos en este formato sería el siguiente:

WEBVTT FILE
00:00:04.000 --> 00:00:07.800
<p>Al principio creamos un sensor que convertia la voz y el movimiento en magia.</p>

La composición es bastante sencilla: En primer lugar necesitamos indicar que se trata de un archivo WebVTT a través del literal «WEBVTT FILE». Por cada uno de los subtítulos que queramos mostrar, definiremos un bloque o marca (cue en inglés) donde se indica el espacio de tiempo donde queremos que el texto se muestre. El formato para el tiempo es hh:mm:ss:msmsms –> hh:mm:ss:msmsms, siendo el primer valor el momento de inicio y el segundo el fin. Una vez definido el cuándo, en la siguiente línea/s se especifica el texto que debe aparecer.
Es muy importante tener en cuenta que si introducimos un carácter no permitido o un formato de tiempo incorrecto la línea afectada no se mostrará.

Componentes del marcado

Para dar mucha más riqueza al texto, el mismo puede tener asociado una serie de componentes, como por ejemplo párrafos (p), negrita (b), subrayado (u) cursiva (i) e incluso estilos. Estos componentes son similares a los elementos HTML:

Elemento v: Se utiliza para especificar una etiqueta de voz

00:00:08.000 --> 00:00:10.000
<v Girl>Xbox: Reproducir</v>

Con esta etiqueta podemos identificar diferentes personajes dentro de un diálogo y modificar los estilos con los que se mostrará el texto dependiendo de quién hable.

Elemento c: Es la forma de asociar clases CSS a un marcado

00:00:11.500 --> 00:00:15.000
<p>Pensamos:
<i>- "Esto puede ser divertido"</i>
<c.off>(y lo era)</c></p>

La forma de crear el estilo es exactamente igual que en el entorno web. La clase no está dentro del archivo WebVTT, sino enlazada al documento donde está el vídeo:

::cue {
    color: yellow;
    font: 1.5em sans-serif;
}
video::cue(v[voice="Girl"]) {
    color: lime;
}
.off {
    color: red;
    text-transform: uppercase;
}

En esta demo he definido tres estilos distintos: ::cue que modifica todos los subtítulos, video::cue(v[voice=»Girl»]) para aquellos marcados que tengan definidos como voz a Girl y por último .off para el ejemplo que hace uso de c.off. A día de hoy sólo los está aplicando Opera.

Posición de los subtitulos

También es posible indicar la posición del marcado dentro del vídeo:

00:00:20.000 --> 00:00:22.000 A:middle L:10%
El mundo comienza a imaginar posibilidades...

En este aspecto podemos hacer uso de las siguientes opciones:

  • L: Posición de la línea
  • T: Posición del texto
  • A: Alineamiento

El ejemplo completo de esta demo sería el siguiente:

WEBVTT FILE
00:00:04.000 --> 00:00:07.800
<p>Al principio creamos un sensor que convertia la voz y el movimiento en magia.</p>
00:00:08.000 --> 00:00:10.000
<v Girl>Xbox: Reproducir</v>
00:00:11.500 --> 00:00:15.000
<p>Pensamos:
<i>- "Esto puede ser divertido"</i>
<c.off>(y lo era)</c></p>
00:00:17.000 --> 00:00:19.000
Pero algo increible esta sucediendo
00:00:20.000 --> 00:00:22.000 A:middle L:10%
El mundo comienza a imaginar posibilidades...
00:00:23.000 --> 00:00:25.000
que ni se nos habian ocurrido
00:00:29.000 --> 00:00:30.000
Cosas inesperadas
00:00:34.500 --> 00:00:36.000
Cosas sorprendentes
00:00:40.500 --> 00:00:41.500
Cosas bellas
00:00:47.000 --> 00:00:48.000
Cosas inspiradoras
00:00:55.000 --> 00:00:58.000
Y aunque todo el mundo nos pregunta que es lo proximo que haremos con Kinect
00:00:59.500 --> 00:01:04.000
Solo podemos responderles con la misma pregunta

¿Cómo asociamos un subtítulo a un vídeo?

La forma de asociar este texto externo al elemento media es a través de la etiqueta track:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Media basics </title>
    <link href="/styles/default.css" rel="stylesheet" type="text/css" />
    <style>
        ::cue {
            color: yellow;
            font: 1.5em sans-serif;
        }
        video::cue(v[voice="Girl"]) {
            color: lime;
        }
        .off {
            color: red;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML 5 Media
        </h1>
    </header>
    <article>
        <video id="video" controls>
            <source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.webmvp8.webm" />
            <source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.mp4" />
            <track src="subtitulos.vtt" label="Spanish subtitles" kind="subtitles" srclang="es" default />
        </video>
    </article>
</body>
</html>

En track podemos asociar distintos atributos:

  • src: Se utiliza para especificar la localización del archivo. Es muy importante saber que el mismo tiene que estar alojado en un servidor web*, de lo contrario no funcionará.
  • label: Se trata de una etiqueta asociada a ese elemento de manera única.
  • kind: Indica el tipo de recurso que es. El mismo puede tener los siguientes valores:
    • Subtitles: El recurso será usado como subtitulo. (El objetivo de este post :))
    • Captions: Similar a los subtítulos, ya que contiene los diálogos, pero además pueden reflejarse más información sobre lo que se está escuchando: música, efectos de sonido, etcétera..
    • Descriptions: Se utilizará para los usuarios con deficiencia visual, dotados de un lector de pantalla, con el fin de describir qué es lo que se está visualizando en cada momento.
    • Navigation / Chapters: La idea es poder saltar en el vídeo conociendo previamente qué hay en el apartado al que queremos ir.
    • Metadata: Realmente útil si lo que queremos es añadir metadatos en distintas secciones de un vídeo.
  • srclang: Indica el lenguaje del recurso.
  • default: Si está presente, el recurso estará habilitado por defecto sin que el usuario tenga que seleccionar ninguna opción adicional.

*En cuanto al alojamiento del archivo, también es necesario que el propio servidor reconozca la extensión para poder servirlo. En mi caso he modificado el archivo Web.config:

<configuration>
    <system.web>
      <compilation debug="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5" />
    </system.web>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".vtt" mimeType="text/vtt" />
    </staticContent>
  </system.webServer>
</configuration>

Aunque pueda parecer obvio, el marcado debe estar alojado en el mismo servidor web que hará uso del mismo a través de la etiqueta video. De lo contrario nos encontraremos con el siguiente error:

Soporte

A día de hoy está disponible en las últimas versiones de Internet Explorer 10, Chrome, Opera y Safari, cayéndose en esta ocasión Firefox.

En este enlace podéis conocer más detalles sobre WebVTT.

Espero que haya sido de utilidad 😀

¡Saludos!