title: html5 video redisplay poster image onMouseOut
body: <p>How can I 'stop' a html5 video playback, and revert to poster image? Until <code>this.play()</code> is called, the poster image is showing properly.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;video loop="loop" onMouseOver="this.play();" onMouseOut="this.pause();" poster="/oceans-clip.thumb.jpg"&gt;
      &lt;source src="/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /&gt;
      &lt;source src="/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>This is working as expected, however I want to revert to poster image onMouseOut instead of just pausing the video. What's a good way to do this?</p>