Scrolling controls for HTML5 video

index.html

#set-height
p#time
video(id="v0",  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.

script.js

// select video element
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // jquery option

// pause video on load
vid.pause();

// alternative & optimized implementation  thanks to http://codepen.io/daveroma/
window.onscroll = function(){
  vid.currentTime = window.pageYOffset/400;
};






/*
Original (old) solution
=======================


// pause video on document scroll (stops autoplay once scroll started)
window.onscroll = function(){
    vid.pause();
  vid.currentTime = window.pageYOffset/400;
};

// refresh video frames on interval for smoother playback
setInterval(function(){
    vid.currentTime = window.pageYOffset/400;
}, 40);

*/

Scrolling controls for HTML5 video.markdown

Scrolling controls for HTML5 video

Forked from Ollie's Pen Scrolling controls for HTML5 video.

A Pen by Hitesh Kumar Sahu on CodePen.

License.

style.css

#set-height  
  display block
  height 13500px
#v0
  position fixed 
  top 0  
  left 0  
  width 100%

p font-family helvetica 
  font-size 24px