title: Play HTML5 videos forward and backward on hover
body: <p>I've been trying for days to get a specific behaviour on the homepage of my personal website. But I didn't find any good solution yet. Can someone help me please :-)</p>
  
  <p>I have a homepage with a grid of short videos with different durations. I want each of them to <strong>play completely on mouse hover</strong>. On second hover most should replay normally, <strong>but some should play backward</strong>.</p>
  
  <p>I read that playing videos backward was not good in terms of performance because native browser players were not meant for that. So I searched for an alternative and came to the following idea:</p>
  
  <p>Double the duration of those "special" videos so they integrate their forward sequence (1-2-3) and backward sequence (3-2-1) in the same file. On first hover, the video would play its first half, and after that only, on second hover it would play the second half.</p>
  
  <p>Here is a <strong><a href="http://jsfiddle.net/tacotac/v3kur075/1/" rel="nofollow">JSfiddle</a></strong> where I put all elements for testing… but I'm currently stuck with my poor JS skills.</p>
  
  <p>HTML:
       
        
        
      </p>
  
  <pre><code>&lt;video class="forward-backward"&gt;
    &lt;source src="http://tacco.fr/divers/forward-backward.mp4" type="video/mp4"&gt;
    &lt;source src="http://tacco.fr/divers/forward-backward.webm" type="video/webm"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>var figure = $("video").mouseover(hoverVideo);
    function hoverVideo() {
      $(this).get(0).play();
  };
  </code></pre>
  
  <p>It may be a very bad idea in terms of performance (because filesizes are bigger to load), so I'm really open for any others.</p>
  
  <p>Don't hesitate to ask if you have any question.
  Thank you very much :-)</p>
  
  <p>BTW: no more than 5 videos should play at the same time… I don't know how to do that… </p>