两组视频控件 - getElementById / querySelectorAll的难度

第一个querySelectorAll返回一个NodeList，所以它没有classList属性，因此错误。

您需要循环访问列表并设置属性。您还可以通过向所有播放和暂停按钮添加通用类video-play和video-pause来简化代码集

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>

将其转换为更干净的jQuery方法，您需要执行以下操作：

为每个视频控件（如 play 和 pause）添加一个额外的泛型类：

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

然后根据需要将 jQuery 泛型类选择器与 $(this) 一起使用，以操作视频和单击的控件：

// create a variable for the video element
var vid = $('#myVideo');
// Function to re-uyse repeated code
// Takes a bool playing - is the video playing
// takes element clicked - the video control element clicked
function vidControls(playing, clicked){
// if the video is playing pause it
if(!playing){
    vid.get(0).pause();
    clicked.parent('a').removeClass('fade-button').addClass('full-button'); // toggle the classes
    clicked.parent('a').prev().removeClass('full-button').addClass('fade-button'); // assume pause always before play
  }else{ // otherwise play it
  vid.get(0).play();
    clicked.parent('a').removeClass('full-button').addClass('fade-button'); // toggle the classes
    clicked.parent('a').prev().removeClass('fade-button').addClass('full-button'); // assume pause always before play
  }
}
// Play button click event
$('.play').click(function(){
    // fade the video in/out as necessary
    vid.toggleClass('stopfade');
  // Re-use repeating code
  vidControls(vid.get(0).paused, $(this));
});
// Pause button click event
$('.pause').click(function(){
    // fade the video in/out as necessary
    vid.toggleClass('stopfade');
    // Re-use repeating code:
  vidControls(vid.get(0).paused, $(this)); 
});

工作 JSFiddle