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

Question

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     lt video width  600  height  409  id  videoPlayer  controls  controls  gt    lt  -- MP4 Video -- gt    lt source src  video mp4  type  video mp4  gt   lt  video gt     lt script gt      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                      lt  script gt    Do you have any ideas why this would break the play and pause control button

User · Answer

The simplest form is to use the onclick listener    lt video height  auto  controls  controls  preload  none  onclick  this play    gt    lt source type  video mp4  src  vid mp4  gt   lt  video gt    No jQuery or complicated Javascript code needed   Play Pause can be done with onclick  this paused   this play     this pause

User · Answer

I had countless issues doing this but finally came up with a solution that works   Basically the code below is adding a click handler to the video but ignoring all the clicks on the lower part  0 82 is arbitrary but seems to work on all sizes           video   click function e               get click position          var clickY    e pageY -   this  offset   top           var height   parseFloat    this  height                  avoids interference with controls         if y  gt  0 82 height  return              toggles play   pause         this paused   this play     this pause

User · Answer

Adding return false  worked for me   jQuery version     document  on  click     video-id   function  e        var video     this  get 0       if  video paused     false            video pause          else           video play               return false        Vanilla JavaScript version   var v   document getElementById  videoid    v addEventListener       play        function              v play                false    v onclick   function         if  v paused            v play          else           v pause               return false

User · Answer

Not to bring up an old post but I landed on this question in my search for the same solution  I ended up coming up with something of my own  Figured I d contribute   HTML    lt video class  video  gt  lt source src    gt  lt  video gt    JAVASCRIPT   JQUERY       video   click function   this paused this play   this pause

User · Answer

must separate this code to work well  or it well pause and play in one click       video   click function   this played   this pause             video   click function   this paused   this play

User · Answer

The problem appears to be internal bubbling within the  lt video gt  element     so when you click on the  Play  button the code triggers and then the play button itself get triggered     I couldn t find a simple  reliable  way to stop the click bubbling through  logic tells me there should be a way  but    it escapes me right now   Anyway  the solution I found to this was to put a transparent  lt div gt  over the video sized to fit down to where the controls appear    so if you click on the div then your script controls play pause but if the user clicks on the controls themselves then the  lt video gt  element handles that for you   The sample below was sized for my video so you may need to juggle sizes of the relative  lt div gt s but it should get you started   lt div id  vOverlay  style  position relative  width 600px  height 300px  z-index 2   gt  lt  div gt   lt video style  position relative  top -300px  z-index 1 width 600px height 340px   width  600  height  409  id videoPlayer controls  controls  gt   lt source src  video mp4  type  video mp4  gt   lt  video gt    lt script gt      var v   document getElementById  videoPlayer        var vv   document getElementById  vOverlay         lt  -- Auto play  Half volume -- gt      v play       v volume   0 5      v firstChild nodeValue    Play         lt  -- Play  Pause -- gt      vv addEventListener  click  function e           if   v paused                console log  pause playback                v pause                v firstChild nodeValue    Pause             else               console log  start playback               v play                v firstChild nodeValue    Play                        lt  script gt

User · Answer

How about this one  lt video class  quot play-video quot  muted onclick  quot this paused this play   this pause    quot  gt      lt source src  quot  quot  type  quot video mp4 quot  gt   lt  video gt

User · Answer

Following up on ios-lizard s idea   I found out that the controls on the video are about 35 pixels   This is what I did     this  on  click   function event        console log  clicked        var offset     this  offset        var height     this  height        var y    event pageY - offset top - height    -1      if  y  gt  35            this paused   this play     this pause                Basically  it finds the position of the click relative to the element   I multiplied it by -1 to make it positive   If the value was greater than 35  the height of the controls  that means that the user click somewhere else than the controls  Therefore we pause or play the video

User · Answer

I had this same problem and solved it by adding an event handler for the play action in addition to the click action  I hide the controls while playing to avoid the pause button issue        var v   document getElementById  videoID        v addEventListener          play              function                   v play                          false        v onclick   function           if  v paused            v play            v controls null          else           v pause            v controls  controls                    Seeking still acts funny though  but at least the confusion with the play control is gone  Hope this helps   Anyone have a solution to that

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

Examples related to html

Examples related to video

Examples related to youtube