HTML5 和 JavaScript 中的视频音量滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31926221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Video Volume Slider in HTML5 and JavaScript
提问by iHaveNoIdeaWhatI'mTalkingAbout
I'm trying to make a video player with a custom UI using the HTML5 <video>tag and some JavaScript. My volume slider won't work though.
我正在尝试使用 HTML5<video>标记和一些 JavaScript制作带有自定义 UI 的视频播放器。但是我的音量滑块不起作用。
The way I've tried to do it is to write a function which sets the volume over and over at 1ms intervals. Obviously if they haven't touched the slider since the last cycle the volume shouldn't change. 1ms isn't a very long time so I tried increasing it to 100ms to see if it would help. It didn't.
我尝试这样做的方法是编写一个函数，该函数以 1 毫秒的间隔一遍又一遍地设置音量。显然，如果他们自上次循环以来没有接触过滑块，则音量不应改变。1 毫秒不是很长的时间，所以我尝试将其增加到 100 毫秒，看看它是否有帮助。它没有。
No matter what position I set the slider to the volume stays at the default value. Can this be done without using a custom library? If so, how?
无论我将滑块设置在什么位置，音量都保持默认值。这可以在不使用自定义库的情况下完成吗？如果是这样，如何？
HTML:
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:
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;
}
采纳答案by Colin
It's actually best to handle both the "input" and"change" event so that the volume updates in real-time with the slider with all newer browsers ("change" is only supposed to happen when the user releases the mouse button, even though it apparently works in Chrome, and IE10 requires you to handle "change" instead of "input"). Here's a working example:
实际上最好同时处理“输入”和“更改”事件，以便在所有较新的浏览器中使用滑块实时更新音量（“更改”只应该在用户释放鼠标按钮时发生，即使它显然适用于 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>
...here's a live demo: https://jsfiddle.net/2rx2f8dh/
...这是一个现场演示：https: //jsfiddle.net/2rx2f8dh/
回答by dhouty
Instead of checking whether the volume control has changed every millisecond (highly inefficient), you should create an event listener that will fire only when your volume control changes. Here is an example:
与其每毫秒检查音量控制是否发生变化（效率极低），您应该创建一个仅在音量控制发生变化时触发的事件侦听器。下面是一个例子：
var video = document.getElementById('video');
var volumeControl = document.getElementById('vol-control');
volumeControl.addEventListener('change', function() {
video.volume = this.value / 100;
});
UPDATE(with oninputevent listener)
更新（带有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);
