Movie Mouse Move X

Move Mouse Right Left Play Movie

by Marius Jopen

HTML

<video id="v0" tabindex="0" autobuffer="autobuffer" preload="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>

CSS

#v0 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

JavaScript

$(document).on("mousemove", function scollPlay(event) {

  var frameNumber = 0,
      playbackConst = 100,
      vid = document.getElementById('v0');
  var mouseX = event.pageX;
  var duration = vid.duration;
  var frameNumber = mouseX / playbackConst;

  vid.currentTime = frameNumber;
  

});

window.requestAnimationFrame(scollPlay);