Llámanos: 93 639 68 66

Reproducciones multimedia con HTML 5

Reproducciones multimedia con HTML 5

HTML5 introduce dos nuevas etiquetas "<audio>" y "<video>" para insertar contenido multimedia en los documentos HTML.

Para insertar el contenido con estas etiquetas, solo es necesario colocar las etiquetas "<audio></audio>" y "<video></video>"  donde deseamos que aparezca el archivo en nuestra web, incluir un src=para la ruta del archivo que queramos reproducir y ya veremos en nuestra web el reproductor con nuestro archivo (ya sea video o audio, según el hayamos escogido).

Dentro de estas etiquetas, podemos añadir funciones que se añadirán a los reproductores, por ejemplo:

  • controls: muestra los controles estándar de cada reproductor.
  • autoplay: hace que el audio o el video se reproduzca automáticamente cuando se carga la página.
  • loop: hace que el audio o el video se repita una vez tras otra.
  • preload: este atributo es para especificar si queremos que se almacene temporalmente el archivo. Tenemos tres valores: none, auto y metadata. El primero es para decirle que no se almacene, el segundo para que si se almacene y el ultimo almacena solo los metadatos del archivo temporalmente.

También tenemos una etiqueta "<source>" que se debe incluir entre las etiquetas de abrir y cerrar el elemento (en el caso del video iría "<video> <source> </video>"). Esta etiqueta nos da la opción de proporcionar archivos codificados en distintos formatos por los diferentes navegadores. Simplemente tenemos que poner dentro del source el atributo src para dale la ruta de cada archivo y un atributo type con el formato del archivo para que el navegador consulto si lo acepta. Podemos repetirlo tantas veces como archivos queramos introducir.

Tener en cuenta que es importante el orden en que se colocan. El navegador intentara reproducir el primero que encuentre, si no admite el formato, intentara reproducir el segundo y así hasta que encuentre uno que si acepte. Si aun así no acepta ninguno de los formato que tenemos cargado, podemos incluir debajo del ultimo source un mensaje como Tu navegador no acepta el archivo, y el navegador mostrar el mensaje.

A continuación os dejamos una tabla con la compatibilidad de los formatos en cada navegador:

Navegador

MP3

ORG

Wav

Internet Explorer 9+

Si

No

No

Chrome 6+

Si

Si

Si

Firefox 3.6+

No

Si

Si

Safari 5+

Si

No

Si

Opera 10+

No

Si

Si

Autor:

Accede a nuestra sección de proyectos a medida en Diseño Web Barcelona

Comparte este artículo en tus redes sociales