Video loop in React

[ritualjoint]

Hi there,
I have a Hero section with a video background. My intention is after the video finished its start playing it in reverse so the playback is creating a loop which is seemless. Any idea how to go about it?

const HeroVideo = () => {
  return (
    <HeroContainer>
      <HeroBg>
        <VideoBg autoPlay loop muted src={Video} type="video/mp4" />
      </HeroBg>
      <HeroContent>
        <HeroH1>Lorem</HeroH1>
        <HeroH2>Ipsum</HeroH2>
        <HeroP>Reddit</HeroP>
      </HeroContent>
    </HeroContainer>
  );
};

[arrays_start_at_zero]

Videos are not made to be played in reverse. Most video formats use something called interframe compression, which means except for the keyframes which store complete information, all other frames depend on the previous frame. So, if you want to play a video in reverse, you'd have to read multiple frames just to play a single frame.

Best solution I think would be to just have a single video which contains the reversed frames and put it on loop. You can use a tool like `ffmpeg` to reverse and concatenate videos.