Flicker between placeholder and video playing on safari and firefox (chrome is fine)

[NickWoodward]

Hi,

Sorry, I confused a few different bugs in my last thread and have now clarified what I'm facing - if anyone is able to help!

In chrome my placeholders render, the video loads and then plays correctly, with no flickering (see 'chrome-working' attachment below).

For safari and firefox the placeholder renders and then disappears just before the video starts playing. I've added colorful backgrounds just to make it obvious (see 'firefox-not-working').

My HlsVideo component is below, I think I must have some sort of logic problem, but I'm pretty new to hls so would appreciate it if someone has a second to point me in the right direction!

Thanks,

Nick

*edit: oh, live site too. don't judge too harshly, it's rough/new :) https://my-app.lukecreed.workers.dev/

chrome-working.mp4

firefox-not-working.mp4

"use client";

const source =
  "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";

export const HlsVideo = ({
  id,
  url = source,
  loop = false,
  startTime = 0,
  placeholder,
  className,
  filter,
  autoPlay = false,
  preload = false,
  muted = true,
}: {
  id: string;
  url?: string;
  loop?: boolean;
  startTime?: number;
  placeholder?: string | StaticImageData;
  className?: string;
  filter?: React.ReactNode;
  autoPlay?: boolean;
  preload?: boolean;
  muted?: boolean;
}) => {
  const { registerVideo, unregisterVideo, setCurrentVideo } =
    useVideoControls();

  const videoRefCallback = useCallback(
    (video: HTMLVideoElement | null) => {
      if (!video) return;

      const hls = new Hls({
        testBandwidth: true,
        abrEwmaDefaultEstimate: 5000000, // Start optimistic
        startLevel: -1, // Let HLS.js choose based on bandwidth
        maxBufferLength: 30, // 30 seconds max buffer
        maxMaxBufferLength: 60, // 60 seconds absolute max
        maxBufferSize: 60 * 1000 * 1000, // 60MB max buffer size
        autoStartLoad: autoPlay || preload ? true : false,
      });

      registerVideo(id, video, hls, startTime);

      const handleVideoLoaded = () => {
        if (autoPlay) setCurrentVideo(id);
        // else call setCurrentVideo from the parent component
        ScrollTrigger.refresh();
      };

      if (Hls.isSupported()) {
        hls.loadSource(url);
        hls.attachMedia(video);
      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
        video.src = url;
      }

      video.addEventListener("loadeddata", handleVideoLoaded);

      return () => {
        video.removeEventListener("loadeddata", handleVideoLoaded);
        unregisterVideo(id);
        hls.destroy();
      };
    },
    [url, id]
  );

  return (
    <div
      className={cn(
        "absolute inset-0 flex items-center  overflow-hidden",
        className
      )}
    >
      {filter && filter}
      <video
        ref={videoRefCallback}
        loop={loop}
        poster={
          placeholder
            ? typeof placeholder === "string"
              ? placeholder
              : placeholder.src
            : undefined
        }
        playsInline
        muted={muted}
        autoPlay={autoPlay}
        className="h-full w-full object-cover "
      />
    </div>
  );
};