Control de reproducción de vídeo y audio con JavaScript

Como hemos visto en las secciones anteriores, los navegadores trabajan de forma diferente y algunos de los atributos de <audio> y <video> pueden estar o no habilitados por defecto.

Para poder controlar todos los elementos de nuestro reproductor podemos utilizar JavaScript y aprovechar los nuevos métodos, propiedades y eventos incorporados en HTML5.

5.1. Métodos

Para gestionar la reproducción de medios en HTML5 disponemos de una lista de métodos que se pueden llamar desde JavaScript. Los métodos más utilizados son los siguientes:

• play(): comienza a reproducir el medio desde el inicio, siempre que el medio no haya sido pausado previamente.
• pause(): pausa la reproducción.
• load(): carga el archivo del medio. Es útil para cargar el medio anticipadamente.
• canPlayType(formato): para comprobar si el formato del archivo se soporta por el navegador.

Por ejemplo, si queremos iniciar la reproducción de un vídeo después de pulsar un botón haremos lo siguiente:

 <video id="video" width="700" height="350">  
    <source src="video.mp4">   
    <source src="video.ogv"> 
</video> 
<input type="button" id="boton" value="Reproducir"> 

<script> 
function iniciar() { 
   var boton=document.getElementById('boton'); 
   boton.addEventListener('click', presionar, false); 
} 
function presionar() { 
   var video=document.getElementById('video'); 
   video.play(); 
} 
window.addEventListener('load', iniciar, false); 
</script> 

5.2. Propiedades

Con HTML5 también disponemos de algunas propiedades que nos darán información sobre el medio, la mayoría de ellas son de lectura/escritura, por lo tanto, también podemos cambiar su valor. Las siguientes son las propiedades más utilizadas:

• paused: tiene valor «true» si la reproducción del medio está actualmente pausada o no ha comenzado.
• ended: tiene valor «true» si la reproducción del medio ha finalizado porque se llegó al final.
• duration: contendrá la duración del medio en segundos.
• currentTime: Esta propiedad de lectura/escritura contendrá un valor para informar sobre la posición en segundos en la cual el medio está siendo reproducido, o especifica una nueva posición donde continuar reproduciendo.
• error: tiene el valor del error ocurrido.
• muted: para desactivar (true) o activar (false) el sonido del vídeo.
• volume: para indicar el volumen del vídeo. El valor del volumen debe ser un número entre 0 y 1, por ejemplo si indicamos medio.volume = 0.3 estaríamos configurando el volumen al 30%.

Por ejemplo, podemos cambiar la función presionar() del ejemplo anterior, para que se inicie la reproducción del vídeo al presionar el botón y se pause la reproducción si se vuelve a presionar. En el siguiente código, cambiamos también el texto del botón indicando la operación a realizar.

function presionar() { 
   if(!medio.paused && !medio.ended)   { 
      medio.pause(); 
      reproducir.value='Reproducir';   
   } 
   else 
   { 
      medio.play(); 
      reproducir.value='Pausa';   
   } 
} 

5.3. Eventos

También disponemos de diferentes eventos que nos permiten conocer la situación del medio. Los eventos más importantes son los siguientes:

• progress: progreso de la descarga del medio. La información estará disponible a través del atributo buffered.
• canplaythrough: se dispara cuando el medio completo puede ser reproducido sin interrupción.
• ended: se dispara cuando el reproductor llega al final del medio.
• pause: se dispara cuando el reproductor es pausado.
• play: se dispara cuando el medio comienza a ser reproducido.
• error: se dispara cuando ocurre un error.

Más eventos JS

Comprueba tu aprendizaje

Ejercicios propuestos

Actividad 5.1

Partiendo del siguiente código en el que están implementadas las funcionalidades de los botones play/pause.

default

Implementa las siguientes funcionalidades extra:

• Al pulsar el botón «reiniciar» si el vídeo está iniciado se reiniciará, es decir, comenzará a reproducirse de nuevo desde el inicio.
• Al pulsar el botón «retrasar» la reproducción del vídeo saltará 5 segundos hacia atrás.
• Al pulsar el botón «adelantar» la reproducción del vídeo saltará 5 segundos hacia delante.
• Al pulsar el botón «silenciar» el sonido del vídeo se desactivará y el texto del botón cambiará a «escuchar». Al volver a pulsar el botón se activará el sonido y se cambiará de nuevo el texto a «silenciar».
• Al pulsar el botón «menosVolumen» se bajará el volumen del vídeo 0.1 puntos hasta llegar a 0.
• Al pulsar el botón masVolumen ( ) se subirá el volumen del vídeo 0.1 puntos hasta llegar a 1.

Incluye el vídeo de Big Buck Bunny (clips.vorwaerts-gmbh.de/big_buck_bunny.mp4) con todas sus funcionalidades implementadas en una nueva entrada del blog de tu proyecto web con el título “Control de vídeo”. Aplica estilos a los botones teniendo en cuenta tu guía de estilo y realiza los ajustes necesarios para que se adapte a los distintos dispositivos.

Ver ejemplo de código unicode para «play» en HTML y JS.

Actividad 5.2

Inserta una nueva entrada en tu blog (título: “Control de audio”). Incluye 4 botones que al pincharlos reproduzcan cada uno un audio diferente. No se debe mostrar el reproductor de audio. Aplica estilos a los botones teniendo en cuenta tu guía de estilo y realiza los ajustes necesarios para que se adapte a los distintos dispositivos.

default