Front-End Development Guide for Short Video Infinite Scroll

This article presents a front‑end development guide for short‑video infinite‑scroll scenarios, using a home‑decoration content example. It explains the business background, the "short, fast, frequent" nature of short videos, and why an endless‑scroll carousel is needed.

The infinite‑scroll structure is split into two layers: a sliding carousel container and individual content cards. Each card contains a custom video player (implemented with the HTML5 video element) and related information.

Video Player – The guide shows how to build a custom control bar with status buttons and a progress bar, and how to manage player activation and destruction so that only the visible card renders a video.

const StatusButton = forwardRef<IStatusButtonRef>((_, ref) => {
  const [status, setStatus] = useState<EStatus>(EStatus.PLAY);
  useImperativeHandle(ref, () => ({ setStatus }));
  return (
    <div className={styles.statusButton}>
      {(() => {
        switch (status) {
          case EStatus.PAUSE:
            return <div>{/* Pause Icon */}</div>;
          case EStatus.WAITING:
            return <div>{/* Buffering Icon */}</div>;
          default:
            return null;
        }
      })()}
    </div>
  );
});
export default memo(StatusButton);

const VideoPlayer: FC<IVideoPlayer> = (props) => {
  const { source } = props;
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const statusBtnRef = useRef<IStatusButtonRef | null>(null);

  const onPlay = () => {
    statusBtnRef.current?.setStatus(EPlayerStatus.PLAY);
  };

  useEffect(() => {
    videoRef.current?.addEventListener('play', onPlay);
    return () => {
      videoRef.current?.removeEventListener('play', onPlay);
    };
  }, []);

  return (
    <div className={styles.videoPlayerContainer}>
      <video ref={videoRef} className={styles.item} src={source} playsInline autoPlay />
      <StatusButton ref={statusBtnRef} />
    </div>
  );
};
export default memo(VideoPlayer);

The carousel is built with Swiper . By enabling the Virtual module, only a few slides (e.g., five) are rendered at any time, drastically reducing memory usage for long streams.

import { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

const VideoSwiper: FC = () => {
  return (
    <Swiper
      className={styles.videoSwiperContainer}
      direction="vertical"
      initialSlide={0}
      touchAngle={30}
      modules={[Virtual]}
      virtual={{ addSlidesBefore: 1, addSlidesAfter: 1 }}
    >
      {/* Slides go here */}
    </Swiper>
  );
};

To avoid layout shifts when a loading indicator appears, a lightweight fixed‑position loading bar is used. The CSS forces hardware acceleration to keep the animation smooth.

.loadingBar {
  &Container {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100vw;
    height: 5rpx;
  }
  &Item {
    height: 5rpx;
    background-color: #fd0;
    animation: loading 0.6s linear infinite;
  }
}
@keyframes loading {
  0% { width: 0; opacity: 0; }
  30% { width: 30vw; opacity: 1; }
  70% { width: 70vw; opacity: 1; }
  100% { width: 100vw; opacity: 0; }
}

Finally, the article summarizes that the presented architecture—virtual Swiper carousel + single active video player—can be adapted to other endless‑flow scenarios such as image cards, live streams, or 3D scenes.