javascript - 如何在HTML5视频上隐藏播放按钮覆盖

在较早的帮助下，我解决了视频播放器中有关通过单击播放视频的问题，但是我无法弄清楚如何在单击时隐藏播放按钮覆盖。任何帮助将不胜感激。

的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 class="playButton" onclick="playPause()"></div>
</div>

脚本

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

function playPause() {
  if (bunnyVideo.paused)
  {
     bunnyVideo.play();
     $(".playButton").toggle();
  }
  else
  {
    bunnyVideo.pause();
    $(".playButton").toggle();
  }
}

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

https://jsfiddle.net/gtoscano/ed9o52k5/2/

最佳答案

您可以在这里：https://jsfiddle.net/ed9o52k5/3/

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