iOS Safari中无autoplay的muted/playsinline视频显示黑框问题求助

针对你在Next.js项目里遇到的内联视频在Safari显示黑块、无法依赖autoplay的情况，给你两个可靠的解决方案：

方案一：利用preload="metadata" + 手动锁定初始帧 #

Safari默认不会为未触发播放的视频加载帧内容，添加preload="metadata"可以让浏览器加载视频元数据（包括第一帧），再通过代码确保视频停在初始状态，既避免黑块，又能保持初始暂停。

代码示例：

import { useRef, useEffect } from 'react';

const VideoCarouselItem = ({ item }) => {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    // 触发视频元数据加载
    video.load();
    // 加载完成后锁定在初始帧并暂停
    video.onloadeddata = () => {
      video.pause();
      video.currentTime = 0;
    };
  }, [item.video.mediaItemUrl]);

  const handlePlayPause = () => {
    const video = videoRef.current;
    video.paused ? video.play() : video.pause();
  };

  return (
    <video
      ref={videoRef}
      muted
      playsInline
      loop
      preload="metadata"
      onClick={handlePlayPause}
    >
      <source src={item.video.mediaItemUrl} type="video/mp4" />
    </video>
  );
};

export default VideoCarouselItem;

• preload="metadata" 仅加载视频基础信息和第一帧，不会占用过多带宽，性能友好
• 用onloadeddata事件替代setTimeout，能精准捕捉视频加载完成的时机，稳定性更高
• 保留你原有的点击播放/暂停逻辑

方案二：添加海报图作为兜底 #

如果方案一在特殊场景下不生效，可以提前生成视频的第一帧作为海报图，通过poster属性设置，初始状态显示封面图，点击后切换到视频画面。

代码示例：

<video
  muted
  playsInline
  loop
  poster={item.video.posterUrl} // 替换为你的视频封面图地址
  onClick={handlePlayPause}
>
  <source src={item.video.mediaItemUrl} type="video/mp4" />
</video>

这个方法兼容性拉满，缺点是需要额外生成和管理视频封面图资源。

注意事项 #

• 确保视频采用Safari兼容的编码格式（H.264编码的MP4是最稳妥的选择）
• 不要移除playsInline，iOS Safari默认会强制视频全屏播放，该属性是内联播放的必要条件

内容的提问来源于stack exchange，提问作者poncho