jQuery自定义视频控件拒绝共存

如何解决jQuery自定义视频控件拒绝共存

我一直在为学校项目开发自定义视频控件，我想添加自定义播放/暂停和声音/静音按钮，进度条和音量滑块。 我按照iEatWebsites的yt video的播放/暂停和进度栏上的教程进行操作，效果很好，但是一旦我开始向其他元素添加功能，播放/暂停按钮就会停止反应，变得不可单击。当我添加带有声音/静音按钮的onclick警报功能时，它仍然可以正常工作，而仅通过命令行将视频静音也可以正常工作，所以我不知道问题出在哪里

所有内容都在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>

和我的.js文件：

var video = document.querySelector(".video");
var juice = document.querySelector(".green-juice");
var btn = document.getElementById("play-pause");
var butn = document.getElementById("sound-mute");
var volume = document.querySelector("#volume")


function togglePlayPause() {
    if (video.paused) {
        btn.className = 'pause';
        video.play();
    } else {
        btn.className = "play";
        video.pause();
    }
};

btn.onclick = function() {
togglePlayPause();
};



video.addEventListener('timeupdate',function(){
var juicePos = video.currentTime / video.duration;
juice.style.width = juicePos * 100 + "%";
    if(video.ended){
       btn.className = "play";
       }
});


$("video").prop('muted',false); //mute

function videoMute() {
    if $("video").prop('muted',false) {
        $("video").prop('muted',true);
        butn.className = "mute";
    } else {
        butn.className = "sound";
        $("video").prop('muted',false);
    }
};


butn.onclick = function() {
   videoMute();
};

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

解决方法

您需要在按钮和开始课程上添加一些文本。.

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

,

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

在第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;
});