Vidéo Curseur de Volume en HTML5 et JavaScript

Je suis en train de faire un lecteur vidéo avec une INTERFACE utilisateur personnalisée en utilisant le HTML5 <video> balise et un peu de JavaScript. Mon curseur de volume ne fonctionne pas bien.

La façon dont j'ai essayé de le faire est d'écrire une fonction qui détermine le volume et plus de à 1 ms d'intervalle. Évidemment, si ils n'ont pas touché le curseur depuis le dernier cycle, le volume ne devrait pas changer. 1ms n'est pas un temps très long, donc j'ai essayé de l'augmenter à 100ms pour voir si cela peut aider. Il n'a pas.

N'importe quelle position, j'ai mis le curseur du volume des séjours à la valeur par défaut. Cela peut être fait sans l'aide d'une bibliothèque personnalisée? Si oui, comment?

HTML:

<video id="video" autoplay>
 <source src="/720p.mp4" type="video/mp4">
</video>
<input id="vol-control" type="range" min="0" max="100" step="1"></input>

JavaScript:

var video = document.getElementById('video');
var volu3 = document.getElementById('vol-control');

window.setInterval(changevolume(), 1);

function changevolume() {

 var x = volu3.value;
 var y = x / 100;

 video.volume = y;

}
Ne pas appeler la fonction lorsque vous passez comme un argument. Ce faire: setInterval(changevolume, 1). Vous changevolume ne retourne rien, donc changevolume() est le même que undefined

OriginalL'auteur iHaveNoIdeaWhatI'mTalkingAbout | 2015-08-10

  1. 5

    C'est en fait le mieux pour gérer à la fois le "input" et événement "change" de sorte que le volume des mises à jour en temps réel avec le curseur avec tous les navigateurs récents ("changement" n'est censé se produire lorsque l'utilisateur relâche le bouton de la souris, même si apparemment il fonctionne dans Chrome, et IE10 vous oblige à gérer "modifier" au lieu de "saisie"). Voici un exemple de travail:

    <video id="video" autoplay>
    <source src="/720p.mp4" type="video/mp4">
</video>
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>

<script>
    function SetVolume(val)
    {
        var player = document.getElementById('video');
        console.log('Before: ' + player.volume);
        player.volume = val / 100;
        console.log('After: ' + player.volume);
    }
</script>

    ...voici une démo en live:
    https://jsfiddle.net/2rx2f8dh/

    OriginalL'auteur Colin

  2. 4

    Au lieu de vérifier si le volume de contrôle a changé à chaque milliseconde (très inefficace), vous devez créer un écouteur d'événement qui déclenche uniquement lorsque votre volume de contrôle des changements. Voici un exemple:

    var video = document.getElementById('video');
var volumeControl = document.getElementById('vol-control');

volumeControl.addEventListener('change', function() {
    video.volume = this.value / 100;
});

    Mise à JOUR (avec oninput écouteur d'événement)

    var video = document.getElementById('video');
var volumeControl = document.getElementById('vol-control');

var setVolume = function() { video.volume = this.value / 100; };

volumeControl.addEventListener('change', setVolumne);
volumeControl.addEventListener('input', setVolumne);
    Nice. Voici une démo: jsbin.com/vojano/1/edit?html,css,js,console,sortie
    Ne fonctionne pas dans IE11. Voir ma réponse pour plus de détails.

    OriginalL'auteur dhouty