Seleccionar página

¿Cómo poner subtítulos a un vídeo en una web con HTML5? En muchas ocasiones queremos asociar unos subtítulos a un vídeo. A veces por facilitar la accesibilidad a usuarios con algún tipo de discapacidad, o bien porque en muchas ocasiones el usuario no quiere o no puede reproducirlo con audio en ese momento. En estos casos os habréis preguntado cómo poner subtítulos a un vídeo.

Por ello es muy útil introducir subtítulos en nuestros contenidos audiovisuales. Si enlazamos un vídeo de YouTube, en algunas ocasiones el usuario que lo subió ya se preocupó de subirlo con los subtítulos pertinentes. Pero ¿y si no lo hizo? Pues nos toca a nosotros. ¿Cómo lo haríamos?

Cómo poner subtítulos a un vídeo en una web con HTML5

El proceso es muy sencillo, pero también puede ser un poco tedioso si se trata de un vídeo muy largo, como el capítulo de una serie o una película, ya que es un proceso manual y tenemos que ir frase por frase sincronizándolas con los minutos y segundos del archivo de vídeo. Por ello vamos a hacer un ejemplo con un vídeo corto, de una canción.

Lo primero es hacernos con el archivo de vídeo. Podemos obtener vídeos de bancos gratuitos, de pago o bien de páginas como YouTube o Vimeo. Si no sabes cómo descargar vídeos de estas páginas, un gran recurso es savefrom.net. Esta web nos da opción de descargarlos introduciendo la URL del vídeo.

Una vez tenemos el vídeo en nuestro haber, os recomiendo renombrarlo mediante la tecla F2 y simplificar el nombre evitando tildes, espacios, eñes y demás caracteres raros que puedan dar problemas con la URL. Lo subimos mediante un cliente FTP a nuestro servidor local o remoto. Desde nuestro HTML lo llamamos mediante la etiqueta <video> a nuestra web:

<video width="600" height="400" controls>
	<source src="nombre-del-archivo-de-video.mp4" type="video/mp4">
</video>

Como puedes observar utilizamos la etiqueta <video> y mediante atributos width y height determinamos unas medidas. Con el atributo controls mostramos los controles, necesarios para activar los subtítulos, ya que por defecto no los va a mostrar.

Mediante <source> llamamos al archivo. Con el atributo src especificamos el nombre y con type el tipo de archivo.

Ahora debemos preparar el archivo de los subtítulos. En un editor de texto generamos un archivo y lo guardamos con la extensión .vtt. La estructura del archivo es la siguiente:

Cómo poner subtítulos a un vídeo en una web

Cómo poner subtítulos a un vídeo en una web

Como ves la nomenclatura de la temporización se determina en horas, minutos y segundos; separados por dos puntos, como en cualquier reloj. A partir de ahí, para controlarlo con mayor precisión, se separa con un punto y podemos determinar los milisegundos.

Una vez que hemos temporizado los subtítulos en nuestro archivo VTT lo guardamos y lo subimos por FTP a nuestro servidor local o remoto.

Para vincular los subtítulos a nuestro video en el HTML utilizamos la etiqueta <track> debajo de <source>

<video width="600" height="400" controls>
	<source src="nombre-del-archivo-de-video.mp4" type="video/mp4">
	<track src="nombre-del-archivo-con-subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
</video>

Como ves con el atributo «src» llamamos a nuestro archivo de subtítulos. Pero debemos especificar qué tipo de archivo es con el atributo «kind». Además con «srclang» debemos especificar el prefijo del idioma en que están, ya que es posible que subamos varios archivos para subtitular en diversos idiomas. Con el atributo «label» definimos la etiqueta que se verá a la hora de elegir en qué idioma quiere ver los subtítulos el usuario.

Y esto es todo. Como soy amante y adicto a la buena música, os dejo un ejemplo de muestra para que veáis cómo funcionaría el resultado, con este temazo del último disco de Amaral:

Amaral – Llévame muy lejos

<video width="100%" height="auto" controls>
	<source src="amaral-llevamemuylejos.mp4" type="video/mp4">
	<source src="amaral-llevamemuylejos.webm" type="video/webm">
	<track src="llevamemuylejos.vtt" kind="subtitles" srclang="es" label="Español">
</video>

IMPORTANTE: Por defecto los subtítulos aparecen desactivados. Antes de reproducir el vídeo pincha en el botón de Configuración (CC) abajo a la derecha para activarlos.

Si te ha gustado este artículo visita este otro que incluye mi guía de color