title: React autoplay <video /> (mp4) only when visible
body: <p>I am writing a component that pulls gifs from Giphy and renders them inside a React Infinite Scroll Component. The infinite scroll is worked as expected, but then I ran into a problem. I want the gifs to auto play, so I added the autoplay attribute. I then realised that with all of the gifs playing at once the performance just dies.<br />
  I have tried a number of different solutions, including attaching a ref to each video component and using react-visibility-sensor to try to play when visible, but I have not been able to work out a way that works.<br />
  This is the component as it currently stands with each mp4 autoplaying. I have removed the VisibilitySensor because I could not get it working.</p>
  <pre><code>  const videoRefs = useRef(
      [...new Array(gifArray.length)].map(() =&gt; createRef()),
    );
  
    return (
      &lt;div&gt;
        {gifArray &amp;&amp; (
          &lt;InfiniteScroll
            dataLength={gifArray}
            next={getMore}
            hasMore={true}
            loader={&lt;div&gt;Loading...&lt;/div&gt;}
          &gt;
            {gifArray.map((gif, i) =&gt; {
              return (
                &lt;video
                  width='320'
                  height='240'
                  loop
                  autoPlay
                  key={gif.id}
                  ref={videoRefs.current[i]}
                &gt;
                  &lt;source src={gif.images.downsized_small.mp4} type='video/mp4' /&gt;
                &lt;/video&gt;
              );
            })}
          &lt;/InfiniteScroll&gt;
        )}
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>The data is retrieved in a seperate component and passed as props.</p>
  <pre><code>export const HomePage = () =&gt; {
    const [gifObject, setGifObject] = useState([]);
    const [searchValue, setSearchValue] = useState('');
    const [pageNumber, setPageNumber] = useState(0);
  
    const handleSearch = (value) =&gt; {
      setSearchValue(value);
      fetch(
        `http://api.giphy.com/v1/gifs/search?q=${value}&amp;api_key=${API_KEY}&amp;limit=20`,
      )
        .then((data) =&gt; data.json())
        .then((result) =&gt; {
          setGifObject(result);
        });
    };
    return (
      &lt;div&gt;
        &lt;SearchForm handleSearchValue={handleSearch} /&gt;
        {gifObject?.data?.length &gt; 1 ? (
          &lt;GifDisplay gifArray={gifObject.data} getMore={getData} /&gt;
        ) : null}
      &lt;/div&gt;
    );
  }
  </code></pre>