Next.js视频轮播组件在iPhone移动端初始显示空白块，点击后才加载视频的问题求助

大家好，我现在用Next.js开发一个Web应用，页面里做了一个视频轮播组件，目前遇到了一个棘手的问题：

• 桌面端一切正常，视频能正常加载并显示
• iPhone移动端初始状态下视频位置显示的是白色块（我怀疑是给video标签加了bg-white/60这个类导致的），看不到任何视频内容；但当我点击这些白色块之后，视频就会加载出来并正常显示
• 安卓移动端是正常的，只有iPhone有这个问题

我先贴一下最初的轮播组件代码：

export default function CustomerReviewsCarousel({ reviews }: Props) {

const { width } = useScreenSize();

const [activeVideoIndex, setActiveVideoIndex] = useState<number | null>(null);

const [isPlay, setIsPlay] = useState(false);

function handlePlayClick(index: number) {

const video = document.getElementById(
`review-video-${activeVideoIndex}`
) as HTMLVideoElement;

if (activeVideoIndex === index) {
if (isPlay) {
setIsPlay(false);
} else {
setIsPlay(true);
}
} else {
if (video) {
video.pause();
video.currentTime = 0;
}
setIsPlay(true);
setActiveVideoIndex(index);
}

}

useEffect(() => {
const video = document.getElementById(
`review-video-${activeVideoIndex}`
) as HTMLVideoElement;

if (isPlay) {
video?.play();
} else {
video?.pause();
}
}, [isPlay, activeVideoIndex]);

return (
<Carousel
opts={{
loop: true,
align: width > 840 ? "start" : "center",
}}
className="static"
>
<CarouselContent className="h-full">
{reviews.map((item, idx) => (
<CarouselItem
key={idx}
className="group relative sm:basis-1/2 2xl:basis-1/3"
>
<div className="relative">
<video
id={`review-video-${idx}`}
className={cn(
"bg-white/60",
"h-[410px] w-full object-cover rounded-[10px] z-[0]"
)}
loop
controls={false}
playsInline
>
<source src={item} />
</video>
<button
onClick={() => handlePlayClick(idx)}
className={cn(
"absolute z-[20] top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%] p-[20px] rounded-full bg-[rgba(255,255,255,0.20)] backdrop-blur-lg",
activeVideoIndex === idx &&
isPlay &&
"invisible opacity-activeVideoIndex transition-all ease-in-out group-hover:opacity-100 group-hover:visible"
)}
>
{activeVideoIndex === idx && isPlay ? (
<PauseIcon className="text-white relative" />
) : (
<PlayIcon className="text-white relative left-[2px]" />
)}
</button>
</div>
</CarouselItem>
))}
</CarouselContent>
<div className="absolute left-[50%] translate-x-[-50%] bottom-[70px] w-[112px]">
<CarouselPrevious className="absolute top-0 left-0 w-[48px] h-[48px]" />
<CarouselNext className="absolute top-0 right-0 w-[48px] h-[48px]" />
</div>{" "}
</Carousel>
);
}

后来我尝试封装了一个自定义的Video组件，用ref来控制播放，但iPhone上还是会出现初始空白块的问题，点击后才正常：

export default function CustomVideo({ src }: Props) {

const ref = useRef<HTMLVideoElement | null>(null);

const [isPlay, setIsPlay] = useState(false);

function handlePlayClick() {
if (ref.current) {
if (isPlay) {
ref.current.pause();
setIsPlay(false);
} else {
ref.current.play();
setIsPlay(true);
}
}
}

return (
<div className="relative">
<video
ref={ref}
className={cn(
"bg-white/60",
"h-[410px] w-full object-cover rounded-[10px] z-[0]"
)}
loop
controls={false}
playsInline
>
<source src={src} />
</video>
<button
onClick={handlePlayClick}
className={cn(
"absolute z-[20] top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%] p-[20px] rounded-full bg-[rgba(255,255,255,0.20)] backdrop-blur-lg",
isPlay &&
"invisible opacity-activeVideoIndex transition-all ease-in-out group-hover:opacity-100 group-hover:visible"
)}
>
{isPlay ? (
<PauseIcon className="text-white relative" />
) : (
<PlayIcon className="text-white relative left-[2px]" />
)}
</button>
</div>
);
}

有没有大佬遇到过类似的问题？或者能给我一些排查方向？谢谢大家！

备注：内容来源于stack exchange，提问作者Илья Маковецкий