Javascript Js自定义视频控件。静音视频输入范围元素
我是javascript新手，我正在用js制作一些自定义视频控件。我有一个带有静音/取消静音图标的span元素，当鼠标悬停在子元素上时，会显示一个带有输入范围栏的span元素，以选择想要的valume级别。问题是，每当我单击子元素（输入类型范围栏）时，父元素的图标就会改变，每次单击时音量都会静音和取消静音。我该如何解决这个问题Javascript Js自定义视频控件。静音视频输入范围元素,javascript,html,css,Javascript,Html,Css,我是javascript新手，我正在用js制作一些自定义视频控件。我有一个带有静音/取消静音图标的span元素，当鼠标悬停在子元素上时，会显示一个带有输入范围栏的span元素，以选择想要的valume级别。问题是，每当我单击子元素（输入类型范围栏）时，父元素的图标就会改变，每次单击时音量都会静音和取消静音。我该如何解决这个问题 <html> <span id ="volbtn" class = "fas fa-volume-up"> <inp
<html>
<span id ="volbtn" class = "fas fa-volume-up">
<input type ="range" value = "1" min ="0" max ="1" volume ="1" step="0.1" id ="volbar"/>
</span>
</html>
输入span更好的自定义视频事件处理： 我将使用旧的
fafasJavaScript示例非常简单，但是如果您遇到困难，请随时寻求指导 不要错过新引入的
。是静音的。是暂停的这就是诀窍所在，还有 遵循以下规则：
- 自定义UI元素应仅操作
元素属性视频 - 自定义UI元素外观/样式应由以下人员专门处理：
const video=document.getElementById（'video'）；
const playBtn=document.getElementById（'playBtn'）；
const muteBtn=document.getElementById（'muteBtn'）；
const volBar=document.getElementById（'volBar'）；
//自定义UI元素事件
//他们只能更改“视频”属性！
//记住：我们这里不处理UI外观
playBtn.addEventListener（'单击'，（）=>{
视频[视频.暂停？'play'：'pause']（）；
});
muteBtn.addEventListener（'单击'，（）=>{
if（！video.volume）return；//如果没有任何卷，则不执行任何操作
video.muted=！video.muted；//切换静音状态
});
volBar.addEventListener（'input'，（evt）=>{
video.volume=evt.target.value；
});
//视频事件-和用户界面样式
//视频属性值更改时触发
// https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
video.addEventListener（'play'，handlePlayPauseUI）；
video.addEventListener（'ended'，handlePlayPauseUI）；
video.addEventListener（'pause'，handlePlayPauseUI）；
video.addEventListener（'volumechange'，handleVolumeUI）；
//TODO:同时处理“进度”、“费率变化”等。。。
函数handlePlayPauseUI（）{
playBtn.classList.toggle（'正在播放'，！video.paused）；
}
函数handleVolumeUI（）{
volBar.value=video.muted？0:video.volume；
muteBtn.classList.toggle（'is-muted'，video.muted | | |！video.volume）；
}video{显示：块；最大宽度：500px；}
法兰西{
用户选择：无；
光标：指针；
}
.fa.is静音：在{/*我使用.fa之前，您使用.fas*/
字体系列：“FontAwesome”/*如果需要，还可以修复系列名称*/
内容：“\f026”/*十六进制表示“静音”图标（请在cheatsheet CSS文档中找到您的图标）*/
}
英足总正在比赛：之前{
字体系列：“FontAwesome”；
内容：“\f04c”/*在此设置暂停图标的十六进制*/
}请保持一致，并停止在属性和第一个
“volCtrl.addEventListener("click", muteVolume);
function muteVolume () {
if (video.muted) {
video.muted = false;
volCtrl.removeAttribute("fa-volume-up");
volCtrl.setAttribute("class", "fas fa-volume-mute");
}
else {
video.muted = true;
volCtrl.removeAttribute("fa-volume-mute");
volCtrl.setAttribute("class", "fas fa-volume-up");
}
}