为HTML5视频窗口设置currentTime.onscroll滞后

Question

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

此示例在此方面做得很好，没有任何问题：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

<div id="set-height"></div>
<p id="time"></p>
<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>

但是，当我用自己的视频尝试播放时，视频就会停滞：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

<div id="set-height"></div>
<p id="time"></p>
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
  <source type="video/webm" src="http://philippsokolov.com/fm-4.webm"></source>
  <source type="video/ogg" src="http://philippsokolov.com/fm-4.ogv"></source>
  <source type="video/mp4" src="http://philippsokolov.com/fm-4.m4v"></source>
  <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>

我尝试了不同的视频压缩，但是仍然无法解决问题。

将不胜感激。

Answer 1

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

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

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

配置视频流以寻求性能

Answer 2

我经历了完全相同的事情 \xe2\x80\x94 解决起来多么痛苦！seeked环顾四周后，我注意到只有在事件触发后视频才会发生明显变化。显然，每次更新currentTime（在我的例子中，在任何滚动事件上），它都会启动一个新的搜索过程，这会延迟新的渲染，currentTime直到解决搜索过程。

\n

我通过监听seeking和修复了它seeked事件来修复此问题，并且仅在视频当前未查找 \xe2\x80\x94\xc2\xa0 时才更新 currentTime 让查找过程完成，因此更新不会不断堆积。

\n

这是我的脚本的相关部分：

\n

let seeking = false;\n\nheroVideo.addEventListener('seeking', function() {\n    seeking = true;\n});\n\nheroVideo.addEventListener('seeked', function() {\n    seeking = false;\n});\n\nfunction tick(lastKnownScrollPosition) {\n    if (!seeking) heroVideo.currentTime = lastKnownScrollPosition / 300;\n}\n\nlet ticking = false;\n\nwindow.addEventListener('scroll', function(e) {\n  const lastKnownScrollPosition = window.scrollY;\n\n  if (!ticking) {\n    window.requestAnimationFrame(function() {\n      tick(lastKnownScrollPosition);\n      ticking = false;\n    });\n\n    ticking = true;\n  }\n});\n

\n