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

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

Подключение и создание модального окна с видео

Для начала необходимо подключить библиотеку BasicLightbox. Это можно сделать с помощью CDN или скачав её на локальный сервер.

<link href="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.4/dist/basicLightbox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.4/dist/basicLightbox.min.js"></script>

После подключения библиотеки создаём элемент, который будет запускать модальное окно с видео. Пример:

<button id="open-video">Открыть видео</button>

Далее создаём функцию для отображения видео в модальном окне. Для этого можно использовать HTML-элемент <video>, который будет воспроизводить видео при открытии модального окна.

document.getElementById('open-video').addEventListener('click', function() {
  const videoWindow = basicLightbox.create(`
    <video width="600" controls autoplay>
      <source src="path/to/video.mp4" type="video/mp4">
      Ваш браузер не поддерживает видео.
    </video>
  `);

  videoWindow.show();
});

Включение автовоспроизведения

Чтобы видео начинало воспроизводиться автоматически при открытии модального окна, необходимо в элементе <video> использовать атрибут autoplay. Этот атрибут заставляет видео начать воспроизведение без участия пользователя, как только оно становится доступным.

В приведённом примере атрибут autoplay уже присутствует в теге <video>. Это обеспечивает автовоспроизведение сразу после появления модального окна.

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

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

Пример с кнопками управления:

document.getElementById('open-video').addEventListener('click', function() {
  const videoWindow = basicLightbox.create(`
    <div>
      <video id="video" width="600" controls autoplay>
        <source src="path/to/video.mp4" type="video/mp4">
        Ваш браузер не поддерживает видео.
      </video>
      <button id="pause-btn">Пауза</button>
      <button id="play-btn">Играть</button>
    </div>
  `);

  const videoElement = videoWindow.element().querySelector('#video');
  const pauseButton = videoWindow.element().querySelector('#pause-btn');
  const playButton = videoWindow.element().querySelector('#play-btn');

  pauseButton.addEventListener('click', function() {
    videoElement.pause();
  });

  playButton.addEventListener('click', function() {
    videoElement.play();
  });

  videoWindow.show();
});

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

Закрытие окна после окончания видео

Для более динамичного поведения можно настроить автоматическое закрытие модального окна после окончания воспроизведения видео. Это можно сделать с помощью события ended, которое срабатывает, когда видео достигает конца.

Пример:

document.getElementById('open-video').addEventListener('click', function() {
  const videoWindow = basicLightbox.create(`
    <video id="video" width="600" controls autoplay>
      <source src="path/to/video.mp4" type="video/mp4">
      Ваш браузер не поддерживает видео.
    </video>
  `);

  const videoElement = videoWindow.element().querySelector('#video');

  videoElement.addEventListener('ended', function() {
    videoWindow.close();
  });

  videoWindow.show();
});

Теперь модальное окно автоматически закроется, как только видео закончится.

Использование различных форматов видео

BasicLightbox позволяет встраивать видео в различные форматы, такие как .mp4, .webm или .ogg. При этом важно учитывать, что различные браузеры поддерживают разные форматы, и для обеспечения совместимости следует использовать несколько источников внутри тега <video>.

Пример с несколькими форматами:

document.getElementById('open-video').addEventListener('click', function() {
  const videoWindow = basicLightbox.create(`
    <video width="600" controls autoplay>
      <source src="path/to/video.mp4" type="video/mp4">
      <source src="path/to/video.webm" type="video/webm">
      <source src="path/to/video.ogg" type="video/ogg">
      Ваш браузер не поддерживает видео.
    </video>
  `);

  videoWindow.show();
});

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

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

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

  • Задержка начала воспроизведения. В некоторых случаях имеет смысл задержать начало воспроизведения на несколько миллисекунд для того, чтобы видео могло быть закешировано или подготовлено.
  • Включение превью. Вместо того чтобы сразу загружать весь видеоконтент, можно использовать изображение-превью, которое подгружается до начала воспроизведения. Это особенно полезно для больших файлов.

Пример с превью:

document.getElementById('open-video').addEventListener('click', function() {
  const videoWindow = basicLightbox.create(`
    <div>
      <img src="path/to/preview.jpg" alt="Preview Image" width="600">
      <button id="play-video">Играть</button>
    </div>
  `);

  const playButton = videoWindow.element().querySelector('#play-video');
  playButton.addEventListener('click', function() {
    videoWindow.close();

    const videoWindowWithVideo = basicLightbox.create(`
      <video width="600" controls autoplay>
        <source src="path/to/video.mp4" type="video/mp4">
        Ваш браузер не поддерживает видео.
      </video>
    `);
    
    videoWindowWithVideo.show();
  });

  videoWindow.show();
});

Здесь вместо воспроизведения видео сразу показывается изображение-превью, которое пользователь может заменить кнопкой “Играть” для начала воспроизведения.

Заключение

Библиотека BasicLightbox позволяет с лёгкостью интегрировать видеоконтент в модальные окна с поддержкой автовоспроизведения. Важнейшими аспектами являются использование атрибута autoplay, управление воспроизведением через кнопки и создание логики для автоматического закрытия окна после окончания видео. Эти функции делают взаимодействие с медиафайлами более удобным и динамичным для пользователей.

Оглавление