[英]Video Volume Slider in HTML5 and JavaScript
我正在尝试使用 HTML5 <video>
标记和一些 JavaScript 制作带有自定义 UI 的视频播放器。 但是我的音量滑块不起作用。
我尝试这样做的方法是编写一个函数,该函数以 1 毫秒的间隔一遍又一遍地设置音量。 显然,如果他们自上次循环以来没有接触过滑块,则音量不应改变。 1 毫秒不是很长的时间,所以我尝试将其增加到 100 毫秒,看看它是否有帮助。 它没有。
无论我将滑块设置在什么位置,音量都保持默认值。 这可以在不使用自定义库的情况下完成吗? 如果是这样,如何?
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;
}
实际上最好同时处理“输入”和“更改”事件,以便在所有较新的浏览器中使用滑块实时更新音量(“更改”只应该在用户释放鼠标按钮时发生,即使它显然适用于 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/
与其每毫秒检查音量控制是否发生变化(效率极低),您应该创建一个仅在音量控制发生变化时触发的事件侦听器。 下面是一个例子:
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',setVolume);
volumeControl.addEventListener('input',setVolume);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.