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

you need to also track the play/pause events on the video itself to change the state of your overlay

not the most elegant, but this sets the overlay to just trigger play/pause and handles hiding/showing the button on a separate event that gets triggered based on the video behavior

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

add this to your css file

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

Answer 3

Not sure if this is the most elegant/professional solution but it does the job. I just attached an event listener to the video itself on the play/pause events and toggled the 'playButton' class on/off, which is the class that determines whether that overlay is visible. I also removed those lines from your playPause function since the .onplay event listener will take care of it.

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