Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Clicking HTML 5 Video element to play, pause video, breaks play button

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?

like image 622
user2698522 Avatar asked Aug 20 '13 04:08

user2698522


People also ask

How do I add a play pause button in HTML?

You can use Javascript to perform such actions. var myAudio = document. getElementById("myAudio"); var isPlaying = false; function togglePlay() { if (isPlaying) { myAudio. pause() } else { myAudio.

How do you pause a video when another video play button is clicked?

onplay = function() { vid2. pause(); };

Which is the element used to pause and play the video?

The pause() method halts (pauses) the currently playing audio or video. Tip: Use the play() method to start playing the current audio/video.

What is the correct HTML5 element for playing video files?

<video>: The Video Embed element. The <video> HTML element embeds a media player which supports video playback into the document.


1 Answers

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.
  • the default behavior without 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/pause
  • onclick="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()"
like image 114
oabarca Avatar answered Sep 24 '22 08:09

oabarca