Question

我真的是javascript新手，并且正在使用js制作一些自定义视频控件。我有一个带静音/取消静音图标的span元素，将鼠标悬停在子元素上时，它会出现在输入范围栏上，以选择所需的valume级别。问题是，每当我单击子元素（输入类型范围栏）时，父元素的图标都会更改，并且每次单击时音量都会静音或取消静音。我该如何解决？

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

事件监听器：

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

Screenshot

Answer 1

您的主要问题：

您的input被包裹在span内-因此，在输入时单击事件会冒泡直到父SPAN触发静音。

更好的自定义视频事件处理：

我将使用 older fa图标，但可以根据新的fas规范随意修改CSS。
JavaScript示例非常容易解释，但是如果遇到问题，请随时寻求指导！

不要错过新引入的.is-muted和.is-paused CSS类！
这就是技巧和the JS's classList.toggle()

遵循以下规则：

自定义UI 元素应仅操作video元素属性。
自定义UI元素的外观/样式应仅由events raised by the video element处理：

const video   = document.getElementById('video');
const playBtn = document.getElementById('playBtn');
const muteBtn = document.getElementById('muteBtn');
const volBar  = document.getElementById('volBar');

// CUSTOM UI ELEMENTS EVENTS
// They should only change the `video` properties! 
// REMEMBER: we don't handle the UI appearance here
playBtn.addEventListener('click', () => {
  video[video.paused?'play':'pause']();  
});
muteBtn.addEventListener('click', () => {
  if (!video.volume) return;  // Do nothing if there's no volume whatsoever
  video.muted = !video.muted; // Toggle muted state
});
volBar.addEventListener('input', (evt) => {
  video.volume = evt.target.value; 
});

// VIDEO EVENTS - AND UI STYLES
// Triggered on video property value change
// 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: Handle also 'progress', 'ratechange', etc...

function handlePlayPauseUI () {
  playBtn.classList.toggle('is-playing', !video.paused);
}
function handleVolumeUI() {
  volBar.value = video.muted ? 0 : video.volume;
  muteBtn.classList.toggle('is-muted', video.muted || !video.volume);
}

video {display: block; max-width: 500px;}

.fa {
  user-select: none;
  cursor: pointer;
}

.fa.is-muted:before{           /* I used .fa, you use .fas */
  font-family: "FontAwesome";  /* Fix also the family name if needed */
  content: "\f026";            /* HEX for the "mute" icon (find yours in the cheatsheet CSS docs)*/
}

.fa.is-playing:before {
  font-family: "FontAwesome";
  content:"\f04c";             /* set here the HEX for pause icon */
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<video id="video" autobuffer controls>
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
</video>

<span id="playBtn" class="fa fa-fw fa-play"></span>
<span id="muteBtn" class="fa fa-fw fa-volume-up"></span>
<input id="volBar" type="range" value="1" min="0" max="1" volume="1" step="0.1">

由于上述方法，如果您操作video默认的UI处理程序或自定义UI的处理程序，它没有任何作用。
吸取了这一教训之后，现在欢迎您添加缺少的'progress'，'ratechange'和其他VideoElement事件功能，最后从HTML controls元素中删除video属性。< / p>

Js自定义视频控件。静音视频输入范围元素

1 个答案:

您的主要问题：

更好的自定义视频事件处理：