Html5 Video Scroll-Video

Question

Ich habe ein Problem mit der Bildlaufsteuerung von Video. Ich habe diesen Code genommen: 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); 

Und es mit dem Video von codepen in allen Browsern funktionieren, aber wenn ich meinen Test-Video setzen, es ist nicht glatt, versuche ich eine Menge differents Codecs oder Formate (zB mit meinem Test-Video: http://www.dugautiertheo.fr/videoscroll/).

Ich weiß nicht warum, aber es funktioniert gut und sehr glatt auf Safari nur.

Können Sie mir helfen?

Danke

Answer 1

Per ersten Kommentar aufgelistet, es hat etwas mit dem Video zu sein scheint. Eine zusätzliche Sache, die Sie versuchen sollten, wäre die Bereitstellung mehrerer Videoquelldateien nach dem Code, der in copepen.io bereitgestellt wird. Auf diese Weise können Sie den Browser entscheiden lassen, welcher der beste Videotyp/Codec verwendet werden soll. Wie unten gezeigt:

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