Video HTML5 con “fallback” a flash sin Javascript

html5_video

El camino de la web va cada día avanzando más por la senda del HTML5, el soporte que comienzan a ofrecer muchos de los navegadores a parte del estandar, hace posible plantearse ciertos cambios de rumbo en nuestra web.

Una de las etiquetas más interesante es <video> que nos permite incrustar video directamente en nuestra web, sin necesidad de recurrir a plugins de terceros, como Flash, Java, WMV, etc…

Áun estamos en pañales, y eliminar completamente el flash es inviable para un sitio web que pretenda llegar al público general, por los siguentes motivos:

  • Internet Explorer, sigue a su ritmo implementando los estándares, y hasta IE9 no se planea dar soporte a la etiqueta video.
  • El problema de los codecs, Safari de momento solo plantea usar H.264 un formato propietario, que ya ha contado con el rechazo de algunos navegadores como Mozilla Firefox, que ya ha apostado por OGG, por los problemas de patentes que podrían presentare en el futuro. He de hacer un inciso para señalar que esto puede cambiar, con la inminente liberación del codec VP8, tras la compra por parte de Google de On2.

De momento podemos hacer algos experimentos ofreciendo a nuestros visitantes video en todos los formatos, de forma que si el navegador suporta la etiqueta <video> pueda visualizarlo de forma nativa en su navegador.

<video width=”540″ height=”304″ controls=”controls”>
<source src=”opsou_es_ES.ogv” type=”video/ogg” >
<source src=”opsou_es_ES.mp4″ type=”video/mp4″ >
<object type=”application/x-shockwave-flash” width=”540″ height=”304″ data=”player.swf” >
<param name=”movie” value=”player.swf” />
<param name=”quality” value=”high” />
<param name=”allowfullscreen” value=”false” /> <param name=”allowscriptaccess” value=”always” />
</object>
</video>

Veamos el proceso:

Para los navegadores que soporten la etiqueta <video>, la interpretarán y recuperarán las fuentes de vídeo, reproduciendo el formato que soporten, es por ello muy importante que tengamos los vídeos en los dos formatos, ya que si por ejemplo solo tenemos el vídeo en mp4, firefox que interpreta <video> no mostrará nada más que una pantalla de vídeo incorrecto.

En el caso de que el navegador no soporte la etiqueta <video> al tener incrustado dentro el objecto de video flash, el navegador ignorará la etiqueta <video> y mostrará el video flash.

Todo esto sin necesidad de recurrir a javascript.

Podeis ver un ejemplo de esta implementación en nuestra web.

  • Pingback: Inserta tu Video HTML5 con “fallback” a flash sin Javascript

  • aONe

    Esto es lo que se llama fallback, cierto? Cuál sería el término en castellano?

  • Anónimo

    No sabría decirte con certeza una traducción en castellano, pero podria ser algo asi como “decaimiento” , “salvaguarda”, etc. Pero lo que es claro es el concepto a transmitir con esta palabra, y es que algo funcione en todas las ocasiones, si no dispones de una tecnología, que tengas la misma o parecida funcionalidad con otra