¿Cómo obtengo el valor de un control deslizante para actualizar en tiempo real?

Tengo una etiqueta de video HTML con una barra de control personalizada y en ella quiero que tanto la barra de búsqueda como la barra de volumen actualicen sus valores en tiempo real a medida que el usuario pasa por el rango. Actualmente, el volumen se actualiza luego de que el usuario ajusta el control deslizante y no mientras el usuario hace clic y arrastra.

En HTML los tengo configurados como tales:

// ... // ...

Y en mi JavaScript los tengo conectados así:

 // Change current viewing time when scrubbing through the progress bar seekBar.addEventListener('change', function() { // Calculate the new time var time = video.duration * (seekBar.value / 100); // Update the video time video.currentTime = time; }); // Update the seek bar as the video plays video.addEventListener('timeupdate', function() { // Calculate the slider value var value = (100 / video.duration) * video.currentTime; // Update the slider value seekBar.value = value; }); // Pause the video when the seek handle is being dragged seekBar.addEventListener('mousedown', function() { video.pause(); }); // Play the video when the seek handle is dropped seekBar.addEventListener('mouseup', function() { video.play(); }); // Adjust video volume when scrubbing through the volume bar volumeBar.addEventListener('change', function() { // Update the video volume video.volume = volumeBar.value; }); 

Quiero hacer esto desde el principio y no usar bibliotecas de JavaScript como jQuery aunque sé que esto ya se ha hecho para esa biblioteca. La mayoría de las soluciones que he visto implican jQuery pero no quiero usarlo. Esto es para: reducir la dependencia de jQuery, lo que permite un mayor control de mi parte, y principalmente como una experiencia de aprendizaje.

  1. Usar el mousemove es una solución estúpida. Hay un evento llamado ‘entrada’.
  2. El evento de cambio debe enviarse tan pronto como el usuario se comprometa con un valor específico (mouserelease, keyup o blur), pero tenga cuidado, Chrome e IE10 tienen malas implementaciones de este comportamiento de evento de entrada / cambio diferente. (ver: https://code.google.com/p/chromium/issues/detail?id=155747 )
  3. Si quieres aprender JS, aprende cómo estructurar tu JS y pensar en los componentes. Esto es mucho más importante que usar JS nativo vs. JQuery. Por ejemplo, estás usando identificadores. Esto significa que solo puede tener un reproductor de medios en una página. Está omitiendo el tercer parámetro de addEventListener. Y así….

Entonces la explicación de cómo hacer las cosas. Depende de si está realizando una prueba en un navegador comstackdo estándar (actualmente solo FF) o en el entorno x-browser.

Para obtener el valor actual de una entrada mientras el usuario está interactuando con ella, simplemente use el evento de entrada:

 range.addEventListener('input', onInput, false); 

Aquí hay una demostración funcional de FF: http://jsfiddle.net/trixta/MfLrW/

En caso de que desee obtener este trabajo en Chrome e IE, debe usar la entrada / cambio y tratarlos como si fuera solo el evento de entrada. Entonces necesita calcular usted mismo el evento de “cambio”, que no es realmente simple. Pero aquí hay un ejemplo de trabajo para ti:

http://jsfiddle.net/trixta/AJLSV/