Hola cuando la barra de volumen está activa y quiero presionar el pause y no me lo permite, a que de puede deber ese daño ?
-
check_circle_outlineMódulo 1 | 2 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 3 clases
Semántica
expand_more -
check_circle_outlineMódulo 3 | 7 clases
Vídeo API
expand_more -
check_circle_outlineMódulo 4 | 10 clases
Formularios
expand_more -
check_circle_outlineMódulo 5 | 11 clases
Crea tu reproductor de vídeo
expand_more-
done_all
Clase 1
5.1 Reproductor de vídeo
-
done_all
Clase 2
5.2 Reproducir y pausa
-
done_all
Clase 3
5.3 Volumen parte 1
-
done_all
Clase 4
5.4 Volumen parte 2
-
done_all
Clase 5
5.5 Volumen parte 3
-
done_all
Clase 6
5.6 Barra de progreso
-
done_all
Clase 7
5.7 Indicadores de tiempo
-
done_all
Clase 8
5.8 FullScreen
-
done_all
Clase 9
5.9 Velocidad de reproducción
-
done_all
Clase 10
5.10 Mover reproducción
-
done_all
Clase 11
5.11 Mostrar y ocultar controles
-
-
check_circle_outlineMódulo 6 | 10 clases
Canvas
expand_more -
check_circle_outlineMódulo 7 | 2 clases
RequestAnimationFrame
expand_more -
check_circle_outlineMódulo 8 | 4 clases
Imágenes y Pixeles
expand_more -
check_circle_outlineMódulo 9 | 4 clases
Cámara y Micrófono
expand_more -
check_circle_outlineMódulo 10 | 4 clases
Cámara con efectos
expand_more
6 comentario(s)
Estos son los cambios que hicimos, al control range del HTML, le agregamos atributos min, max y step:
<input type="range" id="volume-range" value="1" min="0" max="1" step="0.05">
Al elemento video del HTML, agregamos el atributo loop:
<video src="video.mp4" width="800" loop></video>
En el JS, añadimos el listener para el evento input del control range, dentro de la función bindEvents
:
this.volumeRange.addEventListener('input',()=>this.updateVolume());
Añadimos la función updateVolume
:
updateVolume(){
if(this.volumeRange.value == 0){
this.showVolumeBtn.innerHTML = "volume_mute";
}else if(this.volumeRange.value < 0.5){
this.showVolumeBtn.innerHTML = "volume_down";
}
this.videoElement.volume = this.volumeRange.value;
}
En otro comentario lo separo según los cambios por cada minuto que hacemos.
Primeros 30s, añadimos propeidades al slider range para valores min, max y step:
<input type="range" id="volume-range" value="1" min="0" max="1" step="0.1">
En el minuto 1, seleccionamos el elemento del DOM:
this.volumeRange = document.querySelector(this.selector + " #volume-range");
Minuto 1:22, definimos el listener para el input de datos, cada que se cambie el valor del control range, llamamos a la función updateVolume()
this.volumeRange.addEventListener('input',()=>this.updateVolume());
Minuto 1:30, asignamos a la propiedad volume del vídeo, el valor del control:
this.videoElement.volume = this.volumeRange.value;
Minuto 2:02 agregamos el atributo loop al elemento video para que el vídeo se repita:
<video src="video.mp4" width="800" loop></video>
Minuto 2:21, en el código original no estábamos ejecutando updateVolume en el listener:
this.volumeRange.addEventListener('input',()=>this.updateVolume); // Sin ejecutar no funcionaba
this.volumeRange.addEventListener('input',()=>this.updateVolume()); //Ejecutando funciona
Minuto 3:40 dependiendo de si el volumen está en 0 o no, cambiamos el icono a mute:
if(this.volumeRange.value == 0){
this.showVolumeBtn.innerHTML = "volume_mute";
}
Minuto 4:20 si el volumen está por debajo de 0.5 (la mitad), reemplazamos por el icono volume_down de Material Design Icons
if(this.volumeRange.value < 0.5){
this.showVolumeBtn.innerHTML = "volume_down";
}
Juntamos todo en un else if:
if(this.volumeRange.value == 0){
this.showVolumeBtn.innerHTML = "volume_mute";
}else if(this.volumeRange.value < 0.5){
this.showVolumeBtn.innerHTML = "volume_down";
}
Cuando pueda corregirlo , ya que, el problema veo que tiene tiempo ;)
Saludos!