title: How to listen for when HTML5 video stops playing in jQuery?
body: <p>I found this <a href="http://jsfiddle.net/leongaban/yvne6fnt/" rel="nofollow">similar question here</a>, however the answer did not work in my case.</p>
  
  <p><strong>My JsFiddle: <a href="http://jsfiddle.net/leongaban/yvne6fnt/" rel="nofollow">http://jsfiddle.net/leongaban/yvne6fnt/</a></strong></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;"&gt;
  &lt;video id="hero_video" controls="" autoplay="autoplay" preload poster="http://media.w3.org/2010/05/sintel/poster.png" style="width:100%; height:100%"&gt;
      &lt;source id="mp4" src="http://leongaban.com/v6/videos/clouds.mp4" type="video/mp4"&gt;
    &lt;source id="webm" src="http://leongaban.com/v6/videos/clouds.webm" type="video/webm"&gt;
    &lt;source id="ogv" src="http://leongaban.com/v6/videos/clouds.ogv" type="video/ogg"&gt;
    &lt;p&gt;Your user agent does not support the HTML5 Video element.&lt;/p&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p></p>
  
  <p>JS</p>
  
  <pre><code>$("#hero_video").bind('stop', function(e) {
      console.log('stopped');
      alert('stopped');
  }, true);
  
  /*
  $("video").bind('stop', function(e) {
      console.log('stopped');
      alert('stopped');
  }, true);
  */
  </code></pre>