Полноэкранный режим видео

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

Инициализация BasicLightbox для видео

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

Подключение библиотеки

Для начала требуется подключить саму библиотеку BasicLightbox. Это можно сделать через CDN или скачать и подключить локально. Например, для подключения через CDN:

<head>
  <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>
</head>

Создание и отображение модального окна

Для создания модального окна, которое будет содержать видео, необходимо передать HTML-контент в функцию basicLightbox.create(). Видео будет вставлено внутри модального окна как элемент <video>. Для активации полноэкранного режима можно использовать атрибуты HTML5.

Пример базовой реализации:

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

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

    lightbox.show();
  });
</script>

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

Включение полноэкранного режима

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

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

Однако, если нужно добавить дополнительный функционал для полноэкранного режима, можно использовать JavaScript API для управления полноэкранным режимом.

Пример с добавлением кнопки для перехода в полноэкранный режим вручную:

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

    // Программно запускаем полноэкранный режим по клику
    videoElement.addEventListener('click', function() {
      if (videoElement.requestFullscreen) {
        videoElement.requestFullscreen();
      } else if (videoElement.mozRequestFullScreen) { // Firefox
        videoElement.mozRequestFullScreen();
      } else if (videoElement.webkitRequestFullscreen) { // Chrome, Safari и другие
        videoElement.webkitRequestFullscreen();
      } else if (videoElement.msRequestFullscreen) { // IE/Edge
        videoElement.msRequestFullscreen();
      }
    });
  });
</script>

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

Управление состоянием полноэкранного режима

Иногда возникает необходимость отслеживать, был ли активирован полноэкранный режим и каким образом он завершен (например, по нажатию кнопки Esc или другого события). Для этого можно использовать события, связанные с полноэкранным режимом, такие как fullscreenchange или webkitfullscreenchange.

Пример кода для отслеживания изменения состояния полноэкранного режима:

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

    videoElement.addEventListener('click', function() {
      if (videoElement.requestFullscreen) {
        videoElement.requestFullscreen();
      } else if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else if (videoElement.webkitRequestFullscreen) {
        videoElement.webkitRequestFullscreen();
      } else if (videoElement.msRequestFullscreen) {
        videoElement.msRequestFullscreen();
      }
    });

    // Слушаем изменения состояния полноэкранного режима
    document.addEventListener('fullscreenchange', function() {
      if (!document.fullscreenElement) {
        console.log('Видео покинуло полноэкранный режим');
      }
    });
    document.addEventListener('webkitfullscreenchange', function() {
      if (!document.webkitFullscreenElement) {
        console.log('Видео покинуло полноэкранный режим');
      }
    });
  });
</script>

В этом примере после активации полноэкранного режима будет выведено сообщение в консоль, если видео покидает полноэкранный режим.

Особенности и ограничения

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

  • Стилизация: Библиотека не предоставляет возможности для глубокой кастомизации интерфейса модальных окон. Все элементы управления, такие как кнопки для воспроизведения или переключения в полноэкранный режим, являются стандартными для браузера.
  • Кроссбраузерность: Некоторые особенности, такие как управление полноэкранным режимом, могут работать по-разному в различных браузерах. Например, поддержка различных методов для включения полноэкранного режима в старых версиях браузеров может быть ограничена.
  • Производительность: Использование видео в модальных окнах может несколько снизить производительность, особенно на слабых устройствах или при воспроизведении тяжелых видеофайлов.

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

Оглавление