在下一个js中从图像切换到视频时出现延迟或黑屏

Question

我正在制作一个网站，当您将鼠标悬停在图像上时，它应该切换到视频。但有时，在视频开始播放之前会出现延迟或屏幕短暂空白。

我已经优化了视频文件，将其大小减小到千字节 (KB)。视频播放一旦开始就很流畅，并且我对视频元素使用了 preload="auto" 。 将鼠标悬停在图像上时，较小的视频应无缝替换图像，没有任何延迟或空白屏幕。它应该立即开始播放。 这是我的代码：

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)}
    >
      {isHovered ? (
        <video
          src={props.videoSrc}
          width={100}
          height={100}
          className="tools-cards"
          autoPlay
          loop
          muted
          playsInline
          preload="auto"
        />
      ) : (
        <Image
          src={props.imgSrc}
          width={100}
          height={100}
          className="tools-cards"
          loading="eager"
          priority={true}
          alt="Apple"
        />
      )}
    </GridItem>
  );
};

Answer 1

我认为问题在于，您正在根据每个状态更改的重新渲染来切换它们，而正确的方法是隐藏或不隐藏它。

虽然这对延迟有好处，但可能会导致页面加载延迟。因此，最好考虑一下您将使用什么策略来提供该视频（流式传输而不是整个视频）。