title: Scrubbing HTML5 video
body: <p>I've been looking for a solution where i can "scrub" through HTML5 video.  I haven't found one yet and was about to start writing my own.  But before i do that, i thought it would make some sense to run it past SO first.</p>
  
  <p>Before we get into my approach, see this:  </p>
  
  <p><a href="http://www.kokokaka.com/demo/bluebell_ss10/site">http://www.kokokaka.com/demo/bluebell_ss10/site</a></p>
  
  <p>This site of course is built in Flash but serves as an example of what i would like to achieve using HTML5.</p>
  
  <p>I've experimented with the playbackRate (-1) attribute on the video tag without much luck.  I suspect this is because the encoding (ogg, mp4, vp8) are better suited to forward playback.  </p>
  
  <p>with this, i see two possible approaches:</p>
  
  <ol>
  <li><p>create two videos, one for forward play, and another for backwards play.  this of course doubles the size of any videos which is not ideal.</p></li>
  <li><p>split the video into individual jpg frames and swap out the images.  This would mean i have no sound, but in my particular application, this is not an issue.</p></li>
  </ol>
  
  <p>I feel that the second option is the best suited for my particular application and allows for some flexibility in playback.  What do you think?</p>