title: How to Display the Poster on the video when Video Gets Pause by User
body: <p><br>
  I did some javascript for the video, like when you hover on video then 
  that video will play and when you hover out from video, the video will pause....<br>
  But I want to do more, I want to display the poster on the video when the video gets Pause, the poster I have included to my video attribute..
  And I want to use the same javascript for all the different videos with different posters.<br><br>
  Here is the code which I am using currently.<br></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;video hover&lt;/title&gt;
    &lt;style&gt;
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;video controls loop data-play="Hover" preload="auto" poster="MyPoster.jpg" height="300" width="500" muted="muted"&gt;
      &lt;source src="Myvideo.mp4" type="video/mp4"&gt;
    &lt;/video&gt;
  
  
   &lt;script type="text/javascript"&gt;
  
      var vid=document.getElementsByTagName("video");
      [].forEach.call(vid,function(item){
          item.addEventListener('mouseover',hovervideo,false);
          item.addEventListener('mouseout',hidevideo,false);
  
  
      });
  
      function hovervideo(e)
      {
  
         this.play();
      }
  
      function hidevideo(e)
      {
          this.pause();
  
      }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is JSFiddle :- <a href="https://jsfiddle.net/vpoL6a5w/1/" rel="nofollow noreferrer"><a href="https://jsfiddle.net/vpoL6a5w/1/" rel="nofollow noreferrer">https://jsfiddle.net/vpoL6a5w/1/</a></a></p>