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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）