嗨咿，我是 illumi，前天講到用png sequence 可以解決 Safari 不支援 WebM 的問題，那怎麼讓不同瀏覽器用上不同元件呢！

Step.1 新增一個 Hook （同樣用React示範）：

把Safari體系的都篩選出來

import { useEffect, useState } from "react";

export function useIsSafariOrIOS() {
  const [isSafariOrIOS, setIsSafariOrIOS] = useState(false);

  useEffect(() => {
    const ua = navigator.userAgent.toLowerCase();

    const isIOS = /iphone|ipad|ipod/.test(ua);
    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

    setIsSafariOrIOS(isIOS || isSafari);
  }, []);

  return isSafariOrIOS;

Step.2 引用 Hook ：

import { SequencePlayer } from "@/components/SequencePlayer";
import { useIsWebmSupported } from "@/hooks/useIsWebmSupported";

export default function MonsterAnimation() {
  const isSafariOrIOS = useIsWebmSupported();

  return (
    <>
      {isSafariOrIOS ? (
        //  Safari / iOS → pngSequence
        <SequencePlayer
          frameCount={60}
          width={100}
          height={100}
          fps={24}
        />
      ) : (
        //  其他 → webm
        <video
          autoPlay
          loop
          muted
          playsInline
        >
          <source
            src="影片.webm"
            type="video/webm"
          />
        </video>
      )}
    </>
  );
}

醬就可以一直重複利用啦～

我們明天見！