title: Catch video HTML5 play/stop event
body: <p>How can I listen to the events play/stop/pause of a HTML5 video?
  I tried with the following code:</p>
  <pre><code>$(&quot;video&quot;).on('play',function(){
      //my code here
  });
  </code></pre>
  <p>but it does not work.</p>
  <p>Alternatively I would be fine also intercept the click that stop and start the video (in fact I would prefer), but even this code not works:</p>
  <pre><code>$('video').on('click', function(event) {
      //my code here
  });
  </code></pre>
  <p>I think because often above the video element is placed a div with associated events start and stop, but I do not know how to select via jQuery or Javascript:</p>
  <p>P.S. This code should work on pages that are composed dynamically / not generated by me, so I can not refer the elements indicating their ID or a specific class.</p>
  <p><strong>UPDATE</strong></p>
  <p>I did not realize that the page on which I was testing had a video inside an iframe.
  The syntax is best suited to my needs:</p>
  <pre><code>doc.querySelector(&quot;video&quot;).addEventListener('play', function(e) {
      //my code here
  }, true);
  </code></pre>