JSFiddle - React, Tailwind, and code Playground

by Ian Hazzard

HTML

<video id="video" tabindex="0" autobuffer preload>
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>

JavaScript

var video = $('#video')[0];

video.currentTime = 0;
var step = 0.15;

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta < 0) {
    
    	video.currentTime+=step;
    
    	//going forward
    }else{
    	//going backwards
      
      video.currentTime-=step;
    }
});