.mp4 задержка воспроизведения на chrome

Question

У меня есть видео, которое контролируется пользовательской прокруткой, это очень хорошо работает на сафари, но на chrome оно отстает и переходит точка-точка, а не воспроизводится плавно. Это проблема с моим видео файлом, или это как-то связано с моим chrome?

Ссылка на пример: https://advancedriderwear.com/Updates/Feature-Test/Video/

Код:

HTML:

<div id="set-height"></div>
<div id="time"></div>
<div id="scroll"></div>
<div class="video-stick">
    <video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="Beast_exploding_animation.mp4"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="Beast_exploding_animation.mp4"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="Beast_exploding_animation.mp4"></source>
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
    </video>
</div>

CSS:

body{
    background: black;
}

.space{
    height: 100vh;
    width: 100%;
    background: black;
}

#video-stick{
    position: relative;
    text-align: center'
}

#set-height {
    display: block;
    height: 9000px;
}
  #v0 {
    position: fixed;
    top: 50px;
    height: 80%;

    margin: auto;
  }

  #time {
    position: fixed;
    display: block;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background-color: rgba(0,0,255,0.5);
  }
  #scroll {
    position: fixed;
    display: block;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background-color: rgba(255,0,0,0.5);
  }

JS:

// select video element
    var vid = document.getElementById('v0');
    var time = $('#time');
    var scroll = $('#scroll');
    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
    vid.pause();

    window.onscroll = function(){
        //Set the video position that we want to end up at:
        targetscrollpos = window.pageYOffset/400;

        //move the red dot to a position across the side of the screen
        //that indicates how far we've scrolled.
        scroll.css('top', 10+(window.pageYOffset/5000*windowheight));
    };


    setInterval(function(){  

        //Accelerate towards the target:
        scrollpos += (targetscrollpos - scrollpos)*accelamount;

        //move the blue dot to a position across the side of the screen
        //that indicates where the current video scroll pos is.  
        time.css('top', 10+(scrollpos/5000*400*windowheight));

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

    }, 40);