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

标签 javascript html

我正在尝试使用 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;

}

最佳答案

与其检查音量控制是否每毫秒改变一次(非常低效),不如创建一个仅在音量控制改变时触发的事件监听器。这是一个例子:

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

关于javascript - HTML5 和 JavaScript 中的视频音量 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59262808/

相关文章:

javascript - 使用 ws ://while on https://(mixed content)

javascript - jQuery 插件重新排序 block 以节省空间?

php readFile() 和移动 safari

html - CSS Div 元素高度问题

html - 如何在bash中仅使用grep提取html标签

javascript - 为什么 Canvas Angular 落的球速度较低?

javascript - meteor :Accounts.createUser() 不创建用户

javascript - AngularJS 新手,ngResource 问题

html - 页眉始终在顶部,页脚始终在底部

html - CSS:自定义转换