En esta ocación veremos como insertar un vídeo en una pagina web utilizando Html5. Para insertar un archivo de vídeo o enlazar con un vídeo en directo, usaremos la etiqueta: <video>.
Su sintaxis es:
<video src="rutadelvideo/nombredelvideo.tipodevideo" [parametros] />
Html5 permite incorporar elementos de video y audio de una forma mu sencilla y sin necesidad de incluir algún plugin.
Además con html5 se elimina en gran medida la barrera del “formato”, pues siempre ha existo una guerra entre fabricantes navegadores sobre cual debe ser el formato de vídeo estandar.
El elemento video también incorpora los atributos autoplay, loop y preload, al igual que el elemento de audio.
Veamos algunos ejemplos de su uso y configuración.
Tamaño del video. Esto lo determinamos con los parametros width y height
<video src="archivo.mp4" controls width="460" height="340"></video>
Portada del vídeo. Podemos agregar una imagen de portada del vídeo, la cual se va a mostrar mientras se carga el mismo. Para esto utilizamos el parametro ‘poster’.
<video src="archivo.mp4" controls width="360" height="240" poster="poster.jpg"></video>
Multiformato. Permite reproducir diversos tipos de formato de video, lo cual lo hace compatible con todos los navegadores.
<video controls width="360" height="240" poster="poster.jpg">
<source src="archivo.ogv" type="video/ogg" />
<source src="archivo.mp4" type="video/mp4" />
</video>
¿Y que pasa si el usuario tiene un navegador obsoleto como por ejemplo IE8?
Tenemos 2 opciones, la primera indicarle al usuario que actualice su navegador para poder ver el contenido adecuadamente.
<video src="archivo.mp4" controls width="460" height="340">
Su navegador esta obsoleto, favor de actualizarlo!!!
</video>
Otra manera sería agregando el plugin de Flash con la etiqueta object
<video controls width="460" height="340" poster="poster.jpg">
<source src="archivo.ogv" type="video/ogg" />
<source src="archivo.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=archivo.mp4">
<param name="movie" value="player.swf?file=archivo.mp4" />
</object>
</video>De esta manera podemos empotrar fácilmente un vídeo a nuestro página web utilizando Html5.
