Javascript JQuery自定义视频控件拒绝共存

我一直在为我的学校项目制作自定义视频控件，我想添加自定义播放/暂停和声音/静音按钮、进度条和音量滑块。 我遵循iEatWebsites提供的yt视频中播放/暂停和进度条的教程，效果非常好，但一旦我开始向其他元素添加功能，播放/暂停按钮就会拒绝响应，变得不可点击。当我添加功能onclick alert和sound/mute按钮时，它仍然有效，而使用命令行静音视频也仍然有效，所以我不知道问题出在哪里

所有内容都在html中的控件div中：

<header>
              <div class="container">
                  <div class="c-video">
                    <video id="my_vid" class="video" src="video.mp4"></video>
                      <div class="controls">
                          <div class="buttons">
                          <button id="play-pause"></button>
                          </div>
                          <div class="green-bar">  
                          <div class="green-juice"></div> 
                          </div>
                          <div class="buttons2">
                          <button id="sound-mute"></button> 
                          </div>
                        <div class="slidecontainer">
                            <input type="range" min="1" max="100" value="50" class="slider" id="volume">
                        </div>
                      </div>
                    </div>
                </div>
        </header>

---

你需要在按钮上放一些文字，然后开始上课。。给你

<style>
.play::before { content: 'play'; }
.pause::before { content: 'pause'; }
</style>

<button id="play-pause" class="play"></button>

function togglePlayPause() {
    if (btn.className == 'play') {} //Testing what you know
} 

.play：：在{content:'play'；}之前
.pause:：在{content:'pause'；}之前
函数togglePlayPause（）{
if（btn.className=='play'）{}//测试您知道的内容
} 

JS代码中存在语法错误，可能会阻止一切正常工作。 我建议使用适当的代码编辑器和/或设置过梁

第36行的条件中缺少括号。 另外，带有两个参数的prop函数不用于读取。应该是这样的：

if ($("video").prop('muted') === false) {

对于卷事件，您不应该侦听时间更新。 同样，nodeValue不是你所想的。您可能正在寻找：

volume.addEventListener('change', function(e){
    video.volume = e.currentTarget.value / 100;
});

最后，我希望能为您节省一些时间：

var bar = document.querySelector(".green-bar");
bar.addEventListener('click', function(e) {
  video.currentTime = e.offsetX / e.currentTarget.offsetWidth * video.duration;
});

var bar = document.querySelector(".green-bar");
bar.addEventListener('click', function(e) {
  video.currentTime = e.offsetX / e.currentTarget.offsetWidth * video.duration;
});