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 forma
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 en la dirección de W3C, video element is used for playing videos or movies.
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 forma
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 en la dirección de W3C, video element is used for playing videos or movies.
Ejemplo de un reproductor de vídeo en HTML5
Este ejemplo utiliza la película abierta Sintel, creada por Blender Foundation.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 con un editor de texto, guarda el achivo como index.html en la carpeta raiz de tu servidor web. En Ubuntu 10.04 la carpeta raiz esta en:
/var/www/En ubuntu 14.04 y 16.04, la carpeta raiz esta en:
/var/www/html/Abres con un navegador web, escribes localhost en la barra de direcciones y a continuación verás el reproductor de vídeo como el de este ejemplo.
Sintel.2010.1080p
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
- Baja el subtitulo de este link: sintel_es.vtt
- Copia sintel_es.vtt en la misma carpeta donde guardaste index.html
- Abres con un navegador web, escribes localhost en la barra de direcciones y podrás ver el vídeo con los subtítulos.
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>
- 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.
