我坐在其中一个带视频背景的bigass滚动网站上。视频在chrome，safari和firefox中的表现非常糟糕。我把项目放在codepen中让你看到问题。
我尝试将视频换成另一个，我尝试了60fps版本和24fps版本。
我认为问题可能出在这一行（JS中的88）：
$j('#v0')[0].currentTime = myPageoffset/500;
这是来自这个例子：http://codepen.io/anon/pen/hfaLE有人可以向我解释为什么他选择将这个职位划分400？
我做错了什么？
答案 0 :(得分：1)
完全基于我的观察，这不是为了播放视频，而是将其用作动态背景，在页面滚动时更新。
通过滚动事件搜索视频来播放视频不能说是顺畅的。
除非问题是它在帧中跳得太快。那么答案的其余部分应该澄清为什么会这样。
在旁注中，我正在运行Firefox 40.0.3，而第二个codepen没有显示视频，控制台返回此信息：
Specified "type" attribute of "video/webm; codecs=vp8, vorbis" is not supported. Load of media resource http://randlerbank.de/video_1_3s_24fps_720p.webm failed.
Specified "type" attribute of "video/ogg; codecs=theora, vorbis" is not supported. Load of media resource http://randlerbank.de/video_1_3s_24fps_720p.ogv failed.
Specified "type" attribute of "video/mp4; codecs=avc1.42E01E, mp4a.40.2" is not supported. Load of media resource http://randlerbank.de/video_1_3s_24fps_720p.mp4 failed.
删除type元素中source元素的video属性可解决此问题。
这可能只是编码问题。 ogv版本的视频似乎比webm运行得更好，mp4本身似乎比[I][P][P][P][P]
运行得更好。
如序言中所述，通过搜索播放视频并不是一个好主意。根据播放器获取帧的方式，这可能会引入一些开销和故障，尤其是在关键帧间隔较大的视频上。
我不会详细介绍视频压缩，但一个基本的例子就是：
[I][P]是一个关键帧，它具有显示图片所需的所有数据，就像单个图像一样，例如jpeg或png。 B是帧间帧，取决于前一帧。它只包含有关图片的部分数据。这种依赖性一直持续到前一个关键帧。
如果您尝试直接访问此示例的第6帧，则必须获取最近的前一个关键帧，然后在此之后的每个帧间帧，直到达到所需的帧，同时在每帧重建图片，基本上在内存中播放所有6帧只显示最后一帧。
我不会进入jQuery.fx.interval = 1000 / framerate;
帧，这会让事情变得更糟。
有关详细信息，请参阅Video compression picture types on Wikipedia。
这种机制是使数字视频高压缩成为可能的一个重要部分，这是寻求单个帧的明显缺点，这需要从所请求帧的关键帧进一步解码越来越多的帧。
在常规播放时，最后一帧可能会保留在内存中以供参考，但搜索不是播放，播放器尝试重建整个链条的可能性很大。
根据关键帧间隔，压缩类型，压缩级别和处理器的功率，此过程可以从不可见到显示为幻灯片（具有宏块预测）。
如果您想最大限度地减少此问题，最好使用仅包含关键帧的视频，价格更高。
或者您可以通过根据视频的当前时间戳设置滚动位置来反转逻辑。
Jquery有一个名为jQuery.fx.interval的选项，您可以将其设置为视频帧率的毫秒等效值，以避免在滚动动画中进行不必要的函数调用。
Format : WebM
Format version : Version 2
File size : 1.93 MiB
Duration : 34s 178ms
Overall bit rate mode : Variable
Overall bit rate : 473 Kbps
返回：数字
描述：动画触发的速率（以毫秒为单位）。
版本添加：1.4.3
可以操纵此属性以调整动画运行的每秒帧数。默认值为13毫秒。将这个数字设置得更低可以使动画在更快的浏览器（例如Chrome）中运行更顺畅，但这样做可能会对性能和CPU产生影响。
由于jQuery使用一个全局间隔，因此不应运行任何动画，或者应停止所有动画以使此属性的更改生效。
但这很难解决根本问题。
MediaInfo有关于第一个视频文件的说法：
34s 178ms请注意13500px的持续时间。
该codepen中的CSS将文档的高度设置为#set-height {
display: block;
height: 13500px;
}
：
13500 / 400 = 33.75
让我们做一些简单的算术：
33.75好吧，34s 178ms看起来非常接近2s 850ms的视频时长。
我的结论是文档的高度与视频的持续时间相匹配，就像一种垂直搜索栏。
与此同时，您的codepen使用的视频的持续时间为virtualScrollbar，3000px的高度为500，而您的分隔符为3000 / 500 = 6
，因此：
400您的垂直搜索栏的持续时间为6秒，这就是当滚动条大约是文档高度的一半时，视频到达终点的原因。
至于为什么height:6000px，这可以被视为灵敏度设置。使用鼠标滚轮滚动文档会跳过1个像素以上。更高的灵敏度（并且不要忘记调整页面高度）将在视频中做出更小的步骤。
60秒长，24fps视频（1440帧）的示例：
100敏感度100 / 100 = 1 = 60秒
200 / 100 = 2，跳1秒，24帧400 / 100 = 4，跳跃2秒，48帧height:24000px，跳跃4秒，96帧 400敏感度100 / 400 = 0.25 = 60秒
200 / 400 = 0.5，跳跃0.25秒，6帧400 / 400 = 1，跳跃0.5秒，12帧