title: Controling HTML5 video with jQuery
body: <p>I'm trying to create control buttons using jQuery for my html5 video, which is hosted locally. However I can't seem to get the buttons to work. I have tried different methods of coding but seem to work.</p>
  
  <pre><code>$(function(){
      var video = $('#video').get(0);
  
      $(document).delegate('#play-button', 'click', function() {
          video.load();
          video.play();
          $('#play-button').addClass('hide');
      });
  
      $(document).delegate('#pause', 'click', function() {
          if (video.play() === true) {
              video.pause();
          } else {
              $('#pause &gt; img').attr('src', 'image/play.png');
              video.play();
          }
      });
  
      $(document).delegate('#stop', 'click', function() {
          video.stop();
          video.currentTime = 0;
      });
  });
  </code></pre>
  
  
  
  <pre><code>&lt;div id="video-controls"&gt;
      &lt;button type="button" role="button" id="play-button"&gt;&lt;img src="&lt;?php echo get_template_directory_uri () ?&gt;/images/play.png" alt="play"&gt;&lt;/button&gt;
      &lt;button type="button" role="button" id="pause"&gt;&lt;img src="&lt;?php echo get_template_directory_uri () ?&gt;/images/pause.png" alt="pause"&gt;&lt;/button&gt;
      &lt;button type="button" role="button" id="stop"&gt;&lt;img src="&lt;?php echo get_template_directory_uri () ?&gt;/images/stop.png" alt="stop"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I'm trying to do is show a play button in the middle of the video and once clicked it will play the video but then hide. So to pause and stop the video the user will need to hover over the video and the controls will appear.</p>
  
  <p>Any advice will be appreciated. Thanks for taking the time to look at my question. </p>