Día #10 Hablemos de los Videos en HTML5

En este tutorial o artículo, vamos a ver de pronto no todo acerca los videos en HTML5 pero si lo más relevante e importante de esta nueva etiqueta Video.

HTML ha hecho cambios muy grandes en la web, que quizás la gente común no note pero a los que trabajamos en este campo se no se nos hacen grandioso, una de estas mejores es la de poder incluir directamente video y audio en el código, para depender de el mismo HTML y no de flash como lo veníamos haciendo (bueno ahora tenemos otra alternativa para elegir), en este tutorial veremos el tema del Video en HTML5.

Una buena razón para utilizar videos en nuestro HTML5 es por la decisión de Apple de no soportar Flash en el iPhone y el IPAD. IOS, el sistema operativo que se ejecuta en estos teléfonos, tiene soporte para vídeo MP4.

Comencemos por lo básico, para añadir un video vamos a necesitar el siguiente código:

<video src”videomp4”</video>

<video "video.mp4"width"375"height"280"</video>

bueno para tener mas control a esta etiqueta podemos agregar width and height es decir alto y ancho como lo hacemos con las imagenes, quedaria asi el codigo mas completo:

El atributo src curso define la dirección del archivo de vídeo, así como para la etiqueta img. También estamos especificando las dimensiones con los atributos width y height .

1 – Multiples Fuentes para mostrar el video

<video controls"controls"width"375 height="280">     <source src="sintelogg" type="videoogg"/>     <source src="sintelmp4" type="videomp4"/>     <source src="sintelwebm" type="videowebm"/> <!--comentario para los navegadores que no soportan ninguna fuente de video -->Tu navegador no soporta video HTML5 </video>

2 – Handbrake (http://handbrake.fr).
3 – Media Converter (http://www.mediaconverter.org).
2 – Atributos de la etiqueta video

<video autoplay"autoplay"<video autoplay <!--Por ser boolean se puede utilizar de ambas maneras-->

<video controls"controls"<video controls

<video width"320"height"240"controls"controls"

<source "video.ogg""video/ogg" />

<video controls"controls"width"375 height="280">    <source src="sintelogg" type="videoogg"/>        <source src="sintelmp4" type="videomp4"/>    <source src="sintelwebm" type="videowebm"/> </video>

<video controls"controls""loop"<video loop

<video controls"controls"muted"muted"<video muted

<video poster"URL"<!--utilizamos href para la ubicacion de la imagen--> <video poster"href="imagenespostervideojpg"

<video preload"auto|metadata|none"

Metadata: el navegador debe cargar los metadatos sólo cuando se carga la página
None: el navegador no se debe cargar el vídeo cuando se carga la página

Bueno como no hay un formato estándar para los videos en HTML5 debemos de incluir varios archivos de videos con diferentes fuentes de formatos ya que no todos los navegadores leen el mismo formato, y así nos aseguraremos que el video se muestre en todos los navegadores modernos. Esto es lo que hay que hacer hoy en día por que no sabemos si los navegadores o sus fabricante se pondrán de acuerdo para elegir un solo formato que rija la web con la etiqueta video.

Lo que hacemos es quitar el src dentro de la etiqueta video y crear varios src apuntando a cada video independientemente dentro de los tags <video></video>. Seria algo asi:

A continuación te muestro el formato soportado por cada navegador, es decir los que debemos utilizar o especificar para cada navegador especificamente.

Bueno, no sé si te estarás preguntando como haces para conseguir estos formatos de video para incluirlos en la web. Pero si es así, aquí te dejo unos links para que descargues algunos programas convertidores de videos que te ayudaran a obtener múltiples formatos de video y especialmente los que necesitaremos para insertar en HTML5.

1 – Miro Video Converter (http://www.mirovideoconverter.com).

Nota: IExplorer 8 y las versiones anteriores no soportan la etiqueta video.

La etiqueta video en HTML5 cuenta con varios atributos para ampliar su funcionamiento, vamos a ver cuales son:

*Autoplay: Lo que hace este atributo es iniciar automáticamente el video una vez carga la pagina sin necesidad que el usuario de al play.

*controls: Este atributo nos muestra los controles clasicos de (play, pausa, volumen, tiempo de reproduccion, etc.) en el player del video (cada navegador muestra su propio reproductor predefinido)

*Width and Height: especificamos la altura y alto del video, lo hacemos en pixeles

*Src: El atributo src especifica la ubicación (URL) del archivo de vídeo.

Este atributo src tiene un atributo que es type, que especifica los recurso de los medios de comunicación. La forma correcta de incluir el atributo src seria este:

*Loop: el atributo loop o bucle especifica que el video comenzará otra vez, cada vez que se haya terminado.

*Muted: este atributo especifica que la salida de audio del vídeo debe ser silenciado.

*poster: este atributo especifica una imagen que se muestra mientras el vídeo se descarga, o hasta que el usuario pulsa el botón de reproducción. Si este atributo no está incluido, el primer fotograma del vídeo se utilizará en su lugar.

*Preload: empezará a precargar el video independientemente de las acciones del usuario sobre el player.

Puede tener las propiedades:

Auto: el navegador debe cargar todo el video cuando se carga la página

Este atributo no se utiliza mucho..

——————————————————————————–

Para saber mas de la etiqueta video ve a esta pagina: http://www.w3schools.com/html5/html5_video.asp