HTML5 视频播放按钮覆盖问题答案

【问题标题】：HTML5 Video Play Button Overlay IssueHTML5 视频播放按钮覆盖问题
【发布时间】：2017-08-08 04:19:07
【问题描述】：

我正在创建一个视频播放器，但不知道如何通过单击我的 playButton 叠加层来播放我的视频。最终目标是通过单击按钮和按钮消失来播放它，当您想暂停时单击视频并且播放按钮重新出现，但是我站在哪里，当我单击时我什至无法播放视频叠加播放按钮。

<div class="wrapper">
<video class="video" id="video" loop controls onclick="playPause()">
    <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("video");
function playPause() { 
if (bunnyVideo.paused)
{           
        bunnyVideo.play();
}
  else 
  {
       bunnyVideo.pause();
  }

}

https://jsfiddle.net/sbtL5bag/

【问题讨论】：

标签： javascript html video

【解决方案1】：

如果你改变你的 JavaScript 加载类型 No wrap - in <body> 那么它就可以工作了。

JSFiddle

【讨论】：

非常感谢，知道如何切换播放按钮吗？
也就是没有包装 - 在标签中，只是一个 jsfiddle 的东西吗？还是我必须在我的网站上对其进行特别处理？
@GiBiT09 该选项指定您的 JavaScript 输入页面的位置。 onLoad 选项在页面加载后加载，即在 playPause 函数已在元素 onclick 和另一个范围内引用。您也可以在 head 中扭曲代码，但是您还需要将 bunnyVideo 初始化放在函数内，因为元素 video 在 head 加载时不可用。
@GiBiT09 ping。答案是否足够？
那部分是肯定的，我试图让它在我的 wordpress 中工作，但无法让它工作。