Html5 视频 滚动视频 [英] Html5 video Scroll video

问题描述

视频的滚动控制有问题.我拿了这个代码:http://codepen.io/ollieRogers/pen/lfeLc/.

I've a problem with the scroll control of video. I took this code : 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/).

And it work in all browsers with the video of codepen but when I put my test video, it's not smooth, I try a lot of differents codecs or formats (example with my test video : http://www.dugautiertheo.fr/videoscroll/).

我不知道为什么，但它仅在 Safari 上运行良好且非常流畅.

I don't know why but it work fine and very smooth on Safari only.

你能帮我吗?

谢谢

推荐答案

根据列出的第一条评论，它似乎与视频有关.但是，要尝试的另一件事是根据 codepen.io 中提供的代码提供多个视频源文件，这样您就可以让浏览器决定要使用的最佳视频类型/编解码器.如下图:

Per the first comment listed, it does appear to be something with the video. However, one additional thing to try would be to supply multiple video source files per the code provided in codepen.io this way you let the browser decide what is the best video type/codec to use. As shown below:

<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 视频 滚动视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！