Dependiendo del navegador con el que estés leyendo este post, podrás ver el Efecto Kinect, el Futuro según Microsoft o el gracioso conejito de Big Buck Bunny… ¿De qué depende? Es lo que me gustaría compartir hoy: HTML 5 video :D.

Todos los videos que he nombrado están incluidos como fuente de uno de los nuevos tags de HTML 5: <video> … Si, con HTML 5 no será necesario utilizar plugins externos para la reproducción de video y audio, dando un paso más allá dentro del mundo de la multi plataforma 😀 Claro está que no todo va a ser color de rosa y, si bien se sabe que HTML 5 no es un lenguaje acabado, no hay un estándar que determine qué formatos se tienen que soportar nativamente en todos los navegadores. Es por ello que cada uno ha decidido elegir un formato diferente 😛 (Qué cosas hacen para hacernos reir :D). Aún así, podemos decir que a día de hoy se soportan los siguientes:

• WebM: Es un proyecto de software libre, desarrollado por Google, y orientado para usarse justamente en este escenario: HTML 5. Está compuesto por el códec de vídeo VP8 (desarrollado por On2 Technologies) y Vorbis para el audio (desarrollado por la Fundación Xiph.org). Más información.
• H.264 (MP4): Códec de vídeo de alta compresión. Más información.
• Ogg Theora: Códec de video libre del mismo padre que Vorbis, mecionado anteriormente. Más información.

Hasta ahora, estos son los tres formatos con los que podemos jugar. Para que nos hagamos una idea, la foto está de la siguiente manera:

• Internet Explorer 9: H264 (MP4)
• Firefox: WebM y Ogg Theora.
• Chrome: WebM y Ogg Theora.
•  Safari (versión Windows): No soporta ninguno :(.
• Safari (versión Mac): //TODO 🙂
• Ópera: WebM y Ogg Theora.

¿Cómo funciona?

    <video id="movie" controls autoplay>
        <source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.mp4" />
        <source src="http://html5stuff.blob.core.windows.net/videos/big_buck_bunny.theora.ogv" />
        <source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.webmvp8.webm" />
    </video>

La verdad es que es bastante sencillo: Creamos un elemento del tipo video y, dentro del mismo, añadimos las fuentes del video que queremos reproducir. Obviamente por motivos de demo, en mi caso tengo distintos videos por cada uno de los formatos pero el objetivo es tener el mismo video en diferentes formatos para que, dependiendo del navegador, pueda escoger cuál es válido para él. Si sólo creáramos la etiqueta con las diversas fuentes tendríamos creado nuestro elemento vídeo pero no sería funcional. El motivo es que necesitamos establecer al menos el atributo controls o autoplay para que podamos iniciar la reproducción o para que comience a reproducirse por sí solo respectivamente. Si no añadiéramos uno de estos atributos, aparecería simplemente el primer fotograma del vídeo en algunos browsers y en otros simplemente aparecerá en negro.

Otros atributos que debemos tener en mente son los siguientes:

• loop: Especifica que el video se iniciará de nuevo cada vez que llegue al final del mismo.
• muted: La salida de audio será silenciada.
• preload: Comenzará a cargar el buffer del video cuando la página se haya cargado aunque no hayamos iniciado el mismo.
• width y height: Para indicar el ancho y el alto del elemento video.

Atributo poster

Si bien el resto de atributos nombrados son bastante comunes aquí hay uno que al menos resulta curioso: poster. Este atributo se utiliza para indicar la ruta de una imagen la cual queremos mostrar mientras el video esté parado (que no en pausa). Por ejemplo:

    <video id="movie" controls poster="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/kinect.jpg">
        <source src="http://html5stuff.blob.core.windows.net/videos/big_buck_bunnny/big_buck_bunny.theora.ogv" />
        <source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.webmvp8.webm" />
        <source src="http://html5stuff.blob.core.windows.net/videos/future/Future_according_to_Microsoft.mp4" />
    </video>

Dependiendo del navegador, este ocupará todo el control, pareciendo el mismo una imagen, IE mostrará la imagen tan sólo unos segundos y otros, como Firefox, le dan un toque de transparencia y parece estar dentro del propio control, no encima.

Fallback

La palabra fallback, por el momento, va a ser frecuentemente utilizada dentro del mundo de HTML 5. La misma podríamos traducirla como de reserva y vulgarmente podríamos traducirla como por si acaso 😛 ¿Esto que quiere decir? Significa que si, después de elegir todas las fuentes de video posibles, lo que ocurre es que el navegador en sí no soporta la etiqueta vídeo debemos añadir algo más para que el usuario pueda disfrutar igual que el resto :). En otros elementos es posible que sólo podamos notificar al usuario que la funcionalidad no está soportada pero, en caso del apartado media podemos hacer algo más:

            <video id="movie" controls>
                <source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.mp4" />
                <source src="http://html5stuff.blob.core.windows.net/videos/big_buck_bunny.theora.ogv" />
                <source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.webmvp8.webm" />
                <!--Fallback-->
                <embed src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.mp4"
                    type="video/mp4" width="854" height="500" />
            </video>

En este caso he utilizado la etiqueta embed porque prefiero que el navegador que utilizo decida qué plugin va a utilizar y no imponerle uno.

Adjunto los enlaces de las demos por si fuera de utilidad:

Video API
Video API – Poster
Video API – Fallback

¡Saludos!