为HTML5videowindow.onscroll设置currentTime是滞后的

我正在尝试在窗口滚动事件上为html5video设置currentTime。 基本上，我们的想法是在滚动页面时在video时间轴中向前或向后移动。

这个例子在这里做得很好没有问题： http ： //codepen.io/ollieRogers/pen/lfeLc

这是代码：

// select video element var vid = document.getElementById('v0'); //var vid = $('#v0')[0]; // jquery option // pause video on load vid.pause(); // alternative & optimized implementation thanks to http://codepen.io/daveroma/ window.onscroll = function(){ vid.currentTime = window.pageYOffset/400; }; 

 #set-height display block height 13500px #v0 position fixed top 0 left 0 width 100% p font-family helvetica font-size 24px 

但是当我用我自己的video尝试时，video滞后： http ： //codepen.io/futurecrazy/pen/ZWGYBj

这是我的代码：

 // select video element var vid = document.getElementById('v0'); //var vid = $('#v0')[0]; // jquery option // pause video on load vid.pause(); // alternative & optimized implementation thanks to http://codepen.io/daveroma/ window.onscroll = function(){ vid.currentTime = window.pageYOffset/400; }; 

 #set-height display block height 13500px #v0 position fixed top 0 left 0 width 100% p font-family helvetica font-size 24px 

我尝试过不同的video压缩，但仍无法解决问题。

非常感谢任何帮助。

Answer 1

我遇到了类似的问题，问题是video编码。
video关键帧速率较低会导致延迟。

我的猜测是，更改video.currentTime会使浏览器的video解码器搜索到指定时间位置最近的关键帧，这对于具有罕见关键帧的video可能需要一段时间。 以更高的关键帧速率重新编码video为我解决了问题。

请注意，可以使用FFMPEGs -g标志控制关键帧间距。

配置video流以寻求性能