feed twitter facebook LinkedIn facebook

HTML5 » Controlar volumen de vídeo HTML5 con un Slider

febrero 3, 2012 por Víctor Cuervo 3 Comentarios Imprimir Imprimir

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.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre HTML5
Foro sobre HTML5
tags: , , , , , , , , ,

Artículos relacionados:

3 comentarios »

RSS feed para los comentarios de esta entrada.TrackBack URI

  1. Bitacoras.com
    febrero 3, 2012 #

    Información Bitacoras.com…

    Valora en Bitacoras.com: 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…..

  2. keyvin2012
    febrero 9, 2012 #

    lastima que no funciona en firefox solo pude vizualizarlo en chrome

  3. Víctor Cuervo
    febrero 9, 2012 #

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

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*