我正在尝试使用
jquery和css为视频创建两组播放/暂停控件.第一组是在大尺寸的第一个屏幕上,第二个设置在用户向下滚动时在视口中的固定位置,这样用户可以在他们查看网站时收听音频并操作控件无需滚动到顶部.当用户点击暂停时,视频暂停和淡出,暂停按钮淡出,播放按钮变为完全不透明,当用户点击播放时则相反.我有这个工作在jsfiddle和下面的代码中的第一个集合,但是我一直在尝试在过去几个小时找到一种方法来使这两组控件发生这些变化,因此两个集合保持同步(即：当一个暂停按钮淡入淡出,第二组中的按钮也会消失,并且无法取得很大进展.

这是第一组工作的jsfiddle (edited, was missing some css)和jquery：

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
  get: function() {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
  }
})

var vid = document.getElementById("myVideo"),
  pauseButton = document.getElementById("vidpause"),
  playButton = document.getElementById("vidplay");
var vid = document.getElementById("myVideo");
function vidFade() {
  vid.classList.add("stopfade");
}


pauseButton.addEventListener("click", function() {
  vid.classList.toggle("stopfade");
  if (vid.paused) {
    vid.play();
    vidpause.classList.add("full-button");
    vidpause.classList.remove("fade-button");
    vidplay.classList.add("fade-button");
    vidplay.classList.remove("full-button");
  } else {
    vid.pause();
    vidpause.classList.add("fade-button");
    vidpause.classList.remove("full-button")
    vidplay.classList.add("full-button");
    vidplay.classList.remove("fade-button")
  }
})

playButton.addEventListener("click", function() {
  vid.classList.toggle("stopfade");
  if (vid.playing) {
    vid.pause();
    vidplay.classList.add("full-button");
    vidplay.classList.remove("fade-button");
    vidpause.classList.add("fade-button");
    vidpause.classList.remove("full-button");
  } else {
    vid.play();
    vidplay.classList.add("fade-button");
    vidplay.classList.remove("full-button")
    vidpause.classList.add("full-button");
    vidpause.classList.remove("fade-button")
  }
})

我知道getElementById只能使用一个元素,第二个集合使用第一个,我尝试使用getElementByClassName(未显示)或querySelectorAll(下面).

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
  get: function() {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
  }
})

 var vid = document.getElementById("myVideo");
              function vidFade() {
                  vid.classList.add("stopfade");
              }

              var pauseButton = document.querySelectorAll(".vidpause");
              var i;
              for (i = 0; i < pauseButton.length; i++) {
              pauseButton[i].addEventListener("click", function() {
                  vid.classList.toggle("stopfade");
                if (vid.paused) {
                    vid.play();
                        vidpause.classList.toggleClass("full-button");
                        vidpause.classList.remove("fade-button");
                        vidplay.classList.add("fade-button");
                        vidplay.classList.remove("full-button");
                                } 
                else {
                      vid.pause();
                          vidpause.classList.add("fade-button");
                          vidpause.classList.remove("full-button")
                          vidplay.classList.add("full-button");
                          vidplay.classList.remove("fade-button")
                        }
                                                                })
                    }


                var playButton = document.querySelectorAll(".vidplay");
                var i;
                for (i = 0; i < pauseButton.length; i++) {
                playButton[i].addEventListener("click", function() {
                    vid.classList.toggle("stopfade");
                    if (vid.playing) {
                        vid.pause();
                            vidplay.classList.add("full-button");
                            vidplay.classList.remove("fade-button");
                            vidpause.classList.add("fade-button");
                            vidpause.classList.remove("full-button");
                    } else {
                        vid.play();
                            vidplay.classList.add("fade-button");
                            vidplay.classList.remove("full-button")
                            vidpause.classList.add("full-button");
                            vidpause.classList.remove("fade-button")
                            }
                                                                })
                }

当我尝试以上和它的变化时,chrome控制台给我一个错误“vidpause is undefined”.我一直在想也许我调用我的元素的顺序有问题,或者试图循环数组(？)或者在调用类时尝试更改类但是……我很难过.

对此有任何建议会非常有帮助,我对jquery很新.

最佳答案 第一个querySelectorAll返回一个NodeList,因此它没有classList属性,因此错误.

您需要遍历列表并设置属性.您还可以通过向所有播放和暂停按钮添加公共类视频播放和视频暂停来简化代码集

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
  get: function() {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
  }
})

var vid = document.getElementById("myVideo");

function vidFade() {
  vid.classList.add("stopfade");
}

function fadeInOut(fadeIn, fadeOut) {
  [].forEach.call(fadeIn, function(el) {
    el.classList.add('full-button');
    el.classList.remove('fade-button');
  });
  [].forEach.call(fadeOut, function(el) {
    el.classList.remove('full-button');
    el.classList.add('fade-button');
  });
};

var pauseButtons = document.querySelectorAll(".video-pause");
var playButtons = document.querySelectorAll(".video-play");
[].forEach.call(document.querySelectorAll(".video-play, .video-pause"), function(pauseButton) {
  pauseButton.addEventListener("click", function(e) {
    e.preventDefault();
    vid.classList.toggle("stopfade");
    if (vid.paused) {
      vid.play();
      fadeInOut(pauseButtons, playButtons);
    } else {
      vid.pause();
      fadeInOut(playButtons, pauseButtons);
    }
  })
});

video#myVideo {
  transition: 1s opacity;
}
.stopfade {
  opacity: .5;
}
.vidplay {
  opacity: 0.50;
}
.vidpause {
  opacity: 1;
}
/* Play/Pause Main */

.icon-play-main {
  position: absolute;
  top: 165px;
  left: 50px;
  width: 0;
  height: 0;
  border-width: 23px 35px;
  border-style: solid;
  border-color: transparent transparent transparent #ff0;
  /* #666 */
}
.icon-pause-main,
.icon-pause-main:after {
  position: absolute;
  width: 14px;
  height: 45px;
  background-color: #ff0;
  /* #666 */
}
.icon-pause-main {
  top: 165px;
  left: 3.5px;
}
.icon-pause-main:after {
  content: "";
  top: 0;
  left: 20px;
}
/* Play/Pause bottom left */

.playpause {
  top: 230px;
  left: 0px;
  position: fixed;
  x-index: 510;
}
.icon-play {
  position: absolute;
  top: 10px;
  left: 30px;
  width: 0;
  height: 0;
  border-width: 10px 15px;
  border-style: solid;
  border-color: transparent transparent transparent #0cf;
  /* #666 */
}
.icon-pause,
.icon-pause:after {
  position: absolute;
  width: 6px;
  height: 20px;
  background-color: #0cf;
  /* #666 */
}
.icon-pause {
  top: 10px;
  left: 6px;
}
.icon-pause:after {
  content: "";
  top: 0;
  left: 10px;
}
.fade-button {
  opacity: 0.50;
}
.full-button {
  opacity: 1;
}

<video autoplay loop muted id="myVideo">
  <source src="http://hushhushandsecret.com/hhs/jquery/fullpagejs/imgs/flowers.mp4" type="video/mp4">Your browser does not support the video element.
</video>

<a class="video-pause vidpause full-button" href="#"><span class="icon-pause-main"></span></a>
<a class="video-play vidplay fade-button" href="#"><span class="icon-play-main"></span></a>

<div class="playpause">
  <a class="full-button" href="#"><span class="video-pause icon-pause"></span></a>
  <a class="fade-button" href="#"><span class="video-play icon-play"></span></a>
</div>