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).g         


        

Answer 1

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.