title: HTML5 video play and pause triggering
body: <p>I'm not able to trigger video play and pause events. I'm trying with:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function(){
          $(document).delegate('#play','click',function(){
              $('.video')[0].play();
          });
          $(document).delegate('#video-close','click',function(){
              $('.video')[0].pause();
          });
      });
  &lt;/script&gt;
  
  &lt;div class="video centered-content"&gt;
      &lt;a class="circle-canvas close-video" href="javascript:void(0)" id="video-close"&gt;X&lt;/a&gt;
      &lt;video width="63%" height="80%" id="ourvideo" controls&gt;
          &lt;source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"&gt;
          &lt;source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"&gt;
          &lt;source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"&gt;
      &lt;/video&gt;
  &lt;/div&gt;
  &lt;a class="circle-canvas close-video" href="javascript:void(0)" id="play" &gt;play&lt;/a&gt;
  </code></pre>
  
  <p>Any suggestion?</p>