我对视频的滚动控制有问题 . 我拿了这段代码: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上运行良好且非常流畅 .
你能帮助我吗 ?
谢谢
1 回答
根据列出的第一条评论,它似乎与视频有关 . 但是,要尝试的另一件事是按照codepen.io中提供的代码提供多个视频源文件,这样您就可以让浏览器决定使用哪种最佳视频类型/编解码器 . 如下所示: