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

Featherlight — минималистичная lightbox-библиотека на базе jQuery, не имеющая встроенной логики управления мультимедиа. Автовоспроизведение видео реализуется за счёт правильной инициализации содержимого и использования параметров видео-плееров или HTML5 API. Featherlight лишь отображает контент и предоставляет хуки жизненного цикла, на которых и строится управление воспроизведением.

Общий принцип автовоспроизведения

Механизм всегда сводится к одному из двух подходов:

передача параметров автовоспроизведения в URL iframe (YouTube, Vimeo и аналоги);
программный вызов play() у HTML5-видео в момент открытия lightbox.

Featherlight не вмешивается в содержимое, поэтому ответственность за запуск видео полностью лежит на разработчике.

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

Использование iframe и параметра autoplay

YouTube поддерживает автозапуск через параметр autoplay=1. Featherlight может открывать iframe напрямую:

<a href="https://www.youtube.com/embed/VIDEO_ID?autoplay=1"
   data-featherlight="iframe">
    Открыть видео
</a>

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

используется именно embed-URL;
autoplay=1 должен быть в строке запроса;
data-featherlight="iframe" указывает Featherlight отобразить iframe.

Ограничения браузеров

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

autoplay=1&mute=1

Пример:

<a href="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1"
   data-featherlight="iframe">

Без mute=1 видео часто не стартует автоматически, особенно в Chrome и Safari.

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

Vimeo использует аналогичный подход:

<a href="https://player.vimeo.com/video/VIDEO_ID?autoplay=1&muted=1"
   data-featherlight="iframe">

Отличия от YouTube:

параметр muted=1 вместо mute=1;
iframe всегда должен открываться с домена player.vimeo.com.

HTML5-видео и Featherlight

Базовая разметка

HTML5-видео открывается как inline-контент:

<video id="video1" controls preload="none">
    <source src="video.mp4" type="video/mp4">
</video>

<a href="#video1" data-featherlight="inline">Открыть</a>

В этом виде автовоспроизведение не произойдёт автоматически, даже при наличии атрибута autoplay.

Запуск видео через хуки Featherlight

Featherlight предоставляет callbacks, которые позволяют управлять видео:

$.featherlight.defaults.afterOpen = function () {
    const video = this.$content.find('video').get(0);
    if (video) {
        video.play();
    }
};

$.featherlight.defaults.beforeClose = function () {
    const video = this.$content.find('video').get(0);
    if (video) {
        video.pause();
        video.currentTime = 0;
    }
};

Что здесь происходит:

afterOpen срабатывает после отображения lightbox;
video.play() инициирует воспроизведение;
beforeClose останавливает видео и сбрасывает позицию.

Обязательное отключение звука

Для стабильного автозапуска:

<video muted playsinline>

Атрибуты:

muted — критически важен для автозапуска;
playsinline — предотвращает переход в полноэкранный режим на мобильных устройствах.

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

При наличии нескольких видео в одном документе логика должна учитывать контекст текущего lightbox:

$(document).on('featherlight:opened', function (event, featherlight) {
    const video = featherlight.$content.find('video')[0];
    if (video) video.play();
});

$(document).on('featherlight:close', function (event, featherlight) {
    const video = featherlight.$content.find('video')[0];
    if (video) {
        video.pause();
        video.currentTime = 0;
    }
});

Такой подход:

работает независимо от глобальных настроек;
корректно обрабатывает каждый экземпляр Featherlight;
предотвращает одновременное воспроизведение нескольких видео.

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

Featherlight часто используется с AJAX-контентом. В этом случае видео появляется уже после открытия окна, и стандартный afterOpen может быть недостаточен.

Пример с AJAX:

<a href="video.html" data-featherlight="ajax">Видео</a>

$(document).on('featherlight:content', function (event, featherlight) {
    const video = featherlight.$content.find('video')[0];
    if (video) video.play();
});

Событие featherlight:content срабатывает в момент, когда контент уже загружен и вставлен в DOM.

Типичные проблемы и их причины

Видео не запускается автоматически

отсутствует muted;
используется неправильный URL iframe;
попытка запустить видео до появления в DOM.

Видео продолжает играть после закрытия

отсутствует обработка beforeClose или featherlight:close;
видео вынесено за пределы $content.

Мобильные устройства игнорируют autoplay

не указан playsinline;
присутствует звук;
браузер применяет собственные ограничения энергосбережения.