Scrubber is a vanilla JavaScript extension that enables HTML5 video scrubbing by scrolling.

Documentation

• Add scrubber.js
• Create a container, for instance a <div> and slap the scrubber class on there.
• Inside the container, create your HTML5 <video> element
• Done.

Here's an example of the code:

<div class="scrubber">
  <video controls loop poster="http://scrubber.pascalculator.be/img/scrub.jpg">
    <source src="http://scrubber.pascalculator.be/img/scrub.webm">
  </video>
</div>
...
<script src="http://scrubber.pascalculator.be/js/scrubber.js"></script>

which wil result into:

If you want to show the scroll icon, you will need the scrubber css and scroll icon

Known issues

• Doesn't work on mobile (Android)

Other projects

Here are some other projects I've been working on:

• Buienradar scrubber: scrub buienradar precipation by scrolling or swiping
• Spark.io Web Terminal: query your Spark.io core from anywhere on the web
• Scrubber: scrub HTML5 videos by scrolling
• Directory: directory structure visualisation in CSS
• Facade: a browser mockup window in HTML & CSS
• PhrameJs: an MVC framework for Adobe ExtendScript (Photoshop, Illustrator, InDesign)