Clicking HTML 5 Video element to play, pause video, breaks play button
html, video, youtube
Solution
The simplest form is to use the `onclick` listener:
<video height="auto" controls="controls" preload="none" onclick="this.play()">
<source type="video/mp4" src="vid.mp4">
</video>
No jQuery or complicated Javascript code needed.
Play/Pause can be done with `onclick="this.paused ? this.play() : this.pause();"`.
To keep it from clashing with the video controls on some browsers, call preventDefault on the click event:
`onclick="this.paused ? this.play() : this.pause(); arguments[0].preventDefault();"`
Demo:
<video height="200" controls="controls" preload="none" onclick="this.play();arguments[0].preventDefault();">
<source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/5/54/Yawning_kitten.ogv/Yawning_kitten.ogv.480p.vp9.webm">
</video>
Problem
I'm trying to get the video to be able to play and pause like it does YouTube (Using both the play and pause button, and clicking the video itself.) ``` <video width="600" height="409" id="videoPlayer" controls="controls"> <!-- MP4 Video --> <source src="video.mp4" type="video/mp4"> </video> <script> var videoPlayer = document.getElementById('videoPlayer'); // Auto play, half volume. videoPlayer.play() videoPlayer.volume = 0.5; // Play / pause. videoPlayer.addEventListener('click', function () { if (videoPlayer.paused == false) { videoPlayer.pause(); videoPlayer.firstChild.nodeValue = 'Play'; } else { videoPlayer.play(); videoPlayer.firstChild.nodeValue = 'Pause'; } }); </script> ``` Do you have any ideas why this would break the play and pause control button?