Tabla de Contenidos

Agregar subtítulos a videos HTML5

Agregar subtítulos a videos HTML5

Hasta el momento la única solución para la subtitulación de vídeo en la Web era la inserción de éstos en el propio canal de vídeo o bien utilizar plug-ins externos para mostrar el vídeo y los subtítulos.
HTML5 nos proporciona la capacidad de ejecutar vídeo sin la necesidad de dichos plug-in externos.

Con la introducción de los elementos <video> y <audio> a HTML5, finalmente obtuvimos una manera nativa para agregar vídeo y audio a nuestros sitios web. También tenemos APIs JavaScript que nos permite interactuar con este contenido multimedia en diferentes formas

HTML5 también nos proporciona una forma nativa de hacer nuestro contenido multimedia más accesible agregando subtítulos y leyendas mediante el elemento <track>, para más información mira las recomendaciones que da la World Wide Web Consortium para reproducir videos

Ejemplo de un reproductor de vídeo en HTML5

Este ejemplo utiliza la película abierta Sintel, creada por Blender Foundation.

Abrimos el terminal y nos conectamos a nuestro servidor por medio de el protocolo SSH

ssh user@]hostname  # ejemplo ssh videos@192.168.1.4

Una vez dentro de nuestro servidor, renombramos el fichero index.html que esta en
/var/www/html/index.html

cd /var/www/html
sudo mv index.html zzzzindex.html

A continuación se muestra el código de inserción de un vídeo en HTML5, incluyendo el conjunto de controles de reproducción y visualización.

<html>
<head>
    <meta charset="utf-8" />
    <title>Vídeo WebVTT</title>
</head>
<body>
    <h2>Sintel.2010.1080p</h2>
    <video controls>
        <source src="http://www.mediafire.com/download/w7fivcdsfdnin5r/Sintel.2010.1080p.mp4" width="310" height="150" type="video/mp4">
        <track label="Subtítulos en español" kind="subtitles" srclang="es"
       src="sintel_es.vtt" default>
    </video>
</body>
</html>

Copia y pega el código en el editor de texto (nano en nuestro ejemplo)

 sudo nano index.html

Guarda el achivo

Abres con un navegador web, escribes la IP de tu servidor en la barra de direcciones y a continuación verás el reproductor de vídeo como el de este ejemplo.

<html>

<head>
    <meta charset="utf-8" />
    <title>Vídeo WebVTT</title>
</head>
<body>
    <h2>Sintel.2010.1080p</h2>
    <video controls>
        <source src="http://www.mediafire.com/download/w7fivcdsfdnin5r/Sintel.2010.1080p.mp4" width="310" height="150" type="video/mp4">
        <track label="Subtítulos en español" kind="subtitles" srclang="es"
       src="data/subtitulos/sintel_es.vtt" default>
    </video>
</body>

</html>

Reducir ancho del video

Para reducir el ancho del video, hay que sustituir la linea <video controls> por la línea que vemos a continuación.

<video controls width="620" height="265">

Nota: Esta pequeña mejora ha sido publicada por Adrex

Añadir el subtítulo al vídeo de ejemplo

Bajamos el subtitulo

cd /var/www/html
sudo wget http://www.mediafire.com/download/353zwg7qse3zsm2/sintel_es.vtt|sintel_es.vtt

Abres con un navegador web, escribes la IP de tu servidor en la barra de direcciones

Leyendas vs. subtítulos

Las leyendas y los subtítulos no son lo mismo: ambos tienen significativamente diferentes audiencias y transmiten diferente información y recomendamos que investigues acerca de las diferencias si no estás seguro de lo que son. Sin embargo, técnicamente se implementan de la misma manera, por eso el material en este artículo aplica para ambos.

El elemento <track>

HTML5 nos permite especificar las leyendas para un video utilizando Web Video Text Tracks (WebVTT) (Pistas de Texto de Vídeos Web). en nuestro ejemplo el código es el siguiente:

<track label="Subtítulos en español" kind="subtitles" srclang="es" src="sintel_es.vtt" default>

Los atributos de la etiqueta <track>

Atributo	Descripción
label	El título que identificará la pista de texto, por ejemplo en el menú de selección de subtítulos.
kind	Identifica el tipo de archivo VTT de que se trata: captions: Títulos o leyendas, pueden contener además de textos, efectos de sonido y audio chapters: Capítulos, indica que el recurso contenido en src contiene información para navegación en el vídeo descriptions: Descripciones, indica que el contenido en src contiene texto que será mostrado cuando no esté disponible el componente de vídeo metadata: Metadatos de diferente tipo, contenidos en src subtitles: Subtítulos de texto
src	Es el atributo HTML que apunta al archivo VTT que contiene los subtítulos u otros.
default	Si alguna pista de texto lo contiene, esa será la pista mostrada por defecto.

Simple SubRip to WebVTT Converter

Proveedores de vídeos como Blender Foundation proveen leyendas y subtítulos en formato de texto con sus vídeos, pero generalmente están en el formato SubRip (SRT). Estos pueden ser convertidos fácilmente a WebVTT utilizando un convertidor online como el Simple SubRip to WebVTT converter.

https://atelier.u-sub.net/srt2vtt/ noscroll noborder alignment

Validaciones de archivos VTT

Para garantizar que nuestros archivos VTT son coherentes con las normas estándar utilizamos el validador recomendado por la fundación Mozilla es el Live WebVTT Validator

Ejemplos de videos con subtitulos en HTML5 en una pagina de Dokuwiki

BBC_Life_in_Cool_Blood

  <meta charset="utf-8" />
  <title>BBC - Life In Cold Blood -- The Cold Blooded Truth</title>

</head> <body>

  <h2>BBC - Life In Cold Blood -- The Cold Blooded Truth</h2>
  <video controls width="420" height="265">
      <source src="https://www.mediafire.com/file_premium/8ha1mlmaovq3833/BBC_-_Life_In_Cold_Blood_-_1_-_The_Cold_Blooded_Truth.mp4/file" height="350" type="video/mp4">
      <track label="Español" kind="subtitles" srclang="es"
       src="data/subtitulos/The_Cold_Blooded_Truth-es.vtt" default></track>
       <track label="Ingles" kind="subtitles" srclang="es"
       src="data/subtitulos/The_Cold_Blooded_Truth-en.vtt"></track>
  </video>

</body> </body>

   <h0>David Attenborough revela \\ la sorprendente verdad sobre \\ las vidas de sangre fría de los reptiles \\ y los anfibios. \\ Estos animales son \\ tan dramáticos en combate, \\ tan coloridos en su comunicación \\ y tan tiernos en su \\ cuidado parental como cualquier otro animal. \\ Únete a cocodrilos gigantes que cortejan, \\ tortugas que se pelean \\ y ranas rojas brillantes de lucha de sumo \\ en sus sofisticadas \\ vidas alimentadas por energía solar.</h0>

</body> </html>

David Attenborough revela
la sorprendente verdad sobre
las vidas de sangre fría de los reptiles
y los anfibios.
Estos animales son
tan dramáticos en combate,
tan coloridos en su comunicación
y tan tiernos en su
cuidado parental como cualquier otro animal.
Únete a cocodrilos gigantes que cortejan,
tortugas que se pelean
y ranas rojas brillantes de lucha de sumo
en sus sofisticadas
vidas alimentadas por energía solar.

<head>

  <meta charset="utf-8" />
  <title>BBC - Life In Cold Blood -- Land_Invaders</title>

</head> <body>

  <h2>BBC - Life In Cold Blood -- Land_Invaders</h2>
  <video controls width="420" height="265">
      <source src="http://www.mediafire.com/download/3gtls7oyg2850im/BBC_-_Life_In_Cold_Blood_-_2_-_Land_Invaders.mp4" width="310" height="150" type="video/mp4">
      <track label="Español" kind="subtitles" srclang="es"
       src="data/subtitulos/Land-Invaders-es.vtt" default></track>
       <track label="Ingles" kind="subtitles" srclang="es"
       src="data/subtitulos/Land-Invaders-en.vtt"></track>
  </video>

</body> </html> |David Attenborough revela la sorprendente
verdad sobre las vidas de sangre fría
de reptiles y anfibios.
Desde selvas humeantes hasta desiertos secos,
los anfibios han dado
sus primeros pasos
a la tierra usando sus extrañas
historias de vida para romper
sus lazos con el agua
e invadir la tierra.
Esten episodio profundiza en la extraordinaria
y la vida íntima de
los anfibios de piel suave.
Esto incluye las ranas marsupiales,
una especie peculiar donde el padre
lleva a sus crías en bolsas
y luego da a luz.
También cuenta con gigantes
salamandras en guerra de más de un metro de largo
y tristes alardeadores
que ofrecen pantallas al igual que
aves submarinas del paraíso.|

<head>

  <meta charset="utf-8" />
  <title>BBC - Life In Cold Blood -- Dragons of the Dry</title>

</head> <body>

  <h2>BBC - Life In Cold Blood -- Dragons of the Dry</h2>
  <video controls width="420" height="265">
      <source src="https://www.mediafire.com/file_premium/dqis4575kv4tey5/BBC_-_Life_In_Cold_Blood_-_3_-_Dragons_of_the_Dry.mp4" width="310" height="150" type="video/mp4">
      <track label="Español" kind="subtitles" srclang="es"
       src="data/subtitulos/BBC-Life_In_Cold_Blood-3-Dragons_of_the_Dry-es.vtt" default></track>
       <track label="Ingles" kind="subtitles" srclang="es"
       src="data/subtitulos/BBC-Life_In_Cold_Blood-3-Dragons_of_the_Dry-en.vtt"></track>
  </video>

</body> </html> | David Attenborough revela
la sorprendente verdad sobre
las vidas de sangre fría de los reptiles
y los anfibios,
incluidas las lagartijas jacky que ondean,
lagartijas con cuentas de lucha
y los camaleones más grandes
en el mundo luchando
en los arboles.
También se encuentra con
el camaleón más pequeño del mundo,
que no es más grande que su miniatura,
y el
lagarto más grande de Australia.|

Enjoy!
Publicado por J.Carlos Ballesteros

Informacion relacionada

https://msdn.microsoft.com/es-es/library/dn175736.aspx
https://www.mozilla-hispano.org/agregar-leyendas-y-subtitulos-a-videos-html5/
http://anavallasuiza.com/share/presentations/html5e/
http://anavallasuiza.com/share/presentations/popcorn/#almost-finished
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
http://www.elated.com/articles/7-lovely-things-about-html5-markup
http://www.debray-jerome.fr/outils/Generateur-de-multi-colonnes-en-css3.html
http://www.css3.me/