设置HTML5视频window.onscroll的currentTime滞后 [英] Setting currentTime for HTML5 video window.onscroll is lagging

问题描述

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

I'm trying to set the currentTime for the html5 video on window scroll event. Basically the idea is to move forward or backward in the video timeline as you scroll the page.

此示例在此方面做得很好，没有问题: http://codepen.io/ollieRogers/pen/lfeLc

This example here is doing it nicely without a problem: 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

But when I try it with my own video, the video lags: 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>

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

I've tried different video compressions but still cant fix the issue.

非常感谢您的帮助.

推荐答案

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

I ran into a similar problem, the issue was the video encoding.
Having a low video keyframe rate causes the lag.

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

My guess is that changing video.currentTime makes the browser's video decoder search for the closest keyframe to the specified time position, and this can take a while on videos with rare keyframes. Reencoding the video with higher keyframe rate fixed the problem for me.

请注意，关键帧间隔可以通过FFMPEGs -g标志进行控制.

Note that keyframe spacing can be controled with FFMPEGs -g flag.

配置视频流以用于寻求表现

这篇关于设置HTML5视频window.onscroll的currentTime滞后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！