Colocar un video en tu web con HTML 5 es una tarea sencilla, no más complicada que colocar una imagen. En este artículo tomaremos ventaja del soporte para videos incluido en cada navegador web, de forma tal que nos permita generar un reproductor de video sencillo.

Crearemos la base para la aplicación y luego usaremos el elemento «video» de HTML5 para agregar video a nuestra web sin necesidad de ningún plugin.

Requisitos

Usar Chrome, Safari o Internet Explorer 9+. Por ahora deberás evitar usar Firefox y Opera debido a los problemas que estos navegadores tienen con los formatos de video. Aunque todos los navegadores modernos soportan el elemento «video», el formato MP4 tiene problemas en Firefox y Opera. Puedes siempre revisar la compatibilidad de los diferentes formatos en este enlace.

Antes de empezar deberás elegir un archivo .mp4 con el cual trabajar. Si no tienes uno, puedes encontrar cientos de archivos .mp4 disponibles en línea, o puedes descargar este.

Construyendo la base de nuestra aplicación

El código siguiente es la base sobre la cual se construirá el reproductor. Este código crea una base sencilla sobre la cual se ejecutará el video.

Deberás crear un nuevo archivo HTML en el directorio en donde trabajas, y nombrar a este archivo index.html. Luego, copia y pega este código:

[html]

<meta charset=»utf-8″ />
HTML5 Video Player</pre>
<style><!–
body {
font-family: sans-serif;
border: 0;
margin: 0;
padding: 0;
}
header {
text-align: center;
}
#player {
display: table;
width: 100%;
padding: 4px;
}
#player > div {
display: table-cell;
vertical-align: top;
}

–></style>
<pre>

</pre>
<header>
<h1>HTML5 Video Player</h1>
</header><section id=»player»>
<div><!– Aqui va el video –></div>
</section>
<pre>

[/html]

Ahora, con la base lista, vamos a la parte divertida, agregar el video a nuestra página.

Usando el elemento «video» de HTML5 para agregar videos a nuestras páginas

El objetivo al crear el elemento «video» para HTML5 fue lograr que agregar un video a cualquier web fuera tan fácil como agregar una imagen. Aunque encontrarás algunas complicaciones adicionales, más que nada debido a que los formatos de videos tienen mayores características que los formatos de imagen, el objetivo inicial ha sido ya logrado.

Un video en HTML5 se verá de esta forma:

A continuación te mostramos el código necesario para mostrar el video. Como puedes ver, no es nada complicado.

Reemplaza este código en donde dice «aqui va el video» en el código anterior, y asegúrate de reemplazar [TU VIDEO] con la ruta hacia tu archivo .mp4.

[html] <video src=»[ TU VIDEO ].mp4″
controls
width=»720″ height=»480″>
Tu navegador no soporta el elemento video. <a href=»videos/VID_20120122_133036.mp4″>Intenta descargando este video</a>.
</video>
[/html]

En este código, el atributo src es la ruta de tu video, y el atributo controls indica que el video deberá llevar los controles por defecto (omítelo si no deseas que el video muestre dichos controles). Los atributos width y height indican el ancho y la altura del video, respectivamente. El texto dentro del elemento es un texto de ayuda en caso la etiqueta no sea reconocida por el navegador.

Resumen

La web esta siendo usada cada vez más como reemplazo de los medios de transmisión tradicionales. Servicios como Netflix, YouTube, Spotify, last.fm y Google Music buscan reemplazar tu colección de DVDs y CDs con reproductores online. Con HTML5, el video y audio se convierten en ciudadanos de primera clase en lo que respecta a contenido web. En lugar de dejar la responsabilidad de la reproducción de medios a herramientas o plugins de terceros, este se ejecuta dentro del mismo navegador, permitiéndote controlar y manipular medios desde la misma aplicación web.

Como puedes ver, HTML5 hace que el proceso de agregar video o audio a una web sea tan sencillo como cuando se agregan imágenes.

Fuente: WebDesignDepot

Deja una respuesta