HTML5视频播放按钮叠加问题

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

<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/

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

JSFiddle

相关内容

最新更新

热门标签：