HTML5: Vídeo

Insertar archivos de vídeo en una web

La inserción de vídeo en una web va a depender de la tecnología que esté empleando ésta. Si estamos usando HTML4, tendremos que incorporar un reproductor flash para poder reproducir vídeo directamente.

El uso de flash no está especialmente recomendado por muchas razones, aunque las principales y de mayor peso son los riesgos de seguridad (ya que flash es una fuente contínua de fallos y vunlerabilidades) y la falta de compatibilidad (ya que hay navegadores y plataformas, sobre todo móviles, donde flash no está soportado).

Por suerte, el estándar HTML5 tiene la ventaja de permitir la reproducción directa de archivos multimedia de vídeo y audio. Con unas simples líneas podemos añadir vídeos a nuestras páginas, y éstos podrán reproducirse directamente desde el navegador.

Cómo instartar vídeo en nuestra web

Sólo tenemos que usar el siguiente código:

<video width="320" height="240" controls>
	<source src="movie.webm" type="video/webm">
	<source src="movie.mp4" type="video/mp4">

	<track label="English" kind="subtitles" srclang="en" src="subtitulo-en.vtt" default>
	<track label="Español" kind="subtitles" srclang="es" src="subtitulo-es.vtt">

	Contenido alternativo
</video>

	

Donde:

• <video> → Es la etiqueta HTML que indica que ahí va un contenido de tipo video.
• controls → Es uno de los parámetros que podemos indicarle a "video" para que muestre, en este caso, los controles del reproductor (play, pausa, etc.)
• <source> → Es la etiqueta HTML que usamos para indicarle, gracias al parámetro "src" dónde está el archivo de vídeo a incorporar.
• <track> → Es la etiqueta HTML que usamos para indicarle, gracias al parámetro "src" de dónde tomar los archivos de subtítulos.
• Contenido alternativo → Es cualquier tipo de contenido HTML que queremos que se muestre en el caso de que el navegador no soporte la etiqueta "video"..

Otros parámetros de la etiqueta vídeo:

• controls → Se muestran los controles del reproductor.
• preload="auto" → Precarga el archivo antes de que se le dé al play, de forma que no haya que esperar para reproducirlo. Por contra, se consume ancho de banda aunque no se reproduzca el vídeo, por eso podemos indicar preload="none" para evitar este comportamiento.
• autoplay → El vídeo se reproduce automáticamente.
• loop → El vídeo se reproduce en bucle indefinidamente; al terminar, comienza solo de nuevo.
• muted → El volumen del vídeo se pone a 0 por defecto y es el usuario el que tiene tiene que activar el sonido del reproductor para escucharlo.
• poster → Archivo de imagen (pej. un png) que podemos cargar para que muestre mientras no se reproduce el vídeo.

Nota: fijaos que hemos añadido dos archivos a la etiqueta vídeo: un WEBM y un MP4. Esto es debido a que por distintos temas legales y, sobre todo, a una estúpida guerra comercial entre los diferentes navegadores, no todos los navegadores soportan todos los códecs de vídeo.

En concreto, aquí hay algunos de los códecs soportados:

Y, más concretamente, estos son los códecs que soportan los distintos navegadores:

Como véis, el MP4 está soportado por todos los navegadores, pero al ser un códec patentado, si lo usamos, tendríamos que estudiar previamente las condiciones legales de su uso, para evitar incurrir en alguna vulneración de derechos de propiedad o abonar el pago de las licencias correspondientes.

Por otro lado, el OGG y, sobre todo el formato WEBM, ofrecem buena calidad siendo códecs libres y se pueden usar sin ningún problema. Por contra, los navegadores de Internet Explorer y Safari no lo soportan (al menos, no directamente).

Es por eso que en el ejemplo del código anterior se idican 2 formatos al mismo tiempo: MP4 y WEBM. De esta forma garantizamos que TODOS los usuarios podrán ver el vídeo, con independencia de qué navegador y sistema usen.

Volver al índice