javascript - 使用 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、bedroom.mp4)有问题/滞后(只有几帧是可搜索的)。

---

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

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

Answer 1

问题确实与可搜索性有关。我找到了另一个 question与这个问题相关，它让我更深入地研究了关键帧。

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

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

The keyframe distance is the maximum number of frames before the encoder inserts an i-frame,...

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

此设置未勾选，设置为 72。因此，根据 FPS，它等于 1-2 秒。为了使所有帧都可搜索，我将其设置为 1 并且它起作用了。

更新:事实证明，在移动设备(Chrome、Samsung 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。点击视频播放/暂停。