Clicking play on HTML5 video controls doesn't get rid of my Play button overlay

Question

My HTML5 video player has a bug. I thought I could fix it easily but it is not looking to be that easy. When you click the overlay the video plays and the overlay disappears. But I noticed at the start of the video clicking play (not my overlay) on HTML5 video controls doesn't get rid of my play button overlay

HTML

<div class="video-wrapper">
  <video class="video" id="bVideo" loop controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  </video>
  <div id="playButton" class="playButton" onclick="playPause()"></div>
</div>

Script

var bunnyVideo = document.getElementById("bVideo");

function playPause() {
  var el = document.getElementById("playButton");
  if (bunnyVideo.paused) {
    bunnyVideo.play();
    el.className ="";
  } else {
    bunnyVideo.pause();
    el.className = "playButton";
  }
}

bunnyVideo.addEventListener("click", playPause, false);

Here is my fiddle: https://jsfiddle.net/wm3ot3ko/

Answer 1

您还需要跟踪视频本身的播放/暂停事件，以更改叠加层的状态

不是最优雅的，但是这会将叠加设置为仅触发播放/暂停，并处理隐藏/显示按钮，在基于视频行为触发的单独事件上

var el = document.getElementById("playButton");
function playPause() {
  if (bunnyVideo.paused) {
    bunnyVideo.play();
  } else {
    bunnyVideo.pause();
  }
}
function playPause2() {
  if (!bunnyVideo.paused) {
    el.className ="";
  } else {
    el.className = "playButton";
  }
}

bunnyVideo.addEventListener("click", playPause, false);
bunnyVideo.addEventListener("play", playPause2, false);
bunnyVideo.addEventListener("pause", playPause2, false);

Answer 2

将此添加到您的css文件

#playButton {display: none; }
#playButton.playButton {display: inline; }

Answer 3

不确定这是否是最优雅/专业的解决方案，但它确实能够胜任。我只是在播放/暂停事件中为视频本身附加了一个事件监听器，并打开/关闭'playButton'类，这是确定该叠加是否可见的类。我也从你的playPause函数中删除了这些行，因为.onplay事件监听器会处理它。

var bunnyVideo = document.getElementById("bVideo");
var el = document.getElementById("playButton");

function playPause() {

  if (bunnyVideo.paused) {
    bunnyVideo.play();
  } else {

    bunnyVideo.pause();
  }
}

bunnyVideo.addEventListener("click", playPause, false);

bunnyVideo.onplay = function() {
    el.className ="";
};

bunnyVideo.onpause = function() {
    el.className ="playButton";
};