Блог

Я создаю веб-сайт в ReactJS. Первый экран этого сайта содержит три видеоролика. Я хочу знать, как я могу настроить событие, которое запускается при загрузке всех трех видеороликов.

Моя цель — отображать анимацию загрузки до тех пор, пока все видео не будут успешно загружены (чтобы пользователь не сидел и не смотрел на видео контейнеры, ожидающие заполнения). В идеале, когда анимация загрузки завершена, видео будут полностью загружены и готовы к воспроизведению без прерываний пользовательского интерфейса.

Использование перехватов жизненного цикла для этого варианта использования, похоже, не работает, поскольку эти перехваты будут ждать, пока DOM не отобразит, но не пока мультимедиа не загрузится.

   // Does not work
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    setIsLoading(false)
  });
 

Я видел похожие вопросы, в которых упоминалось об использовании <video> onLoad события:

 <video ref={video1}
    autoPlay
    playsInline
    muted
    className="video"
    loop
    src={bike}
    onLoad={()=>{console.log("I don't get called???")}}
/>
 

но по какой-то причине эта функция никогда не вызывается.

Это кажется относительно распространенным вариантом использования, поэтому я был бы очень признателен за совет по правильному решению.

Дополнительная информация:

• Эти видео будут доступны локально (не извлекаются из внешней конечной точки)
• Я предпочитаю придерживаться использования функциональных компонентов

Попробуйте использовать событие «onLoadedData«.

Я написал небольшую демонстрацию, чтобы убедиться, что все три видео загружены с использованием этого события.

Использование события onLoadedData для запуска setVideoLoaded .

       <video
        autoPlay
        playsInline
        muted
        className="video"
        loop
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        onLoadedData={() => {
          setVideoLoaded();
        }}
      />
 

Увеличивайте состояние каждый раз, когда событие запускается при загрузке видео. Затем сделайте еще кое-что, когда все три будут готовы к воспроизведению.

 const [loadCount, setLoadCount] = useState(0);

  const setVideoLoaded = () => {
    console.log("video loaded");
    if (loadCount <= 1) {
      setLoadCount(loadCount   1);
    } else {
      console.log("All videos loaded!");
    }
  };