Una de las mejores cosas de HTML5 es que trabajar con audio y video; (temas anteriormente dominados en su totalidad por flash) es realmente fácil. Sin embargo, por que no todos los navegadores han llegado allí y hay diferencias importantes con los Codecs, es siempre buena idea tener uno (o varios) métodos de ‘regresión’ en caso de que algo falle.
Incluir un video con HTML 5 es tan fácil como una línea de código:
<video src="mivideo.mp4" width="640" height="480" />
HTML5 define los elementos (<audio> y <video>) pero no habla de codecs, Internet Explorer soporta los formatos h.264 y mp4, mientras que los demás (Firefox, Safari y Opera) incluyen soporte para ogg/vorbis y próximamente webm, así que por ahora es necesario tener (y publicar) varios videos codificados en formatos diferentes: (El navegador mostrará el primero compatible).
<video src="mivideo.mp4" width="640" height="480" />
<video src="mivideo.ogg" width="640" height="480" />
<video src="mivideo.webm" width="640" height="480" />
Si el navegador no soporta el tag <video>, o ninguno de los formatos es compatible, es posible hacer una ‘regresión’ a flash, así:
<video width="640" height="480">
<source src="mivideo.mp4" type="video/mp4" />
<source src="mivideo.ogv" type="video/ogg" />
<source src="mivideo.webm" type="video/webm" />
<!-- Para compatibilidad con IE, use la sintaxis object -->
</video>
O mostrar un mensaje (o imágen) de error:
<video width="640" height="480">
<source src="mivideo.mp4" type="video/mp4" />
<source src="mivideo.ogv" type="video/ogg" />
<source src="mivideo.webm" type="video/webm" />
<p>No es posible mostrar este video. Su navegador no es compatible con HTML5!</p>
<img src="novideo.png" />
</video>