Остановка видео

ScrollMagic — библиотека для создания анимаций на основе прокрутки страницы, тесно интегрируемая с элементами DOM и медиаконтентом. Управление воспроизведением видео через ScrollMagic позволяет синхронизировать воспроизведение с позицией скролла, что особенно полезно для интерактивных лендингов и презентаций.

Подключение ScrollMagic и видеоэлемента

Для работы с видео необходимо подключить библиотеку ScrollMagic и иметь доступ к HTML-элементу <video>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<video id="intro-video" width="640" height="360" preload="auto">
    <source src="video.mp4" type="video/mp4">
    Ваш браузер не поддерживает видео.
</video>
const controller = new ScrollMagic.Controller();
const video = document.getElementById('intro-video');

Ключевым моментом является полный контроль видео через события ScrollMagic, что требует использования сцен (Scene) и обработчиков событий enter, leave и progress.

Создание сцены для остановки видео

Чтобы остановить видео в определённой точке скролла, создаётся сцена с duration равным нулю (или определённой длиной участка скролла, если нужно плавное управление):

const stopScene = new ScrollMagic.Scene({
    triggerElement: '#video-trigger', // элемент, при достижении которого будет остановка
    triggerHook: 0.5 // позиция на экране (0 = верх, 1 = низ)
})
.on('enter', () => {
    video.pause();
})
.addTo(controller);

Пояснение ключевых параметров:

  • triggerElement — DOM-элемент, с которым сцена будет привязана.
  • triggerHook — точка на экране, при которой срабатывает событие (0 — верх окна, 1 — низ окна, 0.5 — середина).
  • on('enter') — вызывается при входе сцены в область видимости.
  • video.pause() — останавливает воспроизведение видео.

Управление воспроизведением при прокрутке

Если необходимо не просто остановить, а синхронизировать видео с прокруткой, используется событие progress, которое возвращает значение от 0 до 1 в зависимости от позиции скролла относительно сцены:

const syncScene = new ScrollMagic.Scene({
    triggerElement: '#video-trigger',
    duration: 1000 // длина сцены в пикселях
})
.on('progress', event => {
    const videoDuration = video.duration || 1;
    video.currentTime = videoDuration * event.progress;
})
.addTo(controller);

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

  • event.progress — нормализованное значение текущей позиции в сцене.
  • video.currentTime — задаёт текущий кадр видео.
  • duration сцены определяет, за какой промежуток прокрутки видео пройдет от начала до конца.

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

Можно создавать несколько сцен для разных эффектов:

const pauseScene = new ScrollMagic.Scene({
    triggerElement: '#pause-point',
    triggerHook: 0.3
})
.on('enter', () => video.pause())
.addTo(controller);

const playScene = new ScrollMagic.Scene({
    triggerElement: '#play-point',
    triggerHook: 0.7
})
.on('enter', () => video.play())
.addTo(controller);

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

Интеграция с анимациями Tween

ScrollMagic отлично работает с TweenMax/TweenLite. Можно комбинировать остановку видео с другими анимациями:

const tween = TweenMax.to('#video-caption', 1, {opacity: 1});

const scene = new ScrollMagic.Scene({
    triggerElement: '#video-section',
    duration: 500
})
.setTween(tween)
.on('enter', () => video.pause())
.on('leave', () => video.play())
.addTo(controller);

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

  • setTween — задаёт анимацию для DOM-элемента.
  • on('enter') и on('leave') позволяют синхронизировать состояние видео с анимацией.

Особенности кроссбраузерности

  • Необходимо учитывать, что в некоторых браузерах видео не воспроизводится автоматически без взаимодействия пользователя.
  • Для мобильных устройств рекомендуется добавлять muted атрибут, чтобы видео могло запускаться при скролле:
<video id="intro-video" muted autoplay playsinline>
    <source src="video.mp4" type="video/mp4">
</video>
  • Всегда проверять video.readyState перед управлением временем воспроизведения, чтобы избежать ошибок доступа к currentTime.

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

  • Для больших видео использовать preload="metadata" вместо полного preload="auto" для уменьшения нагрузки.
  • Сцены с progress могут вызываться десятки раз за секунду; рекомендуется использовать requestAnimationFrame или throttle, если видео большое и управление ресурсозатратно.
  • Объединение нескольких действий в одной сцене снижает количество событий и повышает плавность скролл-анимаций.

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

Оглавление