How can I add click-to-play to my HTML5 videos without interfering with native controls?

Question

I'm using the following code to add click-to-play functionality to HTML5 video:

$('video').click(function() {
  if ($(this).get(0).paused) {
    $(this).get(0).play();
  }
  else {
    $(this).get(0).pause();
  }
});

It works okay except that it interferes with the browser's native controls: that is, it captures when a user clicks on the pause/play button, immediately reversing their selection and rendering the pause/play button ineffective.

Is there a way to select just the video part in the DOM, or failing that, a way to capture clicks to the controls part of the video container, so that I can ignore/reverse the click-to-play functionality when a user presses the pause/play button?

Answer 1

You could add a layer on top of the video that catches the click event. Then hide that layer while the video is playing.

The (simplified) markup:

<div id="container">
    <div id="videocover">&nbsp;</div>
    <video id="myvideo" />
</div>

The script:

$("#videocover").click(function() {
    var video = $("#myvideo").get(0);
    video.play();

    $(this).css("visibility", "hidden");
    return false;
});

$("#myvideo").bind("pause ended", function() {
    $("#videocover").css("visibility", "visible");
});

The CSS:

#container {
    position: relative;
}

/*
    covers the whole container
    the video itself will actually stretch
    the container to the desired size
*/
#videocover {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Answer 2

I know this is an old question but I ran into the same issue and found an other solution! Playing the video on click and also pause it on click. But as the original poster I ran into problems with the controls. Solved the issue with jquery like this:

$("video").click(function (e) {
    if(e.offsetY < ($(this).height() - 36)) // Check to see if controls where clicked
    {
        if(this.paused)
            this.play();
        else
            this.pause();
    }
});

I check the offset in the click and if it is over the controls my play/pause functions doesn't do anything.

Answer 3

You could try event.stopPropagation and see if that works. Though I think that would either stop the native controls from working, or just not do anything.

$('video').click(function(event) {
  event.stopPropagation();
  if ($(this).get(0).paused) {
    $(this).get(0).play();
  }
  else {
    $(this).get(0).pause();
  }
});

If the browser considers the native controls and video all part of the same element (and I believe they do) you're probably out of luck. jQuery's event.target wouldn't allow you to tell the difference between a click on the video and a click on the controls.

So I think your best option is to build your own controls (old tutorial, still pretty straight forward). Or ask the browser devs to make a click on the video play/pause when controls are enabled. Seems like it should do that by default.

Answer 4

Torsten Walter's solution works well and it's a fairly elegant solution to the problem, and it's probably the best way to handle it, even if it doesn't handle click-to-pause. However, his solution got me thinking about a hacky way to do it, and I came up with this:

Markup

<div id="container">
  <div id="videocover">&nbsp;</div>
  <video id="myvideo" />
</div>

JavaScript

$('#videocover').click(function(event) {
  var video = $('#myvideo')[0];
  if (video.paused) {
    video.play();
  }
  else {
    video.pause();
  }
  return false;
});

CSS

#container {
  position: relative;
}

#videocover {
  position: absolute;
  z-index: 1;
  height: 290px; /* Change to size of video container - 25pxish */
  top: 0;
  right: 0;
  bottom: 0;
  left;
}

Basically, it keeps the clickable cover up all the time to handle the click-to-play/click-to-pause functionality, but makes sure the cover doesn't overlap with the controls at the bottom of the video.

This is, of course a kludge, as it:

• assumes all browsers place the controls in the same area, and that the controls are the same height
• requires specifying the height of the video container in CSS
• prevents the controls from appearing when the mouse hovers over the video

But I figured I'd put it out there.

Answer 5

Great answers here. Thank you for these. Here's a trick I figured out for making controls clickable, all jQuery.

$('#video_player').click(function(e){

    var y = e.pageY - this.offsetTop;

    //Subtract how much control space you need in y-pixels.
    if(y < $(this).height() - 40) 
    {
        //$(this).get(0).play();
        //... what else?
    }

});