title: How can I add click-to-play to my HTML5 videos without interfering with native controls?
body: <p>I'm using the following code to add click-to-play functionality to HTML5 video:</p>
  
  <pre><code>$('video').click(function() {
    if ($(this).get(0).paused) {
      $(this).get(0).play();
    }
    else {
      $(this).get(0).pause();
    }
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Is there a way to select <em>just</em> the video part in the DOM, or failing that, a way to capture clicks to the <em>controls</em> part of the video container, so that I can ignore/reverse the click-to-play functionality when a user presses the pause/play button?</p>