Realizar vídeos compatibles en reproductor HTML5

Durante años, Flash ha sido la solución más popular para la reproducción de vídeos en la web. Sin embargo, la especificación HTML5 está trayendo una nueva solución, videos HTML5. En este tutorial, mostraremos cómo utilizar HTML5 para ver videos en su sitio web.

Paso 1: Preparando los archivos

Lo primero que debe hacer es asegurarse de que sus archivos están en el formato adecuado para la reproducción de vídeo HTML5. En este momento, no hay un formato estándar, de modo que tendrá que tener varias versiones de un mismo archivo con el fin de servir al formato adecuado para el navegador del cliente. Este es de hecho el mayor problema con los vídeos HTML5 en estos momentos.

Usted necesitará los tres formatos siguientes: El primero es mp4 (o m4v.) Que se utiliza en los productos de Apple como el iPad, Safari, etc, el segundo formato necesario es ogv, un formato de código abierto utilizado por Firefox… Y el último es. WebM.

La conversión de su archivo en los formatos es bastante fácil si se utiliza esta herramienta muy útil llamado Video Converter. No tienes nada que instalar en el computador, basta con subir el vídeo, elegir el formato de salida deseado, y ya está!

Ahora que tiene su video en los formatos requeridos, vamos a empezar a programar. Verás, es muy fácil.

Paso 2: Codificando el reproductor

A continuación se muestra el código básico para la visualización de un vídeo de HTML5 en una página web. Tenga en cuenta que para que el video se muestre correctamente en el iPad, se debe comenzar con el video. MP4 en la lista src.

En la línea 5, he añadido un enlace de descarga para navegadores antiguos que no reconocen la etiqueta <video>

[code lang=»html»]
<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" />
Etiqueta de vídeo no compatible. Descargar el vídeo. <a href="video.webm">Descargar</a>.
</video>
[/code]

Una cosa muy importante a tener en cuenta es asegurarse de que su servidor cumple los archivos de vídeo con el tipo MIME correcto en el encabezado Content-Type. Para asegurarse de que será, abra el sitio .htaccess (no se olvide de hacer una copia de seguridad antes de cualquier modificación) y agregue las siguientes líneas:

Además, los atributos se pueden utilizar diversos con el elemento <video>, por ejemplo, para la reproducción automática de vídeo, bucle, o mostrar automáticamente algunos controles. Para obtener la referencia completa, por favor visite el sitio w3.

Paso 3: Creación de un plan alternativo para los navegadores más antiguos

Ahora, usted tiene un super reproductor de video HTML5. Pero el problema es que algunos navegadores más antiguos no son compatibles con cualquier vídeo HTML en absoluto. Para los exploradores, la única solución es utilizar un retorno de Flash Player.

Como el propósito de este tutorial no es mostrar cómo construir un reproductor de vídeo Flash, estoy asumiendo que usted tiene un video en el formato .flv (llamado video.flv abajo), así como un flash .flv player (llamado de reserva .swf).

Como se puede ver a continuación, se ha añadido la etiqueta <object> dentro de la etiqueta <video>. Es tan simple como eso!

[code lang=»html»]
<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&file=video.flv" />
</object>

</video>
[/code]