Автовоспроизведение видео

FullPage.js позволяет создавать интерактивные секции с вертикальной или горизонтальной прокруткой. Одной из часто используемых возможностей является автовоспроизведение видео при попадании секции в видимую область экрана. Для этого требуется корректно интегрировать HTML5 <video> с событиями fullPage.js, учитывая загрузку, воспроизведение и паузу видео.

Подключение видео к секциям

Видео размещается внутри секции с классом section:

<div id="fullpage">
  <div class="section">
    <video id="video1" muted loop preload="auto" class="fp-video">
      <source src="video1.mp4" type="video/mp4">
      Ваш браузер не поддерживает видео.
    </video>
  </div>
  <div class="section">
    <video id="video2" muted loop preload="auto" class="fp-video">
      <source src="video2.mp4" type="video/mp4">
    </video>
  </div>
</div>

Ключевые моменты:

  • Атрибут muted необходим для автозапуска в большинстве браузеров.
  • Атрибут loop позволяет воспроизводить видео непрерывно.
  • preload="auto" ускоряет готовность видео к воспроизведению при попадании секции на экран.

Инициализация fullPage.js с событиями

Для управления воспроизведением видео применяются колбэки afterLoad и onLeave:

new fullpage('#fullpage', {
  autoScrolling: true,
  navigation: true,
  sectionsColor: ['#1bbc9b', '#4BBFC3'],
  
  afterLoad: function(origin, destination, direction){
    const videos = destination.item.querySelectorAll('video');
    videos.forEach(video => {
      video.play().catch(error => console.warn('Автовоспроизведение не удалось:', error));
    });
  },
  
  onLeave: function(origin, destination, direction){
    const videos = origin.item.querySelectorAll('video');
    videos.forEach(video => video.pause());
  }
});

Разбор кода:

  • afterLoad срабатывает, когда секция становится видимой.
  • onLeave вызывается при уходе с текущей секции, что позволяет приостанавливать видео.
  • video.play() может вызвать ошибку в браузерах, если видео не muted; для этого используется catch.

Автовоспроизведение нескольких видео на одной секции

Если в секции несколько видео, достаточно выбрать все элементы через querySelectorAll и запустить их циклом:

afterLoad: function(origin, destination, direction){
  const videos = destination.item.querySelectorAll('video');
  videos.forEach(video => {
    video.currentTime = 0; // сброс позиции
    video.play();
  });
}

Пояснения:

  • currentTime = 0 гарантирует воспроизведение с начала.
  • Можно добавить условие для выбора только видео с определённым классом, например .fp-video.

Управление звуком и autoplay

Браузеры блокируют воспроизведение видео со звуком. Для корректного автозапуска:

  1. Использовать muted.
  2. Если требуется звук, воспроизведение должно инициироваться пользователем (клик или свайп).

Пример условного включения звука после пользовательского действия:

document.querySelector('#unmuteButton').addEventListener('click', () => {
  const videos = document.querySelectorAll('.fp-video');
  videos.forEach(video => {
    video.muted = false;
    video.play();
  });
});

Оптимизация загрузки видео

Для ускорения загрузки и снижения нагрузки на сеть можно использовать:

  • Атрибут preload="metadata" для экономии трафика.
  • Lazy-load видео при необходимости через data-src и динамическое присвоение src при попадании секции на экран.
afterLoad: function(origin, destination, direction){
  const videos = destination.item.querySelectorAll('video[data-src]');
  videos.forEach(video => {
    if(!video.src){
      video.src = video.dataset.src;
      video.load();
    }
    video.play();
  });
}

Управление видео при горизонтальных слайдах

Если используется горизонтальная прокрутка внутри секций (slides), необходимо отслеживать события afterSlideLoad и onSlideLeave:

afterSlideLoad: function(section, origin, destination, direction){
  const videos = destination.item.querySelectorAll('video');
  videos.forEach(video => video.play());
},

onSlideLeave: function(section, origin, destination, direction){
  const videos = origin.item.querySelectorAll('video');
  videos.forEach(video => video.pause());
}

Такое решение гарантирует корректное автовоспроизведение видео как в вертикальных секциях, так и в горизонтальных слайдах.

Резюме ключевых подходов

  • Использовать muted для надежного автозапуска.
  • Управлять воспроизведением через afterLoad и onLeave.
  • Сбрасывать currentTime для повторного воспроизведения.
  • Для нескольких видео применять querySelectorAll и циклы.
  • Ленивая загрузка и оптимизация preload минимизируют нагрузку на сеть.
  • Горизонтальные слайды требуют обработки событий afterSlideLoad и onSlideLeave.

Автовоспроизведение видео в fullPage.js становится полностью управляемым, гибким и оптимизированным для различных устройств и браузеров, если соблюдать эти принципы.

Оглавление