Question

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

我已经看到这种效果在几个地方使用过，并且想要自己创建。我编写的脚本可以正常运行，但是有一个小问题：视频本身。

示例中的视频运行流畅，但是我创建的视频却落后。我似乎无法找出原因。我尝试了FPS，分辨率，比特率的不同组合，但它们无济于事。

我能找到的视频之间唯一的区别是，当我播放示例中的视频时，我可以在MPC（K-Lite）上寻找任何帧。我创建的视频只能搜索3-4帧。因此，问题可能与此有关。我不确定。如果是那样，我需要一种使视频完全可搜索的方法。我该怎么办？

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

在线演示播放流畅/可搜索的视频（来自Audi）。要查看视频之间的区别，您必须从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

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

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

此设置未勾选，并且设置为72。因此，取决于FPS，它等于1-2秒。为了使所有框架都易于寻找，我将其设置为1，并且可以正常工作。

更新：事实证明，在移动设备（Chrome，三星Internet）上以低KFD播放视频存在问题。尽管StickyScrollableVideo可以播放视频（使用currentTime），但视频比较慢。另一方面，video.play()失败。视频只是无法播放。因此，我将禁用它，而不是在移动设备上使用StickyScrollableVideo，而只播放视频。为了做到这一点，我需要一个具有较高KFD的视频版本。所以我准备了两个视频；

一个用于台式机/ StickyScrollableVideo的KFD：1，另一个用于移动电话/ video.play()的KFD：25（FPS）。

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

第一个视频的KFD：1，第二个视频的KFD：25。点击视频以播放/暂停。

Answer 2

您必须知道此错误的根源是整个页面工作（您的视频人员+所有其他工作）的CPU使用率。在您的示例中，看起来像是视频编码器（mp4）错误。为了对所有浏览器做出完全响应，您需要同时使用两种（Safari，Firefox，chrome）视频格式。

一种方法是理论：使用网络工作者（新线程）播放视频并从代码导航。
第二个是直接在canvas2d中绘制视频blob。在canvas程序中，您可以轻松使当前帧无效。

您是否尝试过具有类似环境和相同浏览器版本的其他（更好）计算机？

这将为您解决50％的问题。只需将mp4转换为ogg（.ogv）格式

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>

使用currentTime时视频滞后

2 个答案: