Controlar volumen de vídeo HTML5 con un Slider

03/feb/2012 HTML5 , , , 3 Comentarios
Logo HTML5

En este ejemplo vamos a combinar varias cosas que hemos aprendido sobre el HTML5. Por un lado el manejo de los sliders para poder establecer un rango de valores mediante una barra de desplazamiento. Por otro el manejo de un vídeo en HTML5. Además aprenderemos una cosa nueva, que será el controlar el volumen del vídeo con un slider.

Lo primero que haremos será poner en nuestra página los elementos HTML5 que necesitemos, ya que el código Javascript que incorporemos será siempre no intrusivo.

El vídeo, mediante el elemento VIDEO será el siguiente:

  1. <video id="mivideo" controls>
  2. <source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg"></source>
  3. Tu navegador no soporta el elemento <code>video</code>
  4. </video>

Y el slider será mediante un elemento input y su tipo "range"

  1. <label for="volumen">Volumen: </label><input type="range" min="0" max="1" value="1" step="0.1" id="volumen">
  2. <input type="checkbox" id="mute"><label for="mute">Mute</label>

Además hemos incorporado un checkbox para simular el mute. Es decir, para quitar el sonido al vídeo.

Lo primero, las referencias a los elementos:

  1. var mute = document.getElementById("mute");
  2. var barra = document.getElementById("volumen");

Sobre el tema de controlar el volumen del vídeo deberemos de saber que la propiedad que gestiona el volumen de un vídeo en HTML5 es .volume del elemento HTMLMediaElement. Y que los valores que puede tomar dicha propiedad van desde el 0.0 hasta el 1.0 con saltos de 0.1. Algo importante ya que como vemos son los valores que hemos dado a las propiedades min, max y step del slider.

Así la codificación ante un cambio del slider, es decir, ante que se produzca un evento change, será el asignar el valor del slider al volumen del vídeo.

  1. barra.addEventListener("change",function(ev){
  2. var v = document.getElementById("mivideo");
  3. v.volume = ev.target.value;
  4. mute.checked=false;
  5. },true);

Vemos en el código que el .value del slider se lo asignamos a la propiedad .volume del vídeo.

Utilizamos .addEventListener para adjuntar la gestión de un evento a un elemento en concreto.

Además hemos añadido el manejo del mute. es decir, si cambiamos el slider (movemos el volumen) se desactivará la casilla del mute.

Ahora vamos con el mute. Para esto gestionamos el evento change del checkbox. Cada vez que cambie el checkbox veremos que hacer. Pero antes de esto nos vamos a crear una variable que nos permite mantener la información del volumen. Esta nos servirá para que cuando desactivemos el mute, recuperemos la última posición del volumen. A esta variable la hemos llamado oldvolume.

  1. var oldvolume = 1;

Inicializada a 1, al igual que sucede con el volumen.
Ahora solo tenemos que jugar con el valor del checkbox. Su atributo .checked nos indicará si este está activo o no.

  1. mute.addEventListener("change",function(ev){
  2. var v = document.getElementById("mivideo");
  3. if (ev.target.checked) {
  4. oldvolume = v.volume;
  5. v.volume = 0;
  6. barra.value = 0;
  7. } else {
  8. v.volume = oldvolume;
  9. barra.value = oldvolume;
  10. }
  11. },true);

La lógica, la siguiente. Si está activado hay que apagar el volumen (atributo volume a 0 y el slider con un valor de 0), pero guardándonos la posición actual del volumen en la variable oldvolume.

Que el checkbox está desactivado, pues reponemos el valor de la variable oldvolume tanto al slider, como al atributo .volume del vídeo.

Con todo esto ya podemos controlar el volumen de vídeo HTML5 con un Slider.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Controlar volumen de vídeo HTML5 con un Slider”

Víctor Cuervo

Eloi Martínez Rabert

Para mejorar el efecto cuando cambias el volumen, cuando haces el addEventListener, modifica el ‘change’ por ‘mousemove’.

Gran aporte y gracias por ayudar a encontrar el error que buscaba durante horas ;).

Víctor Cuervo

Víctor Cuervo

@keyvin2012,

Cierto, al depender del slider (http://lineadecodigo.com/html5/elemento-rango-en-formularios-html5/) no se puede ver todavía en Firefox. Espero que se llegue la implementación completa de este elemento para que funcione el ejemplo en todos los navegadores.

Ahora, que si juegas con los valores del input entre 0 y 1 (0.1, 0.2,…) y pulsas intro, consigues el mismo efecto.

Si bien, es verdad que debería de completar el código para simular el slider con algún componente para que esto funcione. Me lo pongo en la lista de tareas.

Víctor Cuervo

keyvin2012

lastima que no funciona en firefox solo pude vizualizarlo en chrome

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*