Html5 video Scroll video

Question

I've a problem with the scroll control of video. I took this code : http://codepen.io/ollieRogers/pen/lfeLc/ .

var frameNumber = 0, // start video at frame 0
// lower numbers = faster playback
playbackConst = 500, 
// get page height from video duration
setHeight = document.getElementById("set-height"), 
// select video element         
vid = document.getElementById('v0'); 
// var vid = $('#v0')[0]; // jquery option

// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
    setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});


// Use requestAnimationFrame for smooth playback
function scrollPlay(){  
    var frameNumber  = window.pageYOffset/playbackConst;
    vid.currentTime  = frameNumber;
    window.requestAnimationFrame(scrollPlay);
}

window.requestAnimationFrame(scrollPlay);

And it work in all browsers with the video of codepen but when I put my test video, it's not smooth, I try a lot of differents codecs or formats (example with my test video : http://www.dugautiertheo.fr/videoscroll/ ).

I don't know why but it work fine and very smooth on Safari only.

Can you help me ?

Thank you

Answer 1

Per the first comment listed, it does appear to be something with the video. However, one additional thing to try would be to supply multiple video source files per the code provided in codepen.io this way you let the browser decide what is the best video type/codec to use. As shown below:

<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>

Answer 2

Problems arise, when grabing single frames in an highly compressed video container format like .mp4 etc with js. Our solution was to provide the video as a .json in a lottie animation: scroll video example

You can check the source code.