使用 html 和 javascript 反转视频的最佳方法是什么？

Question

我正在为浏览器构建简单的信息网站。在这个网站中，我在后台使用视频，页面看起来很有趣。问题是我想按一定的顺序进行视频工作：

• 视频播放至结束
• 视频播放后减半并倒放直到第6秒
• 在第 6 秒和结束之间循环，来回播放。

我找不到最佳方法。

我正在 Next JS 上开发网站，但任何抽象的建议都可以。

1. 我的第一个解决方案是创建两个不同的视频，一个用于介绍，第二个用于循环，并无缝地更改它们。但我无法让过渡变得不可见。
2. 第二种解决方案是使用动画库GSAP来操作视频，但是视频卡顿很多。
3. 第三个也是当前最好的尝试是仅更改 setInterval 函数内部视频对象本身的 currentTime 属性

const playForward = () => {
    const video = videoRef.current!;
    if (loopIntervalRef.current) {
      clearInterval(loopIntervalRef.current);
    }

    //@ts-ignore
    loopIntervalRef.current = setInterval(() => {
      if (video.currentTime >= video.duration) {
        playBack();
      } else {
        video.currentTime += 0.04;
      }
    }, 120);
  };
 const playBack = () => {
    const video = videoRef.current!;
    if (loopIntervalRef.current) {
      clearInterval(loopIntervalRef.current);
    }

    //@ts-ignore
    loopIntervalRef.current = setInterval(() => {
      if (video.currentTime <= reversePoint) {
        playForward();
      } else {
        video.currentTime -= 0.04;
      }
    }, 120);
  };

它工作得几乎完美，但倒放时视频有时会滞后。

Answer 1

我认为你应该有两份视频副本，一份正常，一份反转，并在到达结尾时在两者之间切换。

幸运的是，众所周知的 ffmpeg 实用程序可以使用以下语法反向创建副本...

ffmpeg -i /storage/emulated/0/ffvid/frameCount.mp4 -vf reverse -af areverse reversed.mp4

如本页面所述。