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会使浏览器的视频解码器搜索到指定时间位置最近的关键帧，这可能需要一段时间才会显示罕见关键帧的视频。以更高的关键帧速率重新编码视频为我解决了这个问题。

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

Configuring Video Streams for Seeking Performance

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

1 个答案: