首页 文章

Html5视频滚动视频

提问于
浏览
0

我对视频的滚动控制有问题 . 我拿了这段代码: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 回答

  • 0

    根据列出的第一条评论,它似乎与视频有关 . 但是,要尝试的另一件事是按照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>
    

相关问题