Programando un reproductor de audio en HTML5

Regresar al índice

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:

Código 5-13. Plantilla para el 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="http://minkbooks.com/content/beach.mp3">
<source src="http://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>

En la nueva plantilla del Código 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 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

Veamos un repaso de este cápitulo 5.

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.

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear

Reproducir audio con HTML5

Regresar al índice

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>.

Código 5-11. HTML básico para reproducir audio.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
</head>
<body>
<section id="reproductor">
<audio src=”http://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 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:

Código 5-12: dos fuentes para el mismo audio

<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
</head>
<body>
<section id="reproductor">
<audio id="medio" controls>
<source src="http://minkbooks.com/content/beach.mp3">
<source src="http://minkbooks.com/content/beach.ogg">
</audio>
</section>
</body>
</html>

El Código 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.

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear

Formatos de video en la web.

Regresar al índice

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.

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear

Programando un reproductor de video en HTML5 - 2 de 2

Regresar al índice

Los métodos

La función presionar() incorporada en el Código 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():

Código 5-7. Esta función inicia y pausa la reproducción del video.

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);
}
}

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.

Código 5-8. Esta función actualiza la barra de progreso una vez por segundo.

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);
}
}

La función estado() en el Código 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:

Código 5-9. Comenzar a reproducir desde la posición seleccionada por el usuario.

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';
}
}

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 Código 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 Código 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:

Código 5-10. Escuchando al evento load.

window.addEventListener('load', iniciar, false);

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 esta serie de publicaciones es acerca de HTML5, decidimos usar el nuevo estándar addEventListener(). 

Hágalo usted mismo: Copie todos los códigos Javascript desde el Código 5-6 dentro del archivo reproductor.js. Abra el archivo video.html con la plantilla del Código 5-4 en su navegador y haga clic en el botón “Reproducir”. Intente utilizar la aplicación desde diferentes navegadores.

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear

Programando un reproductor de video en HTML5 - 1 de 2

Regresar al índice

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 Código 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.

Código 5-4. Plantilla HTML para nuestro reproductor de video.

<!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="http://minkbooks.com/content/trailer.mp4">
<source src="http://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>

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:

Código 5-5. Estilos CSS para el reproductor.

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);
}

El Código 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 Código 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 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.

Código 5-6. Función inicial.

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);
}

El Código 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.

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear

Reproduciendo video con HTML5

Regresar al índice

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:

Código 5-1. Sintaxis básica para el elemento <video>.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
</head>
<body>
<section id="reproductor">
<video src=”http://minkbooks.com/content/trailer.mp4” controls>
</video>
</section>
</body>
</html>

En teoría, el código del Código 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:

Código 5-2. Reproductor de video con controles por defecto y compatible con navegadores HTML5.

<!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="http://minkbooks.com/content/trailer.mp4">
<source src="http://minkbooks.com/content/trailer.ogg">
</video>
</section>
</body>
</html>

En el Código 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 Código 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 Código 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. 

Código 5-3: Aprovechando los atributos del elemento <video>.

<!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="http://minkbooks.com/content/poster.jpg">
<source src="http://minkbooks.com/content/trailer.mp4">
<source src="http://minkbooks.com/content/trailer.ogg">
</video>
</section>
</body>
</html>

En el Código 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.

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear