如何在 reactjs 初始加载后加载自动播放视频？

Question

所以我在索引页面中有一个 autoPlayed 和 playsinline 的视频，每次我在移动设备上访问该页面时，它比其他页面花费的时间稍长，这显然是因为其他页面没有 autoplayed 视频。

我想做的是延迟视频的加载，直到页面 (DOM) 完全加载，换句话说，我不想通过先加载视频来减少加载时间低权重资产，然后在加载后 DOM 我希望视频加载并自动播放。

这在 reactjs 中可能吗？

Answer 1

您可以在初始 js 加载后使用 useEffect 播放视频。

function MyVideoComponent() {
  const videoRef = useRef(null);
  useEffect(() => {
    if(videoRef){
      videoRef.current.play();
    }
  }, []);
  return (
    <>
      <video ref={videoRef} />
    </>
  );
}

如何在 reactjs 初始加载后加载自动播放视频？

how to load autoplaying video after the initial load in reactjs?

lazy-loading

autoplay

reactjs