HTML5和JavaScript中的视频音量滑块 [英] Video Volume Slider in HTML5 and JavaScript

问题描述

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

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.

我尝试执行的方法是编写一个函数，该函数以1ms的间隔反复设置音量.显然，如果自上次循环以来他们还没有触摸过滑块，则音量不应改变. 1毫秒不是很长的时间，所以我尝试将其增加到100毫秒以查看是否有帮助.没有.

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.

无论我将滑块设置到什么位置，音量都将保持默认值.可以在不使用自定义库的情况下完成此操作吗?如果可以，怎么办?

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:

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

}

推荐答案

实际上最好同时处理"input" 和"change"事件，以便使用所有更新的浏览器中使用滑块"(更改"仅在用户释放鼠标按钮时才发生，即使它显然在Chrome中也可以使用，并且IE10要求您处理更改"而不是输入").这是一个工作示例:

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:

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

...here's a live demo: https://jsfiddle.net/2rx2f8dh/

这篇关于HTML5和JavaScript中的视频音量滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！