javascript - HTML5 和 JavaScript 中的视频音量 slider

Question

我正在尝试使用 HTML5 制作带有自定义 UI 的视频播放器 <video>标签和一些 JavaScript。不过，我的音量 slider 不起作用。

我尝试这样做的方法是编写一个函数，以 1 毫秒的间隔反复设置音量。显然，如果自上次循环以来他们没有触及 slider ，则音量不应改变。 1 毫秒不是很长的时间，因此我尝试将其增加到 100 毫秒以查看是否有帮助。它没有。

无论我将 slider 设置到什么位置，音量都保持在默认值。这可以在不使用自定义库的情况下完成吗？如果是，怎么办？

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;

}

Answer 1

实际上最好同时处理“输入”和“更改”事件，以便在所有较新的浏览器中使用 slider 实时更新音量(“更改”只应该发生当用户释放鼠标按钮时，即使它显然可以在 Chrome 中运行，并且 IE10 要求您处理“更改”而不是“输入”)。这是一个工作示例:

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

...这是一个现场演示: https://jsfiddle.net/2rx2f8dh/