Why We Chose HTML Video Over Lottie for a Complex Web Animation

In the Penguin Tutoring brand page we needed to implement a complex animation that plays when the page scrolls into view.

We considered several frame‑animation solutions:

GIF animation – simple but low quality for large, detailed animations, so it was discarded.

Lottie – uses bodymovin to export After Effects animation as JSON and renders with lottie‑web. Initial tests showed color, tilt and dash‑line differences, so we abandoned it for this case.

APNG – provides better quality than GIF but the files were huge (29 MB) and required a polyfill for browsers that do not support it.

HTML video element – a lightweight MP4 (≈350 KB) that meets the visual requirements.

After trials we chose the video tag. The implementation needed to address several compatibility issues on mobile browsers:

Autoplay is blocked on Safari and Chrome unless the video is muted; we add the muted attribute.

Hide the control bar by omitting the controls attribute.

Enable inline playback on iOS with playsinline and webkit-playsinline.

WeChat on Android does not allow autoplay; we trigger playback on scroll or touch events and fall back to a frame‑by‑frame image sequence when autoplay fails.

Some Android browsers return a resolved promise from video.play() even though the video does not start (e.g., Huawei Honor 8 in WeChat).

Key code snippets (React example):

<video
  muted
  src="***"
  preload="auto"
  playsInline
  webkit-playsinline="true"
  mtt-playsinline="true"
  loop
  ref={this.videoRef}
/>

playVideo = () => {
  const { isVideoCanAutoPlay, isPlayedVideo } = this.state;
  const videoDom = this.videoRef.current;
  if (videoDom && !isPlayedVideo && isVideoCanAutoPlay) {
    const playPromise = videoDom.play();
    if (playPromise) {
      playPromise
        .then(() => {
          this.setState({ isPlayedVideo: true });
        })
        .catch(err => {
          badjs.info(`[Brand Page][AI VIDEO]: autoplay error ${err}`);
          ++this.catchVideoErrorCount;
          if (this.catchVideoErrorCount >= 2) {
            this.setState({ isVideoCanAutoPlay: false });
          }
        });
    }
  }
};

Final takeaways:

Mobile web video autoplay is unreliable, especially on Android browsers.

If autoplay is blocked, user interaction (touch) is required to start playback.

The video.play() promise may resolve without actual playback on some devices.