Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

HTML 5 IV

Multimedia en HTML 5

En HTML 5 se pretende que el contenido multimedia, (audios y vídeos) formen parte de la página y dejen de ser unos elementos incrustados. Se pretende por tanto que los nuevos navegadores se adapten a ello e incorporen recursos para poder reproducir este contenido sin tener que usar plugins externos.

De momento pocos son los navegadores que permiten reproducir audios o vídeos en los formatos más habituales sin utilizar plugins externos, por lo que deberemos seguir usando la forma habitual de insertarlos hasta que la mayoría de ellos los pueda reproducir.

Etiqueta embed

La etiqueta embed, es usada normalmente para incrustar video y audio aunque no es reconocida como parte del lenguaje de HTML 4 o XHTML1. En HTML 5 se reconoce ya como propia, pudiendo validar correctamente la página al usar esta etiqueta.

Etiquetas audio y video

Dos nuevas etiquetas para incrustar contenido multimedia directamente: <audio> </audio> y <video> </video>.

Estas etiquetas pretenden simplificar la inserción de contenido multimedia, evitando tener que usar plugins en el navegador. Es el propio navegador el que debe reconocer el formato multimedia y ponerlo en marcha. La mayoría de los navegadores no se han puesto al día para reconocer los formatos de audio y video más comunes, por lo que de momento tendremos que seguir usando la etiqueta embed

Las etiquetas audio y video tienen los siguientes atributos para poder localizar y controlar el archivo multimedia.

Veamos con algunos ejemplos cómo se puede escribir el código:

<audio src="sintonia.mp3" autoplay loop ></audio>

<video src="mivideo.mp4" controls autobuffer widht="300"></video>

La etiqueta source

no todos los navegadores soportan todos los formatos de audio o video, por lo que podemos poner en la página enlaces al mismo archivo en varios formatos, para que el navegador detecte el formato que soporta. Para ello utilizamos la etiqueta source como en el siguiente ejemplo:

<audio autoplay loop>
   <source src="sintonia.mp3"/>
   <source src="sintonia.wav"/>
   <source src="sintonia.au"/>
</audio>

La etiqueta es válida tanto para audio como para video. Dentro de la etiqueta source indicamos la ruta a diferentes archivos. El navegador intentará reproducir el archivo indicado en la primera etiqueta, si no lo consigue pasará a la segunda, y así sucesivamente hasta que consiga reproducir alguno de ellos.

Multimedia en los principales navegadores

Hemos probado cual es el resultado de incorporar distintos archivos de audio y video en los navegadores más habituales mediante las nuevas etiquetas de audio y video; y a día de hoy (octubre 2011) el resultado ha sido el siguiente:

Formatos de audio y video que se han probado:

  • audio: -.wav -.mp3 -.mid -ogg. -.vma -.acc
  • video: -.mov -.avi -.vmn -.swf -.mpg -.ogv

El resultado para los distintos navegadores ha sido el siguiente:

  • Mozilla Firefox: audio -.ogg ; video -.ogv
  • Opera: audio -.wav , -.ogg ; video -.ogv
  • Safari: audio ninguno ; video ninguno
  • Chrome: audio -wav , -.mp3 , -.ogg ; video -.ogv
  • Inrernet Explorer: audio ninguno ; video ninguno

La etiqueta object

HTML 5 mantiene la etiqueta object para reproducir archivos multimedia, pero además tiene también otra función interesante, que es sustituir a la etiqueta iframe para incrustar una página o archivo dentro de otra.

la cosa es tan fácil como usar un código como el siguiente:

<object type="text/html" data="http://www.elpais.com/" width="400" height="300"> </object>

La clave está en poner el atributo type="text/html", el cual indica que abriremos la página indicada en el atributo data en una ventana dentro de la página. Los atributos width y height indican las dimensiones de la ventana en píxeles.






Seguimos con las novedades de HTML 5 en la siguiente página. Aparte de las ya vistas, hay nuevas etiquetas:

Otras etiquetas



Manual HTML5

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo