Встраивание видео в секции

Библиотека fullPage.js позволяет создавать полноэкранные сайты с вертикальной и горизонтальной навигацией между секциями. Одним из часто используемых элементов является видео, которое может выступать фоном секции или быть центральным элементом контента. Для корректной работы видео необходимо учитывать особенности HTML, CSS и API fullPage.js.

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

Видео может быть встроено двумя основными способами:

  1. Через тег <video> – подходит для локальных файлов или видео, размещённых на сервере.
  2. Через iframe – для внешних сервисов, таких как YouTube или Vimeo.

Использование <video> тега

<div class="section" id="videoSection">
    <video autoplay muted loop playsinline class="section-video">
        <source src="video/background.mp4" type="video/mp4">
        Ваш браузер не поддерживает воспроизведение видео.
    </video>
    <div class="content">
        <h1>Заголовок секции</h1>
        <p>Текст поверх видео</p>
    </div>
</div>

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

  • autoplay – автоматическое воспроизведение видео.
  • muted – без звука (обязательный атрибут для автозапуска в большинстве браузеров).
  • loop – бесконечный цикл воспроизведения.
  • playsinline – предотвращает открытие видео в полноэкранном режиме на мобильных устройствах.

CSS для корректного отображения видео на фоне:

.section-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Сохраняет пропорции и заполняет секцию */
    z-index: -1; /* Видео остаётся позади контента */
}

Использование iframe (YouTube / Vimeo)

Для вставки внешнего видео используется iframe. Например, для YouTube:

<div class="section" id="youtubeSection">
    <div class="video-wrapper">
        <iframe 
            src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID" 
            frameborder="0" 
            allow="autoplay; encrypted-media" 
            allowfullscreen
        ></iframe>
    </div>
</div>

CSS для адаптивного iframe:

.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    pointer-events: none; /* Отключает взаимодействие с видео */
}

Примечание: Для YouTube необходимо добавить параметр playlist с ID видео при использовании loop, иначе оно не будет зацикливаться.

Управление воспроизведением видео через fullPage.js

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

  • afterLoad(origin, destination, direction) – вызывается после загрузки секции.
  • onLeave(origin, destination, direction) – вызывается перед уходом из секции.

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

new fullpage('#fullpage', {
    sectionsColor: ['#1abc9c', '#3498db'],
    afterLoad: function(origin, destination, direction){
        const section = destination.item;
        const video = section.querySelector('video');
        if(video){
            video.play();
        }
    },
    onLeave: function(origin, destination, direction){
        const section = origin.item;
        const video = section.querySelector('video');
        if(video){
            video.pause();
        }
    }
});

Такой подход уменьшает нагрузку на браузер и предотвращает одновременное воспроизведение нескольких видео.

Использование видео в качестве фона с параллакс-эффектом

Для создания эффекта параллакса видео необходимо синхронизировать движение секции с прокруткой. Используется событие scrollOverflow и CSS трансформации:

.section-video {
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}
fullpage_api.setAllowScrolling(true);

document.addEventListener('scroll', () => {
    const section = document.querySelector('.active');
    const video = section.querySelector('video');
    if(video){
        const scrollOffset = window.scrollY / 5;
        video.style.transform = `translateY(${scrollOffset}px)`;
    }
});

Этот приём создаёт плавное движение видео относительно контента секции.

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

  • Использовать формат MP4 (H.264) для максимальной совместимости.
  • Минимизировать разрешение видео для мобильных устройств.
  • Применять preload="metadata" для уменьшения нагрузки на сеть при загрузке страницы.
  • Размещать видео на CDN для ускорения загрузки.
  • Поддерживать мутинг и autoplay, чтобы соответствовать политикам браузеров.

Дополнительные возможности

  • Звуковое сопровождение: можно включать звук после взаимодействия пользователя (click или scroll).
  • Кнопки управления: управление воспроизведением через JavaScript (video.play(), video.pause()).
  • Синхронизация нескольких видео: полезно для слайдов, где несколько секций содержат видео, и нужно последовательное воспроизведение.

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

Оглавление