Scrub video on scroll (apple.com esque) – stutters tremendously
<p>Trying to implement a similar functionality that Apple's been using lately for the MacBook, iPhone and most lately <a href="http://www.apple.com/macbookpro" rel="nofollow noreferrer">MacBook Pro product page</a>.</p>

<p>If you check out the MBP product page you'll notice that the screen and Touch Bar is animating when scrolling. That is infact a video.</p>

<p>I'm having troubles adopting this as the video seems to stutter alot. In my case there's 4 videos, if I cut it down to 1 video it'll work better, but still not 100%.</p>

<p>I'm curious what methods / tactics that can be applied here to make it flow better.</p>

<p>Will putting the video files as blobs make it better?
Better to convert video to a series images work with that instead? </p>

<p><a href="https://output.jsbin.com/ceqahiqiso" rel="nofollow noreferrer"><strong>Demo</strong></a>.</p>

<p>The code in question here:</p>

<pre><code>// select video element
var vid0 = document.getElementById('v0');
var vid1 = document.getElementById('v1');
var vid2 = document.getElementById('v2');
var vid3 = document.getElementById('v3');
var windowheight = $(window).height()-20;

var scrollpos = window.pageYOffset/400;
var targetscrollpos = scrollpos;
var accel = 0;

// ---- Values you can tweak: ----
var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.

// pause video on load
vid0.pause();
vid1.pause();
vid2.pause();
vid3.pause();

window.onscroll = function(){
  targetscrollpos = window.pageYOffset/400;
};


setInterval(function(){   
  scrollpos += (targetscrollpos - scrollpos)*accelamount;

  //update video playback
  vid0.currentTime = scrollpos;
  vid0.pause();

  vid1.currentTime = scrollpos;
  vid1.pause();

  vid2.currentTime = scrollpos;
  vid2.pause();

  vid3.currentTime = scrollpos;
  vid3.pause();

}, 40);
</code></pre>