Next.js中鼠标hover图片切换视频时出现延迟/黑屏问题求助

你遇到的延迟和黑屏问题，核心原因是当前代码在鼠标hover时才动态渲染<video>元素——哪怕设置了preload="auto"，浏览器也要等到元素被添加到DOM后才会开始加载解码视频，这就导致了切换时的空白等待。

下面是针对性的优化方案，实现无缝切换：

1. 预渲染视频元素，用CSS控制显示/隐藏 #

放弃条件渲染的方式，把视频和图片同时放在DOM中，默认隐藏视频、显示图片，hover时仅通过CSS切换两者的可见性。这样视频元素会在页面加载时就开始预加载，hover时直接显示，没有创建元素的开销。

2. 给视频设置poster属性 #

将poster值设为你的图片地址，这样视频在完全加载前会显示这张海报图，彻底避免黑屏，让过渡更自然。

修改后的完整代码 #

const AiToolsData = (props) => {
  const [isHovered, setIsHovered] = useState(false);
  return (
    <GridItem
      colSpan={{
        sm: props.uniqueKey === 0 ? 2 : 1,
      }}
      maxH="425px"
      pos="relative"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* 预渲染视频，默认隐藏，hover时显示 */}
      <video
        src={props.videoSrc}
        width={100}
        height={100}
        className="tools-cards"
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        poster={props.imgSrc}
        style={{ 
          display: isHovered ? 'block' : 'none',
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%'
        }}
      />
      {/* 图片默认显示，hover时隐藏 */}
      <Image
        src={props.imgSrc}
        width={100}
        height={100}
        className="tools-cards"
        loading="eager"
        priority={true}
        alt="Apple"
        style={{ display: isHovered ? 'none' : 'block' }}
      />
    </GridItem>
  );
};

额外优化建议 #

• 优先使用WebM格式的视频（比MP4体积更小、加载更快），同时保留MP4作为降级备选
• 若需更严谨的控制，可监听视频的loadeddata事件，确保视频加载完成后再允许切换（预渲染场景下一般不需要，但可作为兜底）

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