Управление видео при навигации

Для управления видео при смене секций важно корректно инициализировать fullPage.js с нужными настройками. Основная структура выглядит следующим образом:

new fullpage('#fullpage', {
    navigation: true,
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
    onLeave: function(origin, destination, direction){
        handleVideoControl(origin.index, destination.index);
    },
});
  • navigation: true — отображает навигационные точки для удобной ориентации между секциями.
  • onLeave — ключевой колбэк, который срабатывает при уходе со секции. Здесь происходит контроль видео: остановка в текущей секции и запуск в следующей.

Функция handleVideoControl реализует логику управления медиа.

Управление видео через JavaScript

Для каждой секции, содержащей видео, лучше иметь идентификатор или класс, чтобы точно обращаться к нужному элементу. Например:

<div class="section">
    <video id="video1" src="video1.mp4" preload="auto"></video>
</div>
<div class="section">
    <video id="video2" src="video2.mp4" preload="auto"></video>
</div>

JavaScript для управления видео:

function handleVideoControl(currentIndex, nextIndex){
    const videos = document.querySelectorAll('video');
    
    videos.forEach((video, index) => {
        if(index === nextIndex){
            video.currentTime = 0; 
            video.play();
        } else if(index === currentIndex){
            video.pause();
        }
    });
}

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

  • video.currentTime = 0 — сброс времени воспроизведения, чтобы видео запускалось с начала.
  • video.play() — старт воспроизведения при переходе на секцию.
  • video.pause() — остановка видео в уходящей секции.

Автозапуск и воспроизведение на разных устройствах

Некоторые браузеры блокируют автозапуск видео с включённым звуком. Чтобы избежать проблем:

video.muted = true;  // отключение звука для автоплей
video.play().catch(() => {
    console.log('Автоплей заблокирован браузером');
});

Рекомендации:

  • Для секций с видео лучше использовать muted: true, если требуется автоматическое воспроизведение.
  • Использовать preload="auto" в HTML для более плавного старта видео.

Плавный переход при смене секции

Для более плавного UX можно комбинировать анимацию секций с видео:

onLeave: function(origin, destination, direction){
    const currentVideo = origin.item.querySelector('video');
    const nextVideo = destination.item.querySelector('video');

    if(currentVideo){
        currentVideo.pause();
        currentVideo.currentTime = 0;
    }

    if(nextVideo){
        setTimeout(() => {
            nextVideo.play();
        }, 300); // задержка для плавного перехода
    }
}

Особенности:

  • setTimeout помогает синхронизировать воспроизведение видео с анимацией смены секции.
  • Можно адаптировать время задержки под длительность анимации fullPage.js.

Управление несколькими видео на одной секции

Если в секции несколько видео, можно организовать их последовательное воспроизведение:

const sectionVideos = document.querySelectorAll('#section3 video');

sectionVideos.forEach((video, i) => {
    video.addEventListener('ended', () => {
        if(i + 1 < sectionVideos.length){
            sectionVideos[i + 1].play();
        }
    });
});

function playSectionVideos(sectionIndex){
    const videos = document.querySelectorAll(`.section:nth-child(${sectionIndex + 1}) video`);
    if(videos.length) videos[0].play();
}
  • Событие ended запускает следующее видео автоматически.
  • Можно использовать аналогичную логику внутри onLeave для запуска первого видео секции при переходе.

Взаимодействие с пользователем

Для улучшения взаимодействия можно добавлять управление воспроизведением через кнопки:

<button class="play-btn">Play</button>
<button class="pause-btn">Pause</button>
document.querySelector('.play-btn').addEventListener('click', () => {
    const currentSectionVideo = document.querySelector('.fp-section.active video');
    if(currentSectionVideo) currentSectionVideo.play();
});

document.querySelector('.pause-btn').addEventListener('click', () => {
    const currentSectionVideo = document.querySelector('.fp-section.active video');
    if(currentSectionVideo) currentSectionVideo.pause();
});

Примечания:

  • .fp-section.active — класс активной секции, присваиваемый fullPage.js.
  • Управление через кнопки позволяет сочетать автоплей и ручное управление видео.

Оптимизация производительности

  • Использовать preload="metadata" или preload="auto" в зависимости от размера видео.
  • Не загружать видео всех секций сразу на мобильных устройствах — можно подгружать видео динамически при входе в секцию через onLeave и lazy loading.
  • Следить за памятью браузера: паузить видео, которые больше не видны, и удалять ненужные источники.

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

Оглавление