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视频，但是当我放置测试视频时，它不顺畅，我会尝试很多不同的编解码器或格式（例如我的测试视频：{{3} }）。

我不知道为什么，但它只在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>

Html5视频滚动视频

1 个答案: