仅在可见时响应自动播放 <video /> (mp4)

Question

我正在编写一个组件，从 Giphy 中提取 gif 并将它们呈现在 React 无限滚动组件中。无限滚动按预期工作，但后来遇到了问题。我希望 GIF 自动播放，所以我添加了自动播放属性。然后我意识到，如果同时播放所有 gif，性能就会消失。
我尝试了许多不同的解决方案，包括为每个视频组件附加一个引用，并使用react-visibility-sensor在可见时尝试播放，但我无法找到一种有效的方法。
这是当前每个 mp4 自动播放的组件。我已经删除了 VisibilitySensor，因为我无法让它工作。

  const videoRefs = useRef(
    [...new Array(gifArray.length)].map(() => createRef()),
  );

  return (
    <div>
      {gifArray && (
        <InfiniteScroll
          dataLength={gifArray}
          next={getMore}
          hasMore={true}
          loader={<div>Loading...</div>}
        >
          {gifArray.map((gif, i) => {
            return (
              <video
                width='320'
                height='240'
                loop
                autoPlay
                key={gif.id}
                ref={videoRefs.current[i]}
              >
                <source src={gif.images.downsized_small.mp4} type='video/mp4' />
              </video>
            );
          })}
        </InfiniteScroll>
      )}
    </div>
  );
};

数据在单独的组件中检索并作为 props 传递。

export const HomePage = () => {
  const [gifObject, setGifObject] = useState([]);
  const [searchValue, setSearchValue] = useState('');
  const [pageNumber, setPageNumber] = useState(0);

  const handleSearch = (value) => {
    setSearchValue(value);
    fetch(
      `http://api.giphy.com/v1/gifs/search?q=${value}&api_key=${API_KEY}&limit=20`,
    )
      .then((data) => data.json())
      .then((result) => {
        setGifObject(result);
      });
  };
  return (
    <div>
      <SearchForm handleSearchValue={handleSearch} />
      {gifObject?.data?.length > 1 ? (
        <GifDisplay gifArray={gifObject.data} getMore={getData} />
      ) : null}
    </div>
  );
}

Answer 1

我最终解决了这个问题。我为每个 gif 创建了一个组件，并使用一个名为 的包react-visibility-sensor来检查它是否可见。
该GifDisplay组件仍然非常接近相同：

// GifDisplay.tsx
export const GifDisplay = ({ gifArray, getMore, handleSearch }) => {
  return (
    <GifDisplayWrapper>
      {gifArray && (
        <InfiniteScroll
          dataLength={gifArray}
          next={getMore}
          hasMore={true}
          loader={<div>Loading...</div>}
        >
          <ArrayWrapper>
            {gifArray.map((gif) => {
              return (
                <div key={gif.id}>
                  <SingleGif gif={gif} />
                </div>
              );
            })}
          </ArrayWrapper>
        </InfiniteScroll>
      )}
    </GifDisplayWrapper>
  );
};

该SingleGif组件使用react-visibility-sensor并更新了每个组件的状态。

// SingleGif.tsx
import VisibilitySensor from 'react-visibility-sensor';

export const SingleGif = ({ gif }) => {
  const videoRef = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (isVisible) {
      videoRef.current.play();
    } else {
      if (videoRef.current.play) {
        videoRef.current.pause();
      }
    }
  }, [isVisible]);

  return (
    <VisibilitySensor onChange={(isVisible) => setIsVisible(isVisible)}>
      <video width='320' height='240' loop ref={videoRef}>
        <source src={gif.images.downsized_small.mp4} type='video/mp4' />
      </video>
    </VisibilitySensor>
  );
};