Cómo insertar vídeos en tu web que sean compatibles con todos los navegadores mediante HTML5

Durante muchos años, Flash ha sido la solución más popular a la hora de reproducir vídeos en Internet. Pero HTML5 ha traido consigo una nueva solución, los vídeos de HTML5. En este tutorial, te enseñaré cómo insertar vídeos en tu web que sean compatibles con todos los navegadores mediante HTML5.

Paso 1: Preparando los ficheros

Lo primero que tienes que hacer es asegurarte de que los ficheros que vayas a utilizar están en el formato correcto para que se reproduzcan en los vídeos de HTML5. No existe un formato estándar así que debes tener múltiples versiones del mismo fichero para servir el fomato correcto en el navegador del usuario. Este es el mayor problema en estos momentos de los vídeos de HTML5.

Debes tener el vídeo en al menos tres formatos. El primero es .mp4 (o .m4v), el segundo formato es .ogv y por último, el formato .webm.

Convertir tu fichero en dichos formatos de vídeo es realmente sencillo si utilizas Video Converter, una herramienta la mar de práctica. No tendrás que instalar nada en tu ordenador, simplemente sube tu vídeo, elige el formato de salida que desees y ya está.

Ahora que tienes el fichero en los formatos requeridos, vamos a empezar con el código. Como podrás ver, es muy sencillo.

Paso 2: Implementando el reproductor

Abajo tienes el código para mostrar un vídeo HTML en tu página web. Ten en cuenta que para que el vídeo se muestre correctamente en un iPad, debe comenzar la lista de formatos con el fichero mp4.

En la línea 5 he añadido el enlace de descarga por si el usuario utiliza un navegador muy antiguo y no reconoce el tag video.

<video width="800" height="374">
	<source src="my_video.mp4" type="video/mp4" />
	<source src="my_video.ogv" type="video/ogg" />
	<source src="my_video.webm" type="video/webm" />
	Tu navegador no soporta vídeos en HTML5. Descarga el vídeo <a href="video.webm">aquí</a>.
</video>

Una cosa muy importante que debes recordar es que tu servidor está sirviendo el vídeo con el MIME type correctto en el Content-Type header. Para asegurarnos de ello, abre el fichero .htaccess de tu sitio web (no olvides realizar una copia de seguridad antes de editarlo) y añade las siguientes líneas:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Pueden utilizarse también varios atributos en el elemento video, por ejemplo para autoreproducir el vídeo, para hacer que se reproduzca en bucle o para que muestre algunos controles por defecto. Para una explicación más completa haz clic aquí.

Paso 3: Compatibilidad con navegadores antiguos

Ahora ya tenemos un reproductor de vídeos en HTML5 super molón. Pero el problema es que los navegadores más antiguos no soportan el tag de vídeo de HTML5. Para aquellos navegadores, lo mejor es utilizar Flash.

Como el propósito de este tutorial no es mostrarte cómo implementar un reproductor de vídeos en Flash, estoy asumiendo que tienes tu video en el formato .flv (al cual llamaremos video.flv a continuación), así como un reproductor flash .flv (al cual llamaremos fallback.swf).

Como puedes ver más abajo, he añadido el tag object dentro del tag video. Tan simple como eso.

<video width="800" height="374">
	<source src="my_video.mp4" type="video/mp4" />
	<source src="my_video.ogv" type="video/ogg" />

	<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">
		<param name="movie" value="fallback.swf" />
		<param name="flashvars" value="autostart=true&amp;file=video.flv" />
	</object>

</video> 

Fuente: catswhocode.com