Elementos multimedia en HTML

Los elementos multimedia que ofrece HTML5 permiten añadir audio y vídeo a una web, e incluso acceder a la cámara del PC o de dispositivos móviles para grabar vídeos o hacer fotografías

Durante muchos años estos elementos fueron demandados por los desarrolladores, ya que únicamente era posible reproducir elementos multimedia mediante plugins o addons que debían estar previamente instalados en el navegador

A partir del estándar HTML5 fueron incluidos los elementos:

• video

  incrusta un vídeo en la página web

• audio

  incrusta un clip de audio en la página web

La única restricción es que sólo podemos referenciar un archivo (para lo que usaremos su atributo src)

Pero permite incluir más de un formato de codificación (para lo que usaremos elementos source)

La inclusión de los elementos source es debido a las incompatibilidades entre los formatos de codificación de audio o vídeo admitidos por cada navegador, ya que debido a las distintas licencias, todavía no hay un estándar claro para internet

Actualmente, los formatos de audio más compatibles con los navegadores son:

• WAV

  también conocido como WAVE es un formato de audio digital sin compresión de datos

  Fue desarrollado por Microsoft e IBM

• OGG

  es el contenedor utilizado por los codecs digitales con pérdida:

  • Opus

    es un formato de código abierto

    Está estandarizado por el Internet Engineering Task Force (IETF)

  • Vorbis

    es un formato de código abierto

    Fue desarrollado por Xiph.org

• MP3

  formato de compresión de audio digital

  Fue desarrollado por Moving Picture Experts Group (MPEG)

• AAC

  también conocido como Advanced Audio Coding es un codec digital con perdida

  Sigue el estándar internacional ISO/IEC 13818-7 como una extensión del MPEG-2

  Es muy utilizado en dispositivos Apple

Mientras que para vídeo:

• MP4

  archivos con el formato MPEG 4 con el codec de vídeo H264 y el codec de audio AAC

• WebM

  archivos con el formato WebM con el codec de vídeo VP8 y el codec de audio Vorbis

• Ogg

  archivos con el formato Ogg con el codec de vídeo Theora y el codec de audio Vorbis

Audio

<audio controls>
    <source src='Amaral - Hacia lo salvaje.wav' type='audio/wav'>
    <source src='Amaral - Hacia lo salvaje.ogg' type='audio/ogg'>
    <source src='Amaral - Hacia lo salvaje.mp3' type='audio/mp3'>
    <source src='Amaral - Hacia lo salvaje.aac' type='audio/aac'>
    Tu navegador no soporta el formato de audio utilizado por esta canción
</audio>

En el ejemplo se ha referenciado la canción del grupo Amaral, Hacia lo salvaje, para ello se han utilizado cuatro elementos source

Se le ha indicado al navegador mediante el atributo src dónde puede localizar el archivo y su extensión y con el atributo type se le ha indicado qué tipo de archivo debe reproducir

En el ejemplo sólo se ha referenciado los tipos WAV, OGG, MP3 y AAC, pero podrían referenciarse varios archivos del mismo tipo pero con distintas calidades de audio

Dentro del elemento audio se ha incluido también un texto que será usado por defecto en el caso de que nuestro navegador no soporte ninguno de los tipos de audio indicados en los elementos source

En el ejemplo se ha utilizado el atributo controls, que es un atributo genérico que comparte con video

Entre los atributos más destacados para los elementos audio y vídeo tenemos:

• autoplay

  la reproducción comienza en el mismo momento de la carga de la página

• controls

  se añaden los controles de reproducción para que el usuario pueda controlarla

• loop

  el archivo se reproduce de forma continua, es decir, cuando acaba la reproducción, se inicia de nuevo desde el principio

Vídeo

<video controls autoplay>
    <source src='Joker.ogg' type='video/ogg'>
    <source src='Joker.mp4' type='video/mp4'>
    <source src="Joker.webm" type="video/webm">
    <object data="Joker.swf" type="application/x-shockwave-flash">
        <param value="Joker.swf" name="movie"/>
    </object>
    Tu navegador no soporta el formato de vídeo utilizado por esta película
</video>

El ejemplo para el elemento video es muy similar al visto anteriormente para el elemento audio con la excepción de que se ha incluido un elemento object

Este elemento permite que navegadores que no soportan HTML5 puedan reproducir un archivo mediante el plugin de flash

Esta opción puede ser útil con navegadores antiguos que aún usen versiones anteriores de HTML

Aunque Google ha decidido eliminar el soporte para flash en su navegador Chrome, para fomentar el uso las nuevas capacidades para vídeo de HTML5

En Chrome sólo se puede usar flash bajo demanda, indicándolo explícitamente en su configuración y para las páginas web que el usuario de permiso