Question

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

我尝试这样做的方法是编写一个函数，以1ms的间隔反复设置音量。显然，如果他们自上一个循环后没有触摸滑块，则音量不应该改变。 1ms不是很长的时间，所以我尝试将它增加到100ms，看它是否会有所帮助。它没有。

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

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

实际上最好同时处理“输入”和“更改”事件，以便使用所有较新浏览器的滑块实时更新卷（“更改”仅应发生当用户释放鼠标按钮时，即使它显然在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/

Answer 2

您应该创建一个仅在音量控制发生变化时才会触发的事件侦听器，而不是检查音量控制是否每毫秒都发生了变化（非常低效）。这是一个例子：

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

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

更新（使用oninput事件监听器）

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

HTML5和JavaScript中的视频卷滑块

2 个答案: