在网页上 video/animation 中向后移动 X 帧的最无滞后方式是什么？

Question

我正在将我的论文演示文稿放在网上，作为一个视频，其中包含用于在动画视频 "slides" 之间前进的自定义控件（类似于 powerpoint）。两个 "slides" 之间的某些转换需要在大约 1 秒的循环中重复，而重复部分就是发生滞后的地方。

这是我尝试过的唯一解决方案，因为我没有时间（演讲时间是周五），也没有专业知识来了解其他 video/animated 图像格式的效果如何。我将尝试使用不同的文件格式（ogg、webm），看看是否有所不同。

Live website with thesis presentation.

<html>
<head>
</head>
<body>
    <video
        id="video-active"
        width="640"
        height="390"
        controls="">
        <source src="presentation.mp4" type="video/mp4">
    </video>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
    video = document.querySelector("#video-active");
    framerate = 60;
    thresholdFrameNo = 300;
    timeToRevert = 0.5;

    $(document).ready(function(){
        document.querySelector("#video-active").defaultPlaybackRate = 1.0;
    $("#video-active").on(
    "timeupdate", 
    function(event){
      onTrackedVideoFrame(this.currentTime, this.duration);
    })});

    function onTrackedVideoFrame(currentTime, duration){
        currentFrame = Math.round(currentTime*framerate);
        if(currentFrame > thresholdFrameNo){
            video.currentTime -= timeToRevert;
        }
    }
</script>
</html>

我希望视频能够非常快地提前半秒到达该位置，但在播放之前它会在旧的搜索位置冻结一点（可能长达半秒）。

Answer 1

我找到了一个，其最佳答案将我指向了关键帧问题，使我能够通过使用以下 FFmpeg 命令的输出来解决该问题：

ffmpeg -i in.mp4 -c:v libx264 -x264opts keyint=5 out.mp4

其中 keyint=5 表示每五帧一个关键帧（在 this 论坛帖子中指出）。

在网页上 video/animation 中向后移动 X 帧的最无滞后方式是什么？

What is the most lag-free way of moving back X frames in a video/animation on a webpage?

javascript

performance

jquery

html5-video