HTML5 Video Play Button Overlay Issue

Question

I am creating a video player and cannot figure out how to get my video to play by clicking my playButton overlay. Ultimate goal is to get it to play by clicking the button and the button disappearing, when you want to pause you click the video and the play button reappears, but where I stand, I can't even get the video to play when I click the overlay play button.

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

Script

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

}

https://jsfiddle.net/sbtL5bag/

Answer 1

If you change your JavaScript load type No wrap - in <body> then it works.

JSFiddle

HTML5 Video Play Button Overlay Issue

Question

1 answers

solution1
1 ACCPTED 2017-03-16 19:49:32

HTML5 Video Play Button Overlay Issue

Question

1 answers

solution1 1 ACCPTED 2017-03-16 19:49:32

solution1
1 ACCPTED 2017-03-16 19:49:32