Embeber vídeo en HTML 5

Estoy aprendiendo sobre HTML5 y sus bondades y quería compartirlo.
El mayor problema en la actualidad para insertar o embeber un vídeo en la web es que teníamos que considerar si este utilizaría el plugin de flash o Silverligth el plugin de Microsoft, con HTML5  ese problema ha sido resuelto.

Para embeber un vídeo en HTML5 es necesario considerar lo siguiente :

. Los vídeos pueden ser ogg o mp4

. diferenciar entre codec y contenedor

. el codec ogg theora es soportado  por firefox, opera chrome

. el codec  h-264 es soportado  por safari ie9, iphone, opera, ipad , android, chrome

¿ Cual es la diferencia entre Contenedor y codec ?

La diferencia es que “contenedor” es el formato del archivo, es la extensión que nos sirve para comunicar nuestro fichero de video con el reproductor y “codec” es el decodifcador de este contenedor .

Ya sabiendo todo esto vamos ahora a embeber nuestro video en HTML5. con la etiqueta de video

<video></video>

Esta etiqueta es el atractivo visual mas importante en html5, el código completo sería así:

<video src=”movie.ogg” width=”300″ heigth=”300″controls=”controls”>Tu browser no soporta este tag HTML5</video>

como ven primero abrimos y cerramos la etiqueta <video></video> de html5 , luego le decimos la ruta src=”movie.ogg” , luego agregamos el control del reproductor controls=”controls y luego colocamos un mensaje por si el browser no soporta esta etiqueta.

Podrán ver el ejemplo Aquí

Si no cuentan con browser que soporte HTML5 podrán descargar el ejemplo de aquí

EL DATO

– HTML5 esta muy avanzado, asi que diseñadores empiecen a investigar y aprender sobre ello

– Para convertir online los videos pueden utilizar http://tinyogg.com/


Anuncios

About Luis Rodriguez Martinez

Diseñador web w3c

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: