Explicación

13.1 Trabajando con audio

Con HTML5 ahora tenemos muchas más opciones para el contenido integrado, incluido el audio nativo a través del nuevo elemento de audio (consulta http://dev.w3.org/html5/markup/audio.html).

¿Nativo? Sí. Eso significa que ya no es necesario que entregues audio con un complemento de terceros y, como tal, ya no tendrás problemas de diseño con diseños dinámicos o menús desplegables.

Con el audio en nuestro arsenal, no sólo podemos entregar archivos de audio directamente a través del navegador, sino que podemos diseñar y manipular el elemento y sus atributos a través de CSS3 y JavaScript.

Agregar audio HTML5

Supón que deseas reproducir audio nativo en tu página Web.

Agrega el elemento de audio con el atributo “src” haciendo referencia a la ubicación del archivo de audio y el contenido alternativo para los navegadores más antiguos.

También asegúrate de incluir el atributo de controles si deseas que los navegadores muestren una interfaz de control predeterminada para su audio:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> Omnimenu: bueno para el escritorio, bueno para el móvil </title>
    <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/3.7.3/build/cssreset/cssreset-min.css" data-noprefix>
    <link rel="stylesheet" type="text/css" href="styles/application.css">
    <script src="js/prefixfree.js"></script>
</head>
<body>
    <audio src="audio.ogg" controls>
        Bajar
        <a href="audio.ogg">Ejemplo de sonido</a>
    </audio>
</body>
</html>

Haz clic aquí para observar el resultado.

El ejemplo anterior puede ser ejecutado en Crome.

El archivo de audio en este ejemplo utiliza Ogg Vorbis (.ogg), que es un códec de fuente abierta libre de regalías (ver http://www.vorbis.com).

Hay muchos otros formatos de audio para la Web, que es uno de los mayores desafíos en la implementación de audio HTML5.

Códec

Un códec es una tecnología para comprimir y descomprimir datos. Los códecs de audio comprimen y/o descomprimen datos de audio digital en diferentes formatos que apuntan a mantener el nivel más alto de calidad con la tasa de bits mínima.

Algunos de los formatos más comunes son los siguientes:

Haz clic en cada elemento.

aac

El esquema de compresión con pérdida se desarrolló como una mejora sobre MP3, con tasas de bits similares pero una mejor calidad de sonido.

mp3

Formato patentado pero popular, que usa compresión con pérdida para lograr tamaños de archivo de una décima parte de los no comprimidos.

ogg

Una alternativa de código abierto a .mp3 que también usa un formato de compresión con pérdida.

wav

Formato propietario para audio que no utiliza ninguna compresión.

webm

El formato de medios abierto y libre de regalías de Google, que se basa en el códec de audio Vorbis para la compresión.

Integrando múltiples fuentes

En términos de qué elegir, la realidad es que si deseas que tu contenido llegue a la audiencia más amplia, debes codificar e incluir múltiples archivos de audio en tu audio HTML5.

Afortunadamente, HTML5 nos brinda una solución al permitir declarar múltiples archivos en el elemento de audio.

Cuando se utiliza el elemento fuente en audio, el atributo “src” se descarta.
“Src” sólo entra en juego si está haciendo referencia a un solo formato de audio.

En términos de mejores prácticas, se recomienda que incluya al menos el formato .ogg libre de regalías y los formatos .mp3 o .wav.

Ejemplo:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> Omnimenu: bueno para el escritorio, bueno para el móvil </title>
    <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/3.7.3/build/cssreset/cssreset-min.css" data-noprefix>
    <link rel="stylesheet" type="text/css" href="styles/application.css">
    <script src="js/prefixfree.js"></script>
</head>
<body>
    <audio controls>
        <source src="audio.ogg">
        <source src="audio.mp3">
        Bajar
        <a href="audio.ogg">Ejemplo de audio de multiples fuentes</a>
    </audio>
</body>
</html>

Haz clic aquí para observar el resultado.

El ejemplo anterior puede ser ejecutado en Crome o Internet explorer.

Precargar el audio

El audio tiene varios atributos que le permiten configurar su implementación de audio.

Para obtener una descripción completa de los atributos disponibles para los elementos multimedia HTML5, consulta el estándar WHATWG: https://html.spec.whatwg.org/multipage/media.html#media-element-attributes

El atributo de precarga te permite indicarle al navegador cuándo debería comenzar a almacenar en búfer el audio:

<audio controls preload>

Si bien la precarga actualmente tiene una compatibilidad limitada con el navegador, parece útil para optimizar el proceso de descarga. Simplemente puedes especificar la carga previa y dejarla en el navegador para decidir la acción adecuada, o puedes elegir entre tres valores de precarga definidos:

Haz clic en cada elemento.

preload="auto"

Es lo mismo que una precarga booleana y sugiere que el navegador comience a descargar el archivo, pero deja la acción final al navegador. Entonces, si se trata de una situación móvil o una conexión lenta, el navegador puede decidir no precargar para ahorrar ancho de banda.

preload="metadata"

Indicaciones de que el navegador no debe almacenar el audio hasta que el usuario active los controles, pero los metadatos como la duración y las pistas deberían estar precargados.

preload="none"

Sugiere que el audio descargue hasta que el usuario active los controles.

Creando contenido alternativo

Como viste en el primer ejemplo de este tema, el audio te permite incluir contenido alternativo.

Esto simplemente significa que si un usuario está en un navegador que no admite audio HTML5, en cambio, ve el contenido alternativo.

La especificación HTML5 dice que se deben ignorar todos los elementos secundarios de audio distintos de la fuente. Esto significa que su contenido alternativo para usuarios de navegadores antiguos no afectará adversamente a un usuario en un navegador compatible con HTML5.

O simplemente podría describir lo que contiene el archivo de audio (algunas sugerencias amables para actualizarlo a un nuevo navegador):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> Omnimenu: bueno para el escritorio, bueno para el móvil </title>
    <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/3.7.3/build/cssreset/cssreset-min.css" data-noprefix>
    <link rel="stylesheet" type="text/css" href="styles/application.css">
    <script src="js/prefixfree.js"></script>
</head>
<body>
      <audio controls>
        <source src="audio.ogg">
        <source src="audio.mp3">
        Su navegador no es compatible con audio HTML5. Deberías actualizar tu navegador. 
      </audio>
</body>
</html>

Haz clic aquí para observar el resultado.

Manipulando la secuencia de audio

Supón que deseas controlar y manipular cómo se reproduce tu audio HTML5 en el navegador.

Como parte de la especificación, el audio tiene algunos atributos que le dan un control simple e instantáneo de su reproducción: reproducción automática.

Haz clic en cada elemento.

Autoplay

Autoplay le dice al navegador que empiece a reproducir el audio tan pronto como se cargue la página.

Loop

Otro atributo autodescriptivo, “loop”, le dice al navegador que repita el audio cuando reproduce hacia adelante.

Pero ¿y si quieres más control de lo que estos atributos básicos proporcionan? Afortunadamente, el audio y el video tienen atributos, eventos y métodos que puedes manipular con JavaScript para crear controles personalizados, que incluyen:

Haz clic en cada elemento.

canplaytype (type)

Si el navegador puede reproducir un tipo particular de medios.

currentTime

La posición de reproducción actual denotada en segundos.

duration

La longitud del archivo de audio en segundos.

play();

Comience la reproducción en la posición actual.

pause();

Pausa la reproducción si el audio está reproduciendo activamente.

Por ejemplo, si deseas incluir controles que le permitan al usuario saltar a una hora específica en el archivo de audio, puedes agregar esta funcionalidad con un botón y una pizca de JavaScript para manipular el juego (); método basado en la propiedad de lectura/escritura currentTime:

Ejemplo:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> Omnimenu: bueno para el escritorio, bueno para el móvil </title>
    <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/3.7.3/build/cssreset/cssreset-min.css" data-noprefix>
    <link rel="stylesheet" type="text/css" href="styles/application.css">
    <script src="js/prefixfree.js"></script>
    <script>
        function playAt(seconds){
        var audio = document.getElementsByTagName("audio")[0];
        audio.currentTime = seconds;
        audio.play();
        }
        function stopAudio(){
        var audio = document.getElementsByTagName("audio")[0];
        audio.currentTime = 0;
        audio.pause();
        }
    </script>
</head>
<body>
    <audio>
        <source src="audio.ogg">
        <source src="audio.mp3">
    </audio>
    <button title="Play at 30 seconds" onclick="playAt(3);">3 seconds</button>
    <button title="Stop Audio" onclick="stopAudio();">Stop Audio</button> 
</body>
</html>

Haz clic aquí para observar el resultado.

13.2 Trabajando con video

Los nuevos elementos de contenido incrustado de HTML5 ofrecen a los diseñadores y desarrolladores más opciones para incluir medios en nuestros sitios.

Similar en naturaleza al audio, el elemento de video comparte muchos de los mismos atributos, tiene una sintaxis similar y se puede diseñar y manipular con CSS3 y JavaScript. Y al igual que el audio, el video tiene algunos desafíos de implementación.

Agregar video HTML5

Supón que deseas reproducir video nativo en tu página Web.

Utiliza el elemento de video con la adición de un atributo “src” que hace referencia a la ubicación de tu archivo de video:

<video src="video.ogv"></video>

Para mostrar los controles del reproductor de video, agrega el atributo de controles booleanos:

<video src="video.ogv" controls></video>
Ejemplo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> Omnimenu: bueno para el escritorio, bueno para el móvil </title>
    <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/3.7.3/build/cssreset/cssreset-min.css" data-noprefix>
    <link rel="stylesheet" type="text/css" href="styles/application.css">
    <script src="js/prefixfree.js"></script>
</head>
<body>
    <video src="video.ogv"></video>
    <video src="video2.ogv" controls></video>
</body>
</html>

Haz clic aquí para observar el resultado.

Precarga

El atributo de precarga te permite sugerir al navegador cómo debe descargar el video.

<video src="video.ogv" controls preload></controls>

Puedes omitir el atributo y dejar que el navegador decida o proporcione a los navegadores una "sugerencia" con valores específicos:

preload="auto" o, simplemente, preload
preload="metadata"
preload="none"

Contenido de respaldo

También debe hacer que sea una práctica estándar incluir contenido alternativo con video:

<video src="video.ogv" controls>
Tu dispositivo no soporta HTML5
 </video>

Códecs de video múltiples

Al igual que con el audio, la especificación HTML5 no indica qué códecs de video deben ser compatibles.

En cambio, los fabricantes de navegadores deciden qué formato admitir, lo cual está bien.

Sin embargo, conseguir proveedores de navegadores para acordar algo es casi imposible. Hacer que se pongan de acuerdo sobre qué formatos de video (y mucho menos un único formato de video) para apoyar será casi imposible.

Para solucionar esta situación, los videos deben codificarse y publicarse en múltiples formatos para poder mostrarlos en una amplia gama de navegadores.

Algunos de los formatos de video son los siguientes:

Haz clic en cada elemento.

.mp4

El formato de contenedor para el códec H.264 patentado que codifica video para una gama completa de dispositivos, incluida la alta definición.

ogv

El formato de contenedor de código abierto para el códec Theora de código abierto. Resultados en calidad inferior a H.264.

.webm

Otro formato de contenedor de fuente abierta que es utilizado por el nuevo códec VP8 libre de regalías de Google.

¿Por qué hay una situación complicada con los códecs de video? Un factor importante es la propiedad intelectual y las tarifas de licencia. Para usar ciertos formatos (y, por lo tanto, códecs) de forma nativa, los fabricantes de navegadores están sujetos a los derechos de propiedad intelectual de los códecs y formatos.

Para H.264, Apple y Microsoft han pagado las tarifas de licencia para permitir que el códec de video se reproduzca de forma nativa en sus respectivos navegadores.

Los proveedores que producen los navegadores Firefox y Opera, mientras tanto, optan por admitir formatos de código abierto gratuitos.

Soporte del navegador

Además de los desafíos de tratar con múltiples códecs y contenedores de formato, el video tiene soporte completo en todos los navegadores más recientes.

Garantizar el soporte de video multinavegador

Supón que deseas asegurarte de que tu video nativo se reproduzca en la más amplia gama de navegadores posible.

Usa el elemento hijo fuente del video para especificar cada uno de sus formatos de video:

<video controls>
	<source src="video.mp4" />
	<source src="video.ogv" />
	Your device does not support HTML5 video.
</video>

Establecer las dimensiones del video

Supón que deseas especificar el ancho y la altura del reproductor de video:

Agrega los atributos de ancho y alto y sus valores correspondientes, al video:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> Omnimenu: bueno para el escritorio, bueno para el móvil </title>
    <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/3.7.3/build/cssreset/cssreset-min.css" data-noprefix>
    <link rel="stylesheet" type="text/css" href="styles/application.css">
    <script src="js/prefixfree.js"></script>
</head>
<body>
    <video src="video.ogv"></video>
    <video src="video2.ogv" controls="controls" width="200" height="200">
    </video>
</body>
</html>

Haz clic aquí para observar el resultado.

Mostrar una imagen de marcador de posición antes de que se reproduzca video

Supón que deseas mostrar un fotograma fijo o una imagen de póster antes de que el usuario inicie el video.

Agrega el atributo “poster” con la ruta del archivo de imagen de marcador de posición como valor:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> Omnimenu: bueno para el escritorio, bueno para el móvil </title>
    <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/3.7.3/build/cssreset/cssreset-min.css" data-noprefix>
    <link rel="stylesheet" type="text/css" href="styles/application.css">
    <script src="js/prefixfree.js"></script>
</head>
<body>
    <video src="video.ogv"></video>
    <video src="video2.ogv" controls="controls" width="200" height="200" poster="video_still.png">
    </video>
</body>
</html>

Haz clic aquí para observar el resultado.

Hacer video loop

Supón que deseas que tu reproducción de video se repita automáticamente.

Agrega el atributo booleano de bucle al video:

Ejemplo:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> Omnimenu: bueno para el escritorio, bueno para el móvil </title>
    <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/3.7.3/build/cssreset/cssreset-min.css" data-noprefix>
    <link rel="stylesheet" type="text/css" href="styles/application.css">
    <script src="js/prefixfree.js"></script>
</head>
<body>
    <video src="video2.ogv" controls="controls" width="200" height="200"  loop="loop">
    </video>
</body>
</html>

Haz clic aquí para observar el resultado.

Autorreproducción

Otro atributo de video que debes considerar juiciosamente antes de implementar es la reproducción automática de Boolean. Al igual que con el audio, la reproducción automática comienza a reproducir el video tan pronto como se carga la página. Y, al igual que con el audio, puede ser una experiencia de usuario extremadamente desagradable.