时间戳

首页 > 解决方案 > 在网页上的视频/动画中移回 X 帧的最无延迟方式是什么？

javascript - 在网页上的视频/动画中移回 X 帧的最无延迟方式是什么？

问题描述

我将我的论文演示文稿放在网上，作为一个带有自定义控件的视频，用于在动画视频的“幻灯片”之间前进（类似于 powerpoint）。两个“幻灯片”之间的一些转换需要在大约 1 秒的循环中重复，而重复部分是延迟发生的地方。

这是我尝试过的唯一解决方案，因为我没有时间（演示文稿是在星期五），也没有了解其他视频/动画图像格式运作良好所需的专业知识。我将尝试使用不同的文件格式（ogg、webm），看看是否会有所不同。

带有论文演示的实时网站。

<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>

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

标签： javascriptjqueryperformancehtml5-video

解决方案

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

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

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

推荐阅读