title: Show poster image or pause button when HTML5 video is paused?
body: <p>Hi I'm coding a local site for an iPad and have a video without controls that plays and pauses when clicked on. Is it possible to show the poster image when the video is paused? Or show a pause button in the center? Here's the code I have for playing and pausing: </p>
  
  <pre><code>&lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
  window.onload=function(){
  var overlay = document.getElementById('video-overlay');
  var video = document.getElementById('video');
  var videoPlaying = false;
  overlay.onclick = function() {
  if (videoPlaying) {
      video.pause();
      videoPlaying = false;
  }
  else {
      video.play();
      videoPlaying = true;
  }
  }
  }//]]&gt;  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>and the HTML for the video</p>
  
  <pre><code>&lt;div id='video-overlay'&gt;&lt;/div&gt;
  &lt;video width="768" height="432" poster="thumbnail2.jpg" id='video'&gt;
  &lt;source src="PhantomFuse3_TechVideo_h264.mp4"  type="video/mp4"&gt;
  &lt;/video&gt;
  </code></pre>