5- Video y audio
Reproduciendo video con HTML5
Una de las características más mencionadas de HTML5 fue la capacidad de procesar video.
El entusiasmo nada tenía que ver con las nuevas herramientas provistas por HTML5 para
este propósito, sino más bien con el hecho de que desde los videos se volvieron una pieza
esencial de Internet, todos esperaban soporte nativo por parte de los navegadores. Era
como que todos conocían la importancia de los videos excepto aquellos encargados de
desarrollar las tecnologías para la web.
Pero ahora que ya disponemos de soporte nativo para videos e incluso un estándar
que nos permitirá crear aplicaciones de procesamiento de video compatibles con
múltiples navegadores, podemos comprender que la situación era mucho más complicada
de lo que nos habíamos imaginado. Desde codificadores hasta consumo de recursos, las
razones para no implementar video de forma nativa en los navegadores eran mucho más
complejas que los códigos necesarios para hacerlo.
A pesar de estas complicaciones, HTML5 finalmente introdujo un elemento para
insertar y reproducir video en un documento HTML. El elemento <video> usa etiquetas
de apertura y cierre y solo unos pocos parámetros para lograr su función. La sintaxis es
extremadamente sencilla y solo el atributo src es obligatorio:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
</head>
<body>
<section id="reproductor">
<video src=”https://minkbooks.com/content/trailer.mp4” controls>
</video>
</section>
</body>
</html>
Sintaxis básica para el elemento <video>.
En teoría, el código del Listado 5-1 debería ser más que suficiente. Repito, en teoría.
Pero como explicamos anteriormente, las cosas se vuelven un poco más complicadas en la
vida real. Primero debemos proveer al menos dos archivos diferentes con formatos de
video diferentes: OGG y MP4. Esto es debido a que a pesar de que el elemento <video> y
sus atributos son estándar, no existe un formato estándar de video. Primero, algunos
navegadores soportan un codificador de video que otros no, y segundo el codificador
utilizado en el formato MP4 (el único soportado por importantes navegadores como Safari
e Internet Explorer) se encuentra bajo licencia comercial.
Los formatos OGG y MP4 son contenedores de video y audio. OGG contiene
codificadores de video Theora y de audio Vorbis, y los disponibles para el contenedor MP4
son H.264 para video y AAC para audio. En este momento OGG es reconocido por Firefox,
Google Chrome y Opera, mientras que MP4 trabaja en Safari, Internet Explorer y también
Google Chrome.
El elemento <video>
Intentemos ignorar por un momento estas complicaciones y disfrutar de la simplicidad del
elemento <video>. Este elemento ofrece varios atributos para establecer su
comportamiento y configuración. Los atributos width y height, al igual que en otros
elementos HTML ya conocidos, declaran las dimensiones para el elemento o ventana del
reproductor. El tamaño del video será automáticamente ajustado para entrar dentro de
estos valores, pero no fueron considerados para redimensionar el video sino limitar el
área ocupada por el mismo para mantener consistencia en el diseño. El atributo src
especifica la fuente del video. Este atributo puede ser reemplazado por el elemento
<source> y su propio atributo src para declarar varias fuentes con diferentes formatos,
como en el siguiente ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
</head>
<body>
<section id="reproductor">
<video id="medio" width="720" height="400" controls>
<source src="https://minkbooks.com/content/trailer.mp4">
<source src="https://minkbooks.com/content/trailer.ogg">
</video>
</section>
</body>
</html>
Reproductor de video con controles por defecto y compatible con navegadores HTML5.
En el Listado 5-2, el elemento <video> fue expandido. Ahora, dentro de las etiquetas
del elemento hay dos elementos <source>. Estos nuevos elementos proveen diferentes
fuentes de video para que los navegadores puedan elegir. El navegador leerá la etiqueta
<source> y decidirá cual archivo reproducir de acuerdo a los formatos soportados (MP4
u OGG).
Hágalo usted mismo: Cree un nuevo archivo HTML vacío con el nombre video.html
(o cualquier otro nombre que desee), copie el código del Listado 5-2, y abra el archivo
en diferentes navegadores para comprobar el modo en que el elemento <video>
trabaja en cada uno de ellos.
Atributos para <video>
Incluimos un atributo en la etiqueta <video> en los Listados 5-1 y 5-2 que probablemente
llamó su atención. El atributo controls es uno de varios atributos disponibles para este
elemento. Éste, en particular, muestra controles de video provistos por el navegador por
defecto. Cuando el atributo está presente cada navegador activará su propia interface,
permitiendo al usuario comenzar a reproducir el video, pausarlo o saltar hacia un cuadro
específico, entre otras funciones.
Junto con controls, también podemos usar los siguientes:
autoplay Cuando este atributo está presente, el navegador comenzará a reproducir el
video automáticamente tan pronto como pueda.
loop Si este atributo es especificado, el navegador comenzará a reproducir el video
nuevamente cuando llega al final.
poster Este atributo es utilizado para proveer una imagen que será mostrada mientras
esperamos que el video comience a ser reproducido.
preload Este atributo puede recibir tres valores distintos: none, metadata o auto. El
primero indica que el video no debería ser cacheado, por lo general con el propósito
de minimizar tráfico innecesario. El segundo valor, metadata, recomendará al
navegador que trate de capturar información acerca de la fuente (por ejemplo,
dimensiones, duración, primer cuadro, etc…). El tercer valor, auto, es el valor
configurado por defecto que le sugerirá al navegador descargar el archivo tan pronto
como sea posible.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
</head>
<body>
<section id="reproductor">
<video id="medio" width="720" height="400" preload controls
loop poster="https://minkbooks.com/content/poster.jpg">
<source src="https://minkbooks.com/content/trailer.mp4">
<source src="https://minkbooks.com/content/trailer.ogg">
</video>
</section>
</body>
</html>
Aprovechando los atributos del elemento <video>.
En el Listado 5-3, el elemento <video> fue poblado con atributos. Debido a las
diferencias en comportamiento entre un navegador y otro, algunos atributos estarán
habilitados o deshabilitados por defecto, y algunos de ellos incluso no trabajarán en
algunos navegadores o bajo determinadas circunstancias. Para obtener un control
absoluto sobre el elemento <video> y el medio reproducido, deberemos programar
nuestro propio reproductor de video en Javascript aprovechando los nuevos métodos,
propiedades y eventos incorporados en HTML5.
Programando un reproductor de video
Si ha probado los anteriores códigos en diferentes navegadores, seguramente habrá
notado que los diseños gráficos de los controles del reproductor difieren de uno a otro.
Cada navegador tiene sus propios botones y barras de progreso, e incluso sus propias
funciones. Esta situación puede ser aceptable en algunas circunstancias pero en un
ambiente profesional, donde cada detalle cuenta, resulta absolutamente necesario que un
diseño consistente sea preservado a través de dispositivos y aplicaciones, y también
disponer de un control absoluto sobre todo el proceso.
HTML5 proporciona nuevos eventos, propiedades y métodos para manipular video e
integrarlo al documento. De ahora en más, podremos crear nuestro propio reproductor de
video y ofrecer las funciones que queremos usando HTML, CSS y Javascript. El video es
ahora parte integral del documento.
El diseño
Todo reproductor de video necesita un panel de control con al menos algunas funciones
básicas. En la nueva plantilla del Listado 5-4, un elemento <nav> fue agregado luego de
<video>. Este elemento <nav> contiene dos elementos <div> (botones y barra) para
ofrecer un botón “Reproducir” y una barra de progreso.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<video id="medio" width="720" height="400">
<source src="https://minkbooks.com/content/trailer.mp4">
<source src="https://minkbooks.com/content/trailer.ogg">
</video>
<nav>
<div id="botones">
<button type="button" id="reproducir">Reproducir</button>
</div>
<div id="barra">
<div id="progreso"></div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
Plantilla HTML para nuestro reproductor de video.
Además del video, esta plantilla también incluye dos archivos para acceder a códigos
externos. Uno de ellos es player.css para los siguientes estilos CSS:
body{
text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption,
hgroup{
display : block;
}
#reproductor{
width: 720px;
margin: 20px auto;
padding: 5px;
background: #999999;
border: 1px solid #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
nav{
margin: 5px 0px;
}
#botones{
float: left;
width: 100px;
height: 20px;
}
#barra{
position: relative;
float: left;
width: 600px;
height: 16px;
padding: 2px;
border: 1px solid #CCCCCC;
background: #EEEEEE;
}
#progreso{
position: absolute;
width: 0px;
height: 16px;
background: rgba(0,0,150,.2);
}
Estilos CSS para el reproductor.
El código del Listado 5-5 usa técnicas del Modelo de Caja Tradicional estudiado en el
Capítulo 2 para crear la caja que contiene cada pieza del reproductor de video y ubicarla en
el centro de la ventana. No hay nuevas propiedades o sorpresas en este código, es solo un
grupo de propiedades CSS ya estudiadas y conocidas para proveer estilos a los elementos del
reproductor. Sin embargo, existen dos propiedades que pueden resultar inusuales. La
propiedad position, conocida por viejos programadores CSS, fue usada para superponer
un elemento sobre otro (barra y progreso). Y la propiedad width, para el elemento
<div> identificado como progreso, fue inicializada en 0. Esto se debe a que el elemento
será utilizado para simular una barra de progreso que cambiará de tamaño a medida que el
video es reproducido, y que, por supuesto, comenzará a crecer desde 0.
Hágalo usted mismo: Copie la nueva plantilla del Listado 5-4 en el archivo HTML
(video.html). Cree dos nuevos archivos vacíos para los estilos CSS y el código
Javascript. Estos archivos deberían ser llamados reproductor.css y
reproductor.js respectivamente. Copie el código del Listado 5-5 dentro del
archivo correspondiente y luego haga lo mismo para cada código Javascript listado de
ahora en adelante.
El código
Es momento de escribir el código Javascript para nuestro reproductor. Existen diferentes
formas de programar un reproductor de video, pero en este capítulo vamos solo a explicar
cómo aplicar los necesarios eventos, métodos y propiedades para procesamiento básico
de video. El resto quedará librado a su imaginación.
Para nuestro propósito, vamos a trabajar con unas pocas funciones simples que nos
permitirán reproducir y pausar el video, mostrar una barra de progreso mientras el video
es reproducido y ofrecer la opción de hacer clic sobre esta barra para adelantar o
retroceder el video.
Los eventos
HTML5 incorpora nuevos eventos que son específicos de cada API. Para el procesamiento
de video y audio, por ejemplo, los eventos fueron incorporados con el objetivo de
informar sobre la situación del medio (el progreso de la descarga, si la reproducción del
medio finalizó, o si la reproducción del medio es comenzada o pausada, entre otras). No
vamos a utilizarlos en nuestros ejemplos pero serán necesarios para construir aplicaciones
complejas. Estos son los más relevantes:
progress Este evento es disparado periódicamente para informar acerca del progreso de la
descarga del medio. La información estará disponible a través del atributo buffered,
como veremos más adelante.
canplaythrough Este evento es disparado cuando el medio completo puede ser reproducido
sin interrupción. El estado es establecido considerando la actual tasa de descarga y
asumiendo que seguirá siendo la misma durante el resto del proceso. Existe otro evento
más para este propósito, canplay, pero no considera toda la situación y es disparado
tan pronto como algunas partes del medio se encuentran disponibles (luego de
descargar los primeros cuadros de un video, por ejemplo).
ended Es disparado cuando el reproductor llega al final del medio.
pause Es disparado cuando el reproductor es pausado.
play Es disparado cuando el medio comienza a ser reproducido.
error Este evento es disparado cuando ocurre un error. Es relacionado con el elemento
<source> correspondiente a la fuente del medio que produjo el error.
Para nuestro reproductor de ejemplo solo vamos a escuchar a los habituales eventos
click y load.
IMPORTANTE: Eventos, métodos y propiedades para APIs están aún en proceso de
desarrollo. En este libro vamos a estudiar solo aquellos que consideramos
relevantes e indispensables para nuestros ejemplos. Para ver cómo la
especificación está progresando con respecto a esto, visite nuestro sitio web y siga
los enlaces correspondientes a cada capítulo.
function iniciar() {
maximo=600;
medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');
reproducir.addEventListener('click', presionar, false);
barra.addEventListener('click', mover, false);
}
Función inicial.
El Listado 5-6 presenta la primera función de nuestro reproductor de video. La función
fue llamada iniciar debido a que será la función que iniciará la ejecución de la
aplicación tan pronto como el documento sea completamente cargado.
Debido a que esta es la primera función a ser ejecutada, necesitamos definir unas
variables globales para configurar nuestro reproductor. Usando el selector
getElementById creamos una referencia a cada uno de los elementos del reproductor
para poder acceder a ellos en el resto del código más adelante. También declaramos la
variable maximo para conocer siempre el máximo tamaño posible para la barra de
progreso (600 pixeles).
Hay dos acciones a las que tenemos que prestar atención desde el código: cuando el
usuario hace clic sobre el botón “Reproducir” y cuando hace clic sobre la barra de
progreso para avanzar o retroceder el video. Dos escuchas para el evento click fueron
agregadas con el propósito de controlar estas situaciones. Primero agregamos la escucha
al elemento reproducir que ejecutará la función presionar() cada vez que el usuario
haga clic sobre el botón “Reproducir”. La otra escucha es para el elemento barra. En este
caso, la función mover() será ejecutada cada vez que el usuario haga clic sobre la barra
de progreso.
Los métodos
La función presionar() incorporada en el Listado 5-7 es la primera función que realmente
realiza una tarea. Esta función ejecutará de acuerdo a la situación actual dos métodos
específicos de esta API: play()y pause():
function presionar(){
if(!medio.paused && !medio.ended) {
medio.pause();
reproducir.innerHTML='Reproducir';
window.clearInterval(bucle);
}else{
medio.play();
reproducir.innerHTML='Pausa';
bucle=setInterval(estado, 1000);
}
}
Esta función inicia y pausa la reproducción del video.
Los métodos play() y pause() son parte de una lista de métodos incorporados por
HTML5 para procesamiento de medios. Los siguientes son los más relevantes:
play() Este método comienza a reproducir el medio desde el inicio, a menos que el medio
haya sido pausado previamente.
pause()Este método pausa la reproducción.
load()Este método carga el archivo del medio. Es útil en aplicaciones dinámicas para
cargar el medio anticipadamente.
canPlayType(formato) Con este método podemos saber si el formato del archivo es soportado
por el navegador o no.
Las propiedades
La función presionar() también usa unas pocas propiedades para recabar información
sobre el medio. Las siguientes son las más relevantes:
paused Esta propiedad retorna true (verdadero) si la reproducción del medio está
actualmente pausada o no a comenzado.
ended Esta propiedad retorna true (verdadero) si la reproducción del medio ha finalizado
porque se llegó al final.
duration Esta propiedad retorna la duración del medio en segundos.
currentTime Esta es una propiedad que puede retornar o recibir un valor para informar
sobre la posición en la cual el medio está siendo reproducido o especifica una nueva
posición donde continuar reproduciendo.
error Esta propiedad retorna el valor del error ocurrido.
buffered Esta propiedad ofrece información sobre la parte del archivo que ya fue cargada
en el buffer. Nos permite crear un indicador para mostrar el progreso de la descarga.
La propiedad es usualmente leída cuando el evento progress es disparado. Debido a
que los usuarios pueden forzar al navegador a cargar el medio desde diferentes
posiciones en la línea de tiempo, la información retornada por buffered es un array
conteniendo cada parte del medio que ya fue descargada, no solo la que comienza
desde el principio. Los elementos del array son accesibles por medio de los atributos
end() y start(). Por ejemplo, el código buffered.end(0) retornará la duración en
segundos de la primera porción del medio encontrada en el buffer. Esta propiedad y
sus atributos están bajo desarrollo en este momento.
El código en operación
Ahora que ya conocemos todos los elementos involucrados en el procesamiento de video,
echemos un vistazo a cómo trabaja la función presionar().
Esta función es ejecutada cuando el usuario presiona el botón “Reproducir” en nuestro
reproductor. Este botón tendrá dos propósitos: mostrará el mensaje “Reproducir” para
reproducir el video o “Pausa” para detenerlo, de acuerdo a las circunstancias. Por lo tanto,
cuando el video fue pausado o no comenzó, presionar este botón comenzará o continuará
la reproducción. Lo opuesto ocurrirá si el video está siendo reproducido, entonces
presionar el botón pausará el video.
Para lograr esto el código detecta la situación del medio comprobando el valor de las
propiedades paused y ended. En la primera línea de la función tenemos un condicional
if para este propósito. Si el valor de medio.paused y medio.ended es falso, significará
que el video está siendo reproducido, entonces el método pause() es ejecutado para
pausar el video y el texto del botón es cambiado a “Reproducir” usando innerHTML.
Si lo opuesto ocurre, el video fue pausado previamente o terminó de ser reproducido,
entonces la condición será falsa (medio.paused o medio.ended es verdadero) y el método
play() es ejecutado para comenzar o restaurar la reproducción del video. En este caso
también realizamos una importante acción que es configurar un intervalo usando
setInterval() para ejecutar la función estado() una vez por segundo de ahora en más.
function estado(){
if(!medio.ended){
var total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else{
progreso.style.width='0px';
reproducir.innerHTML='Reproducir';
window.clearInterval(bucle);
}
}
Esta función actualiza la barra de progreso una vez por segundo.
La función estado() en el Listado 5-8 es ejecutada cada segundo mientras el video es
reproducido. También utilizamos un condicional if en esta función para controlar el
estado del video. Si la propiedad ended retorna falso, calculamos qué tan larga la barra de
progreso debe ser en pixeles y asignamos el valor al elemento <div> que la representa.
En caso de que la propiedad sea verdadera (lo cual significa que la reproducción del video
ha terminado), retornamos el valor de la barra de progreso a 0 pixeles, cambiamos el
botón a “Reproducir”, y cancelamos el intervalo usando clearInterval. En este caso la
función estado() no será ejecutada nunca más.
Volvamos unos pasos para estudiar cómo calculamos el tamaño de la barra de progreso.
Debido a que la función estado() será ejecutada cada segundo mientras el video se está
reproduciendo, el valor del tiempo en el que el video se encuentra cambiará constantemente.
Este valor en segundos es obtenido de la propiedad currentTime. También contamos con el
valor de la duración del video en la propiedad duration, y el máximo tamaño de la barra de
progreso en la variable maximo que definimos al principio. Con estos tres valores podemos
calcular cuántos pixeles de largo la barra debería ser para representar los segundos ya
reproducidos. La fórmula tiempo actual × maximo / duración total transformará los
segundos en pixeles para cambiar el tamaño del elemento <div> que representa la barra de
progreso.
La función para responder al evento click del elemento reproducir (el botón) ya
fue creada. Ahora es tiempo de hacer lo mismo para responder a los clics hechos sobre la
barra de progreso:
function mover(e){
if(!medio.paused && !medio.ended){
var ratonX=e.pageX-barra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}
Comenzar a reproducir desde la posición seleccionada por el usuario.
Una escucha para el evento click fue agregada al elemento barra para responder
cada vez que el usuario quiera comenzar a reproducir el video desde una nueva posición.
La escucha usa la función mover() para responder al evento cuando es disparado. Puede
ver esta función en el Listado 5-9. Comienza con un if, al igual que las anteriores
funciones, pero esta vez el objetivo es controlar que la acción se realice sólo cuando el
video está siendo reproducido. Si las propiedades paused y ended son falsas significa que
el video está siendo reproducido y el código tiene que ser ejecutado.
Debemos hacer varias cosas para calcular el tiempo en el cual el video debería
comenzar a ser reproducido. Necesitamos determinar cuál era la posición del ratón
cuando el clic sobre la barra fue realizado, cuál es la distancia en pixeles desde esa
posición hasta el comienzo de la barra de progreso y cuantos segundos esa distancia
representa en la línea de tiempo.
Los procesos para agregar una escucha (o registrar un evento), tales como
addEventListener(), siempre envían un valor que hacer referencia al evento. Esta
referencia es enviada como un atributo a la función que responde al evento.
Tradicionalmente la variable e es usada para almacenar este valor. En la función del Listado
5-9 usamos esta variable y la propiedad pageX para capturar la posición exacta del puntero
del ratón al momento en el que el clic fue realizado. El valor retornado por pageX es relativo
a la página, no a la barra de progreso o la ventana. Para saber cuántos pixeles hay desde el
comienzo de la barra de progreso y la posición del puntero, tenemos que substraer el
espacio entre el lado izquierdo de la página y el comienzo de la barra. Recuerde que la barra
está localizada en una caja que se encuentra centrada en la ventana. Los valores dependerán
de cada situación en particular, por lo tanto supongamos que la barra está localizada a 421
pixeles del lado izquierdo de la página web y el clic fue realizado en el medio de la barra.
Debido a que la barra tiene una longitud de 600 pixeles, el clic fue hecho a 300 pixeles desde
el comienzo de la barra. Sin embargo, la propiedad pageX no retornará el valor 300, sino
721. Para obtener la posición exacta en la barra donde el clic ocurrió, debemos substraer de
pageX la distancia desde el lado izquierdo de la página hasta el comienzo de la barra (en
nuestro ejemplo, 421 pixeles). Esta distancia puede ser obtenida mediante la propiedad
offsetLeft. Entonces, usando la formula e.pageX - barra.offsetLeft conseguimos
exactamente la posición del puntero del ratón relativa al comienzo de la barra. En nuestro
ejemplo, la fórmula en números sería: 721 – 421 = 300.
Una vez obtenido este valor, debemos convertirlo a segundos. Usando la propiedad
duration, la posición exacta del puntero del ratón en la barra y el tamaño máximo de la
barra construimos la fórmula ratonX × video.duration / maximo y almacenamos el
resultado dentro de la variable nuevoTiempo. Este resultado es el tiempo en segundos
que la posición del puntero del ratón representa en la línea de tiempo.
El siguiente paso es comenzar a reproducir el video desde la nueva posición. La
propiedad currentTime, como ya mencionamos, retorna la posición actual del video en
segundos pero también avanza o retrocede el video a un tiempo específico si un nuevo
valor le es asignado. Con el código medio.currentTime=nuevoTiempo movemos el
video a la posición deseada.
Lo único que resta por hacer es cambiar el tamaño del elemento progreso para reflejar
en pantalla la nueva situación. Utilizando el valor de la variable ratonX cambiamos el
tamaño del elemento para alcanzar exactamente la posición done el clic fue hecho.
El código para nuestro reproductor de video ya está casi listo. Tenemos todos los
eventos, métodos, propiedades y funciones que nuestra aplicación necesita. Solo hay una
cosa más que debemos hacer, un evento más que debemos escuchar para poner nuestro
código en marcha:
window.addEventListener('load', iniciar, false);
Escuchando al evento load.
Podríamos haber usado la técnica window.onload para registrar el manejador del
evento, y de hecho hubiese sido la mejor opción para hacer nuestros códigos compatibles
con viejos navegadores. Sin embargo, debido a que este libro es acerca de HTML5,
decidimos usar el nuevo estándar addEventListener().
Hágalo usted mismo: Copie todos los códigos Javascript desde el Listado 5-6 dentro
del archivo reproductor.js. Abra el archivo video.html con la plantilla del
Listado 5-4 en su navegador y haga clic en el botón “Reproducir”. Intente utilizar la
aplicación desde diferentes navegadores.
Formatos de video
Por el momento no existe un estándar para formatos de video y audio en la web. Existen
varios contenedores y diferentes codificadores disponibles, pero ninguno fue totalmente
adoptado y no hay consenso alguno de parte de los fabricantes de navegadores para
lograr un estándar en el futuro cercano.
Los contenedores más comunes son OGG, MP4, FLV y el nuevo propuesto por Google,
WEBM. Normalmente estos contenedores contienen video codificado con los
codificadores Theora, H.264, VP6 o VP8, respectivamente. Esta es la lista de los más
usados:
• OGG codificador de video Theora y audio Vorbis.
• MP4 codificador de video H.264 y audio AAC.
• FLV codificador de video VP6 y audio MP3. También soporta H.264 y AAC.
• WEBM codificador de video VP8 y audio Vorbis.
Los codificadores utilizados para OGG y WEBM son gratuitos, pero los utilizados para
MP4 y FLV están patentados, lo que significa que si queremos usar MP4 o FLV para
nuestras aplicaciones deberemos pagar. Algunas restricciones son anuladas para
aplicaciones gratuitas.
El tema es que en este momento Safari e Internet Explorer no soportan la tecnología
gratuita. Ambos solo trabajan con MP4 y solo Internet Explorer anunció la inclusión del
codificador VP8 en el futuro. Esta es la lista de los navegadores más populares:
• Firefox codificador de video Theora y audio Vorbis.
• Google Chrome codificador de video Theora y audio Vorbis. También soporta
codificador de video H.264 y audio AAC.
• Opera codificador de video Theora y audio Vorbis.
• Safari codificador de video H.264 y audio AAC.
• Internet Explorer codificador de video H.264 y audio AAC.
Un mayor soporte para el formato WEBM en el futuro podría mejorar la situación,
pero probablemente no habrá un formato estándar por al menos los próximos dos o tres
años y tendremos que considerar diferentes alternativas de acuerdo a la naturaleza de
nuestra aplicación y nuestro negocio.
Reproduciendo audio con HTML5
Audio no es un medio tan popular como video en Internet. Podemos filmar un video con
una cámara personal que generará millones de vistas en sitios web como
www.youtube.com, pero crear un archivo de audio que obtenga el mismo resultado es
prácticamente imposible. Sin Embargo, el audio se encuentra aún disponible, ganando su
propio mercado en shows de radio y podcasts en toda la red.
HTML5 provee un nuevo elemento para reproducir audio en un documento HTML. El
elemento, por supuesto, es <audio> y comparte casi las mismas características del
elemento <video>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
</head>
<body>
<section id="reproductor">
<audio src=”https://minkbooks.com/content/beach.mp3” controls>
</audio>
</section>
</body>
</html>
El elemento <audio>
El elemento <audio> trabaja del mismo modo y comparte varios atributos con el
elemento <video>:
src Este atributo especifica la URL del archivo a ser reproducido. Al igual que en el elemento
<video> normalmente será reemplazado por el elemento <source> para ofrecer
diferentes formatos de audio entre los que el navegador pueda elegir.
controls Este atributo activa la interface que cada navegador provee por defecto para
controlar la reproducción del audio.
autoplay Cuando este atributo está presente, el audio comenzará a reproducirse
automáticamente tan pronto como sea posible.
loop Si este atributo es especificado, el navegador reproducirá el audio una y otra vez de
forma automática.
preload Este atributo puede tomar tres valores diferentes: none, metadata o auto. El
primero indica que el audio no debería ser cacheado, normalmente con el propósito
de minimizar tráfico innecesario. El segundo valor, metadata, recomendará al
navegador obtener información sobre el medio (por ejemplo, la duración). El tercer
valor, auto, es el valor configurado por defecto y le aconseja al navegador descargar el
archivo tan pronto como sea posible.
Una vez más debemos hablar acerca de codificadores, y otra vez debemos decir que el
código en el Listado 5-11 debería ser más que suficiente para reproducir audio en nuestro
documento, pero no lo es. MP3 está bajo licencia comercial, por lo que no es soportado
por navegadores como Firefox u Opera. Vorbis (el codificador de audio del contenedor
OGG) es soportado por esos navegadores, pero no por Safari e Internet Explorer. Por esta
razón, nuevamente debemos aprovechar el elemento <source> para proveer al menos
dos formatos entre los cuales el navegador pueda elegir:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
</head>
<body>
<section id="reproductor">
<audio id="medio" controls>
<source src="https://minkbooks.com/content/beach.mp3">
<source src="https://minkbooks.com/content/beach.ogg">
</audio>
</section>
</body>
</html>
Dos fuentes para el mismo audio
El código en el Listado 5-12 reproducirá música en todos los navegadores utilizando los
controles por defecto. Aquellos que no puedan reproducir MP3 reproducirán OGG y
viceversa. Recuerde que MP3, al igual que MP4 para video, tienen uso restringido por
licencias comerciales, por lo que solo podemos usarlos en circunstancias especiales, de
acuerdo con lo determinado por cada licencia.
El soporte para los codificadores de audio libres y gratuitos (como Vorbis) se está
expandiendo, pero llevará tiempo transformar este formato desconocido en un estándar.
Programando un reproductor de audio
La API para medios fue desarrollada tanto para video como para audio. Cada evento,
método y propiedad incorporada para video funcionará también con audio. Debido a esto,
solo necesitamos reemplazar el elemento <video> por el elemento <audio> en nuestra
plantilla e instantáneamente obtenemos un reproductor de audio:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<audio id="medio">
<source src="https://minkbooks.com/content/beach.mp3">
<source src="https://minkbooks.com/content/beach.ogg">
</audio>
<nav>
<div id="botones">
<button type="button" id="reproducir">Reproducir</button>
</div>
<div id="barra">
<div id="progreso"></div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
Plantilla para el reproductor de audio.
En la nueva plantilla del listado 5-13, solo incorporamos un elemento <audio> y sus
fuentes correspondientes, dejando el resto del código intacto, incluyendo los archivos
externos. No necesitamos cambiar nada más, los eventos, métodos y propiedades son los
mismos para los dos medios (audio y video).
Hágalo usted mismo: Cree un nuevo archivo llamado audio.html, copie el
código del Listado 5-13 dentro de este archivo y ábralo en su navegador. Use los
mismos archivos reproductor.css y reproductor.js creados anteriormente
para hacer funcionar su reproductor de audio.
Referencia rápida
Video y audio son parte esencial de la web. HTML5 incorpora todos los elementos
necesarios para aprovechar estas herramientas y utilizarlas en nuestras aplicaciones web.
Elementos
HTML5 provee dos nuevos elementos HTML para procesar medios y una API específica
para acceder a la librería de medios.
<video> Este elemento nos permite insertar un archivo de video en un documento HTML.
<audio> Este elemento nos permite insertar un archivo de audio en un documento HTML.
Atributos
La especificación también provee atributos para los elementos <video> y <audio>:
src Este atributo declara la URL del medio a ser incluido en el documento. Puede usar el
elemento <source> para proveer más de una fuente y dejar que el navegador elija
cual reproducir.
controls Este atributo, si está presente, activa los controles por defecto. Cada navegador
provee sus propias funciones, como botones para reproducir y pausar el medio, así
como barra de progreso, entre otras.
autoplay Este atributo, si está presente, le indicará al navegador que comience a
reproducir el medio lo más pronto posible.
loop Este atributo hará que el navegador reproduzca el medio indefinidamente.
preload Este atributo recomienda al navegador qué hacer con el medio. Puede recibir tres
valores diferentes: none, metadata y auto. El valor none le dice al navegador que no
descargue el archivo hasta que el usuario lo ordene. El valor metadata le recomienda
al navegador descargar información básica sobre el medio. El valor auto le dice al
navegador que comience a descargar el archivo tan pronto como sea posible.
Atributos de video
Existen algunos atributos que son específicos para el elemento <video>:
poster Este atributo provee una imagen para mostrarla en lugar del video antes de ser
reproducido.
width Este atributo determina el tamaño del video en pixeles.
height Este atributo determina el tamaño del video en pixeles.
Eventos
Los eventos más relevantes para esta API son:
progress Este evento es disparado periódicamente para informar el progreso en la descarga
del medio.
canplaythrough Este evento es disparado cuando el medio completo puede ser reproducido
sin interrupción.
canplay Este evento es disparado cuando el medio puede ser reproducido. A diferencia del
evento previo, éste es disparado cuando solo parte del archivo fue descargado (solo
los primeros cuadros de un video, por ejemplo).
ended Este evento es disparado cuando la reproducción llega al final del medio.
pause Este evento es disparado cuando la reproducción es pausada.
play Este evento es disparado cuando el medio comienza a ser reproducido.
error Este evento es disparado cuando ocurre un error. El evento es despachado desde el
elemento <source> (si se encuentra presente) correspondiente a la fuente del medio
que produjo el error.
Métodos
Los métodos más comunes para esta API son:
play() Este método comienza o continúa la reproducción del medio.
pause() Este método pausa la reproducción del medio.
load() Este método descarga el archivo del medio. Es útil en aplicaciones dinámicas.
canPlayType(formato) Este método indica si el formato del archivo que queremos utilizar es
soportado por el navegador o no. Retorna una cadena vacía si el navegador no puede
reproducir el medio y los textos “maybe” (quizás) o “probably” (probablemente) basado
en la confianza que tiene de que el medio pueda ser reproducido o no.
Propiedades
Las propiedades más comunes de esta API son:
paused Esta propiedad retorna true (verdadero) si la reproducción del medio se
encuentra pausada o no ha comenzado.
ended Esta propiedad retorna true (verdadero) si la reproducción llegó al final del medio.
duration Esta propiedad retorna la duración del medio en segundos.
currentTime Esta es una propiedad que puede retornar o recibir un valor para informar la
posición en la cual el medio se encuentra reproduciendo o establecer una nueva
posición donde comenzar a reproducir.
error Esta propiedad retorna el valor del error cuando un error ocurre.
buffered Esta propiedad ofrece información sobre la cantidad del archivo que fue
descargado e introducido en el buffer. Retorna un array conteniendo datos sobre cada
porción del medio que ha sido descargada. Si el usuario salta a otra parte del medio
que no ha sido aún descargada, el navegador comenzará a descargar el medio desde
ese punto, generando una nueva porción en el buffer. Los elementos del array son
accesibles por medio de los atributos end() y start(). Por ejemplo, el código
buffered.end(0) retornará la duración en segundos de la primera porción del
medio encontrada en el buffer.