Html5ビデオスクロールビデオ

Question

ビデオのスクロールコントロールに問題があります。私はこのコードを取った：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); 

そして、それはcodepenのビデオとすべてのブラウザで動作しますが、私は私のテスト映像を入れたときに、それは滑らかではありませんが、私は（私のテスト動画と例：http://www.dugautiertheo.fr/videoscroll/）貴様コーデックやフォーマットの多くを試してみてください。

私は理由はわかりませんが、Safariだけでうまく動作しています。

私を助けることができますか？

は、あなたがリストされた最初のコメントパー

Answer 1

、ビデオで何かのように見えるんありがとうございました。しかし、もう1つの試みは、codepen.ioで提供されているコードごとに複数のビデオソースファイルを提供することです。これにより、ブラウザに、使用するビデオタイプ/コーデックを決定させることができます。以下に示すように：

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