Video en HTML 5

Hasta ahora si querías poner un video en tu págian web lo normal era tirar de extensiones externas (plugins) como Flash o Java, muy dependiente de las prestaciones dle navegador. Con es estandard HTML 5 esto ya no es necesario. Este lenguaje de páginas web ya incluye la posibilidad de colocar video sin necesidad de dependencias externas y de manera muy fácil. Incluso resuelve el tema de la diversidad de formatos.

La cosa es tan fácil como usar la nueva etiqueta <video>, que define un contenedor dentro del cual indicamos el origen del video que queremos mostrar y su formato. Mira este ejemplo de código:

<video width="320" height="240" src="movie.mp4" controls>
Este navegador no soporta la etiqueta video de html5
</video>

Así de sencillo, ya tendrías un video colocado en tu web. Admite más atributos: para autoejecutarse, ejecutarse en bucle, mostrar controles... Si el navegador no entiende la etiqueta <video> mostrará la frase escrita. Los atributos que soporta esta etiqueta son

Nombre	Valores	Uso
autoplay		Para que el video se ejecute automáticamente (ignorado en los navegadores modernos)
controls		Muestra controles de ejecución, pausa, sonido.
height width	pixels	alto (height) y ancho (width) del video
loop		Reproducción en bucle.
muted		Reproducir el video sin sonido
poster	URL	Dirección de la imagen a mostrar mientras el video está descargando o en parada
preload	auto metada none	Le video se carga cuando la página se carga Solo carga metadatos el cargar la página El video NO se carga con la página (lo hace al final)
src	URL	Dirección del video que se va a reproducir.

Con el video se pueden cargar los llamados metadata, que no es más que información que acompaña al video como por ejemplo: título, autor, album... depende de cada caso

Si el explorador no reconoce la etiqueta video usado se mostrará lo que aparezca entre las etiquetas de apertura y cierre, puede ser un simple texto de aviso o un enlace por ejemplo para descargar el video o enviarlo a una página de explicaciones o una imagen...

No obstante aún existen más elementos que pueden usarse con los videos en la página web, por ejemplo para indicar el formato o formatos... Lo vemos en la siguiente página.

Los navegadores actuales no hacen caso de la etiqueta autoplay, salvo que llevan además muted, es decir, solo se acepta autoplay pero en silencio. Si le agregas controls el usuario podrá habilitar el sonido.

 

El nuevo elemento para colocar videos en una página web permite especificar diferentes formatos de reproducción, esto nos permite asegurarnos la compatibilidad con distintos exploradores.

Esto se logra mediante el componente <source> (un elemento dentro del contenedor de videos) La cosa es tan fácil como usar la nueva etiqueta <video>, que define un contenedor dentro del cual definimos el origen del video que queremos mostrar y su formato. Mira este ejemplo de código:

<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Este explorador no reconoce la etiqueta video.
</video>


Ejecuta este ejemplo en el editor y modfícalo con los atributos vistos arriba como controls, para aprender con funciona el video en el HTML moderno.

Así de sencillo sobre todo si lo comparamos con el método usado en las versiones anteriores de html, que además exigian el uso de reproductores externos.

Nombre	Valores	Uso
src	url	la dirección web del video a mostrar
type	video/ogg video/mp4 video/webm	Formato de video usado, o sea, el tipo MIME de datos.

Los formatos como avi o flv (de flash) no son admitidos, la única solución es convertirlos en alguno de los formatos señalados aquí. Para hacer esto existen herraientas gratuitas como Freemake, AviDemux, y el popular VLC