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?
You can use Javascript to perform such actions. var myAudio = document. getElementById("myAudio"); var isPlaying = false; function togglePlay() { if (isPlaying) { myAudio. pause() } else { myAudio.
onplay = function() { vid2. pause(); };
The pause() method halts (pauses) the currently playing audio or video. Tip: Use the play() method to start playing the current audio/video.
<video>: The Video Embed element. The <video> HTML element embeds a media player which supports video playback into the document.
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();"
.
Demo:
<video height="200" controls="controls" preload="none" onclick="this.play()"> <source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/5/54/Yawning_kitten.ogv/Yawning_kitten.ogv.480p.vp9.webm"> </video>
On Chromium 89:
onclick="this.play()"
prevents the video from playing again by clicking on the body (rather than controls) after an initial play + pause (clicking on controls still works), which is generally undesirable. This is presumably because the callback makes it play, and then the event propagates and the browser immediately re-pauses it.onclick="this.play()"
would be: initial body click to play on body does not work, but after initial play clicks on body do toggle play/pauseonclick="this.paused ? this.play() : this.pause();"
makes body clicks after the initial play not work neither to play nor pause, presumably for an analogous to what happens with onclick="this.play()"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With