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:
Y el slider será mediante un elemento input y su tipo «range»
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:
var mute = document.getElementById("mute");
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.
barra.addEventListener("change",function(ev){
var v = document.getElementById("mivideo");
v.volume = ev.target.value;
mute.checked=false;
},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.
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.
mute.addEventListener("change",function(ev){
var v = document.getElementById("mivideo");
if (ev.target.checked) {
oldvolume = v.volume;
v.volume = 0;
barra.value = 0;
} else {
v.volume = oldvolume;
barra.value = oldvolume;
}
},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.
