Javascript HTML5视频播放按钮覆盖问题

我正在创建一个视频播放器，无法通过单击我的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>

---

如果您更改JavaScript加载类型No wrap-in，那么它可以工作

---

太棒了，谢谢，你知道如何切换播放按钮吗？还有，没有包装标签，只是JSFIDLE的东西吗？还是我必须在我的网站上对它做点什么？@GiBiT09该选项指定将JavaScript输入页面的位置。onLoad选项在页面加载后加载，即在元素onclick和另一个作用域中引用playPause函数后加载。您也可以在head中扭曲代码，但是您还需要将bunnyVideo初始化放在函数中，因为head加载时元素视频不可用。@GiBiT09 ping。答案足够了吗？那部分答案是肯定的，我试着在我的wordpress中让它工作，但无法让它工作。

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

}