title: HTML5 Video - On Hover / Off Hover return to poster image?
body: <p>I'm working on an sandbox experiment using html5 video and am wondering how I can get the poster image to display after again once the end user hovers off the video?</p>
  
  <p>I have the video setup so that if you hover over the video can auto play and if you hover off it stops. I would like it to return back to poster image.</p>
  
  <p><em>Javascript</em> </p>
  
  <pre><code>&lt;script&gt;
  
  document.addEventListener('mouseover',hoverVideo,false);
  var vid = document.getElementById('vid1');
  
  function hoverVideo(a)
  {    
      if(a.target == vid)
      {
          vid.play();
          this.addEventListener('mouseout',hideVideo,false);
      }
  
  }
  function hideVideo(e)
  {
      if(e.target == vid)
      {
          vid.pause();
      }
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><em>HTML5</em> </p>
  
  <pre><code>&lt;video id="vid1" width="1000" height="418" 
  poster="poster.png" loop="true" preload="auto"
  controls class="video-js vjs-default-skin"&gt;
  
   &lt;source src="my_video.mp4" type='video/mp4' &gt;
   &lt;source src="my_video.webm" type='video/webm' /&gt;
   &lt;source src="my_video.ogv" type='video/ogg' /&gt;
  
  &lt;/video&gt;    
  </code></pre>