如何解决1 多个播放器的音量控制器?
是否有一种简单的方法可以重复此代码以创建同时适用于 4 个不同播放器的音量控制器?通过更改 myAudio(x) 值,我设法让它在任何给定点为一个玩家工作,但除此之外似乎更容易混淆。
// 全局变量和控件
var vid = document.getElementById("myVideo");
var volumeControl = document.getElementById("vol-control");
var setVolume = function(){
vid.volume = this.value / 100;
};
var audio = document.getElementById("myAudio(1)");
var volumeControl2 = document.getElementById("vol-control2");
var setVolume2 = function(){
audio.volume = this.value / 100;
};
//事件监听器
volumeControl.addEventListener('change',setVolume);
volumeControl.addEventListener('input',setVolume);
volumeControl2.addEventListener('change',setVolume2);
volumeControl2.addEventListener('input',setVolume2);
解决方法
委托
HTML
<div id="audvid">
<video.../>
<audeo.../>
</div>
事件监听器
document.getElementById("audvid").addEventListener("change",setVolume)
document.getElementById("audvid").addEventListener("input",setVolume)
更改访问的内容
const setVolume = function(e) {
const tgt = e.target;
if (["AUDIO","VIDEO"].includes(tgt.tagName)) {
tgt.volume = tgt.value / 100;
}
};
更改任何音频/视频
const setVolume = function(e) {
const tgt = e.target;
[...document.querySelectorAll("AUDIO","VIDEO")].forEach(ele => {
ele.volume = tgt.value / 100;
})
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。