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

根据列出的第一条评论，它看起来确实与视频有关。但是，要尝试的另一件事是为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>