使用 currentTime 时视频滞后

Question

我有一个简单的 HTML 页面，我在页面上播放视频。我使用滚动条作为搜索栏。换句话说，只要用户滚动，视频就会播放。

我已经在几个地方看到过这种效果，并想自己创建它。我写的脚本功能齐全，但有一个小问题：视频本身。

示例中的视频运行流畅，但我创建的视频却滞后。我似乎无法弄清楚原因。我尝试了 FPS、分辨率、比特率的不同组合，但它们没有帮助。

我能找到的视频之间的唯一区别是，当我播放示例中的视频时，我可以在 MPC (K-Lite) 上查找任何帧。我只能在我创建的视频中寻找 3-4 帧。所以问题可能与此有关。我不知道。如果是这样，我需要一种方法来使视频完全可查找。我怎么做？

https://akinuri.github.io/sticky-scrollable-video/（在线演示）
https://github.com/akinuri/sticky-scrollable-video（repo，查看详情）
https://www.audi。 com.tr/tr/web/tr/modeller/a8/a8-l.html（粘性可滚动视频）
codepen.io/ollieRogers/pen/lfeLc（可滚动视频）

在线演示播放流畅/可搜索的视频（来自奥迪）。要查看视频之间的差异，您必须从 GitHub 下载该项目。两个视频（Audi 和 Chrome_ImF.ogv）流畅/可搜索。其他两个（Chrome_icon，卧室.mp4）有问题/滞后（只有少数帧是可搜索的）。

---

_{Chrome/Opera 的播放效果比 Firefox 更流畅。我正在使用 Premiere Pro 制作视频。}

_{编辑：虽然链接的问题谈到了同样的问题，但我不能将我的问题标记为它的重复。为什么？3岁了，只有1个答案，答案没有被接受，而且很差。视频编辑不是我的主要职业，所以我无法从答案中直接推断。应该详细地给出答案。我的问答更详细。所以我怀疑看到这两个问题的人会更喜欢旧的。}

Answer 1

问题确实是关于可搜索性的。我发现另一个问题，与此相关的问题，它让我看看关键帧得更深一些。

我一直在寻找一种修改关键帧的方法（在 Premiere Pro 中），我在

Export Settings (CTRL+M) -> Video -> Advanced Settings -> Key Frame Distance

关键帧距离是编码器插入 i 帧之前的最大帧数，...

^{https://forums.adobe.com/message/9451877#9451877}

这个设置没有打勾，被设置为72。因此，根据 FPS，它等于 1-2 秒。为了使所有框架都可搜索，我已将其设置为1并且有效。

更新：事实证明，在移动设备（Chrome、三星 Internet）上以低 KFD 播放视频是有问题的。虽然StickyScrollableVideo可以播放视频（使用currentTime），但它是滞后的。另一方面，video.play()失败。视频就是不播放。因此StickyScrollableVideo，我将禁用它并播放视频，而不是在移动设备上使用。为了能够做到这一点，我需要一个具有更高 KFD 的视频版本。所以我准备了两个视频；一个 KFD:1 用于桌面/ StickyScrollableVideo，另一个 KFD:25 (FPS) 用于移动/ video.play()。

问题可以在这里看到：https : //akinuri.github.io/in-view-tracker/video.html

第一个视频是 KFD:1，第二个是 KFD:25。点击视频播放/暂停。