Comment puis-je obtenir la valeur d'un curseur de mise à jour en temps réel?

J'ai un HTML balise vidéo avec une personnalisation de la barre de contrôle et je m'en veux à la fois la barre de recherche et la barre de volume pour mettre à jour leurs valeurs en temps réel de l'utilisateur gommages à travers la gamme. Actuellement, le volume des mises à jour après que l'utilisateur règle le curseur et non pas lorsque l'utilisateur est en cliquant et en faisant glisser.

En HTML j'ai mis en place en tant que tel:

<div id="video-controls">
//...
<input type="range" id="seek-bar" value="0">
<input type="range" id="volume-bar" min="0" max="1" step="0.01" value="1">
//...
</div>

Et dans mon JavaScript je les ai accroché:

//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;
});

Je veux le faire à partir de zéro et de ne pas utiliser les bibliothèques JavaScript comme jQuery, même si je sais que cela a déjà été fait pour la bibliothèque. La plupart des solutions que j'ai vu impliquer jQuery mais je ne veux pas l'utiliser. C'est pour: la réduction de la dépendance sur jQuery, permettant plus de contrôle sur ma fin, et surtout comme une expérience d'apprentissage.

Avez-vous essayé mousemove?
Pouvez-vous construire un exemple simple à l'aide de jsfiddle? Ce n'est pas que votre question n'est pas claire, il avait juste être agréable d'avoir un travail de démonstration.
Merci, ta solution a fonctionné pour le volume. Ce n'est pas pour la barre de recherche lors de la tentative pour faire avancer la vidéo car la vidéo est mise en pause à chaque fois que je planer sur elle. J'ai essayé de supprimer les fonctions de lecture/pause lorsque frotter, mais cela ne fonctionne pas.

OriginalL'auteur Ushinro | 2014-04-04

  1. 15
    1. À l'aide de l'événement mousemove est un stupide solution de contournement. Il y a un événement appelé 'entrée'.
    2. L'événement de changement doit être effectué dès que l'utilisateur en tant que commis lui-même une valeur spécifique (mouserelease, keyup ou flou), mais attention, le Chrome et IE10 avoir de mauvaises implémentations de ces différentes entrées/événement de changement de comportement. (voir: https://code.google.com/p/chromium/issues/detail?id=155747)
    3. Si vous voulez apprendre le JS, apprendre à structurer votre JS et de penser dans les composants. C'est beaucoup plus important que d'utiliser JS natif vs JQuery. Par exemple, vous utilisez des id. Cela signifie que vous ne pouvez avoir qu'un lecteur multimédia sur une page. Vous êtes en omettant le troisième paramètre de la méthode addEventListener. Et ainsi de suite....

    Donc l'explication sur la façon de faire les choses. Dépend si vous êtes un essai dans un normes compilant navigateur (actuellement uniquement FF) ou dans x-navigateur de l'environnement.

    Pour obtenir la valeur actuelle de l'entrée pendant que l'utilisateur est en interaction avec elle, il suffit d'utiliser l'entrée de l'événement:

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

    Ici est un travail de démonstration pour les FF: http://jsfiddle.net/trixta/MfLrW/

    Dans le cas où vous souhaitez obtenir ce travail en Chrome et IE, vous devez utiliser l'entrée/modification et de les traiter comme il serait seulement l'entrée de l'événement. Ensuite, vous devez calculer l'événement "change" vous-même, ce qui n'est pas vraiment simple. Mais voici un exemple pour vous:

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

    Bon à savoir, je vais étudier ce que vous avez dit et voir si je peux la mettre en œuvre. Je me demandais si ou de ne pas utiliser les classes et les id ou les deux pour les tags, mais il semble que les classes est le chemin à parcourir. Va pour id est certainement pas extensible si les besoins changent pour pouvoir afficher plus d'une vidéo sur une seule page. Je vais suivre mes progrès plus tard. Enfin, désolé si mon code est mauvais pour le regarder; je suis relativement nouveau pour les Js.
    Mise à jour: je suis encore à travailler sur l'optimisation de mon code pour le composant de la structure, mais votre solution est la meilleure jusqu'à présent. Merci pour votre aide.

    OriginalL'auteur alexander farkas