单击 HTML5 视频控件上的播放并没有摆脱我的播放按钮覆盖答案

【问题标题】：Clicking play on HTML5 video controls doesn't get rid of my Play button overlay单击 HTML5 视频控件上的播放并没有摆脱我的播放按钮覆盖
【发布时间】：2017-08-15 01:44:34
【问题描述】：

我的 HTML5 视频播放器有一个错误。我以为我可以轻松修复它，但看起来并不那么容易。当您单击覆盖时，视频播放并且覆盖消失。但我注意到在视频开始时点击 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 id="playButton" class="playButton" onclick="playPause()"></div>
</div>

脚本

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

这是我的小提琴：https://jsfiddle.net/wm3ot3ko/

【问题讨论】：

How to tell if user clicked video element or one of the video controls?的可能重复

标签： javascript html video

【解决方案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);

【讨论】：

:) 您可能想要整理函数名称，但应该非常可靠。我希望 html5 视频对象单独公开控件，既可以将事件绑定到也可以控制样式...

【解决方案2】：

将此添加到您的 css 文件中

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

【讨论】：

我添加了它并没有解决任何问题
如果您将 div 更改为 <div id="playButton" onclick="playPause()"></div> 是否可以解决问题？我不太确定你想要什么。
如果您注意到在小提琴中，如果您按下控件中的小播放按钮（左下方），则叠加层会保留。我希望它消失

【解决方案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";
};

【讨论】：