YouTube и Vimeo интеграция

Библиотека fullPage.js предоставляет мощный инструментарий для создания полноэкранных прокручиваемых сайтов, а интеграция видео с платформ YouTube и Vimeo позволяет расширять визуальный опыт, делая страницы более динамичными и интерактивными. Рассмотрим основные подходы и нюансы работы с видео в fullPage.js.

Подключение видео через HTML-разметку

Для начала необходимо добавить контейнеры для видео внутри секций fullPage.js. Простейший пример для YouTube:

<div id="fullpage">
    <div class="section">
        <div class="video-container">
            <iframe src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>
    <div class="section">
        <div class="video-container">
            <iframe src="https://player.vimeo.com/video/VIDEO_ID?api=1&background=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
        </div>
    </div>
</div>

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

  • Для YouTube используется параметр enablejsapi=1, который позволяет управлять видео через API.
  • Для Vimeo параметр api=1 и background=0 обеспечивают возможность управления и корректного отображения в секции.

Инициализация fullPage.js

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    onLeave: function(origin, destination, direction){
        handleVideoPlayback(origin.index, destination.index);
    }
});

Параметр onLeave используется для управления воспроизведением видео при смене секций. Это предотвращает одновременное воспроизведение нескольких роликов.

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

YouTube API

Для управления YouTube-видео необходимо подключить YouTube IFrame Player API:

<script src="https://www.youtube.com/iframe_api"></script>

Создание объекта плеера:

let players = [];

function onYouTubeIframeAPIReady() {
    document.querySelectorAll('.video-container iframe').forEach((iframe, index) => {
        players[index] = new YT.Player(iframe, {
            events: {
                'onReady': onPlayerReady
            }
        });
    });
}

function onPlayerReady(event) {
    event.target.pauseVideo();
}

function handleVideoPlayback(originIndex, destinationIndex) {
    if(players[originIndex]) players[originIndex].pauseVideo();
    if(players[destinationIndex]) players[destinationIndex].playVideo();
}

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

  • pauseVideo() останавливает воспроизведение при уходе с секции.
  • playVideo() запускает видео в активной секции.
  • Использование массива players позволяет масштабировать решение для нескольких видео на странице.

Vimeo API

Для Vimeo используется Vimeo Player API:

<script src="https://player.vimeo.com/api/player.js"></script>

Инициализация и управление:

let vimeoPlayers = [];

document.querySelectorAll('.video-container iframe').forEach((iframe, index) => {
    vimeoPlayers[index] = new Vimeo.Player(iframe);
    vimeoPlayers[index].pause();
});

function handleVideoPlayback(originIndex, destinationIndex) {
    if(vimeoPlayers[originIndex]) vimeoPlayers[originIndex].pause();
    if(vimeoPlayers[destinationIndex]) vimeoPlayers[destinationIndex].play();
}

Отличия от YouTube:

  • Vimeo API использует объект Player для каждого iframe.
  • Методы play() и pause() работают асинхронно, возвращая промисы, что позволяет обрабатывать ошибки и состояния воспроизведения.

Автоматическое воспроизведение и остановка видео

Для создания плавного опыта можно объединить оба API в одной функции:

function handleVideoPlayback(originIndex, destinationIndex) {
    // YouTube
    if(players[originIndex]) players[originIndex].pauseVideo();
    if(players[destinationIndex]) players[destinationIndex].playVideo();

    // Vimeo
    if(vimeoPlayers[originIndex]) vimeoPlayers[originIndex].pause().catch(()=>{});
    if(vimeoPlayers[destinationIndex]) vimeoPlayers[destinationIndex].play().catch(()=>{});
}

Важно: использовать .catch() для промисов Vimeo, чтобы избежать ошибок при быстром переходе между секциями.

Дополнительные настройки видео в секциях

  • Автозапуск видео: добавление autoplay=1 в URL YouTube или autoplay=1 для Vimeo.
  • Без звука: параметр mute=1 помогает избегать блокировки автозапуска в браузерах.
  • Фоновые видео: для полного фонового эффекта можно использовать комбинацию CSS и API, чтобы видео растягивалось на всю секцию.

Пример CSS для адаптивного видео:

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.77%; /* 16:9 ratio */
    height: 100%;
    transform: translate(-50%, -50%);
}

Отслеживание событий видео

YouTube:

players[index] = new YT.Player(iframe, {
    events: {
        'onStateChange': function(event){
            if(event.data === YT.PlayerState.ENDED){
                console.log('Видео завершено');
            }
        }
    }
});

Vimeo:

vimeoPlayers[index].on('ended', function() {
    console.log('Видео завершено');
});

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

Советы по производительности

  • Загружать видео только для активной секции, чтобы уменьшить нагрузку на страницу.
  • Динамически инициализировать плееры при входе в секцию, а уничтожать их при уходе.
  • Использовать lazy loading для iframe через loading="lazy".
  • Ограничить одновременное воспроизведение одного видео для экономии ресурсов браузера.

Итоговая структура

  1. Контейнер секции с iframe YouTube или Vimeo.
  2. Инициализация fullPage.js с onLeave.
  3. Подключение API видео.
  4. Создание и управление плеерами через массивы.
  5. Автоматическое воспроизведение и остановка при смене секций.
  6. Обработка событий завершения видео и ошибок.
  7. Оптимизация производительности с lazy load и ограничением одновременных плееров.

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

Оглавление