Evitar problemas de compatibilidad con HTML5 usando Modernizr

Si estamos empezando un proyecto en el que vamos a utilizar HTML5, de las primeras cosas que nos van a venir a la cabeza son los problemas de compatibilidad que tendrá nuestra web con navegadores antiguos como IE8.

Modernizr es una herramienta que nos va a ayudar a resolver este problema, ya que permite adaptar nuestras webs programadas con HTML5 a cualquier navegador sin importar la versión. La idea es detectar qué funcionalidades no son compatibles con el navegador que estamos usando y buscar la manera de simularlo mediante Javascript.

La herramienta nos permite descargar solamente las capacidades que necesitemos y la url al proyecto es http://www.modernizr.com.

Elemento audio HTML5

Al igual que con el elemento <video>, hasta la llegada del HTML5, no existía ningún estándar para mostrar audios en una web y la mayoría eran mostrados a través de plugins que podían cambiar para los diferentes browsers.

Con HTML5 se define un nuevo elemento <audio> que especifica un método estándar de insertar audios en una web.

Los formatos soportados son mp3, wav y ogg y aquí os dejo una tabla donde se indica qué formato soporta cada browser.

Browser	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	NO	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	NO	YES	YES

SINTAXIS

La sintaxis necesaria para insertar un audio en la web es la siguiente:

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.wav" type="audio/wav">
  <source src="audio.ogg" type="audio/ogg">
  Tu navegador no soporta el elemento audio.
</audio>

ATRIBUTOS

Encontramos la mayoría de atributos y elementos iguales al <video>:

• controls: añade los controles, como los botones play, stop, pausa y volumen.
• source: el elemento de HTML5 source nos servirá para indicar qué audio queremos reproducir. Podemos indicar varios sources con varios formatos y así el navegador reproducirá el primero que reconozca, ya que todos los navegadores no son capaces de reproducir todos esos formatos
• track: con este nuevo elemento de HTML5 indicamos las pistas de texto para los audios.

MÉTODOS Y EVENTOS

El elemento <audio> dispone además de atributos una serie de métodos básicos para poder iniciar o pausar, como son play() y pause(), además de eventos que nos permitirán controlar aspectos de la reproducción, como el momento de la carga, el aumento del volumen, etc.

Para obtener una referencia completa de las características del elemento <audio> de HTML5 podéis acceder al siguiente link:

http://www.w3schools.com/tags/ref_av_dom.asp

Elemento video HTML5

Hasta la llegada del HTML5, no existía ningún estándar para mostrar vídeos en una página web y la mayoría eran mostrados a través de plugins (como Flash Player) e incluso hacían falta diferentes plugins para los diferentes browsers.

HTML5 define un nuevo elemento <video> que especifica un método estándar de encapsular vídeos en una web.

Internet Explorer 9+, Firefox, Opera, Chrome, y Safari soportan el elemento <video>. Además, los formatos de vídeo soportados son mp4, ogg y webm.

SINTAXIS

Para añadir un elemento <video> en una página web necesitamos el siguiente código:

<video width="640" height="480" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
Tu navegador no soporta el elemento video.
</video>

ATRIBUTOS

Los atributos más importantes que destacamos son los siguientes:

• controls: añade los controles al vídeo, como play, stop, pausa y volumen.
• height y width: indican el ancho y alto del vídeo. Si no proporcionamos estos datos el espacio que ocupa se recalculará en el momento de mostrarse el vídeo, ya que el navegador no tiene forma de saber el tamaño que ocupará, con lo que gráficamente puede quedar mal la web.
• source: el elemento de HTML5 source nos servirá para indicar qué vídeo queremos reproducir. Podemos indicar varios sources con varios formatos y así el navegador reproducirá el primero que reconozca, ya que todos los navegadores no son capaces de reproducir todos esos formatos
• track: con este nuevo elemento de HTML5 indicamos las pistas de texto para los vídeos.

MÉTODOS Y EVENTOS

El elemento <video> dispone además de atributos una serie de métodos básicos para poder iniciar o pausar el vídeo, como son play() y pause(), además de eventos que nos permitirán controlar aspectos de la reproducción, como el momento de la carga, el aumento del volumen, etc.

Para obtener una referencia completa de las características del elemento <video> de HTML5 podéis acceder al siguiente link:

http://www.w3schools.com/tags/ref_av_dom.asp