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

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

Основы работы с Tingle.js

Tingle.js — это минималистичная библиотека для создания модальных окон. Модальные окна могут быть настроены для отображения как простых текстовых уведомлений, так и более сложных элементов, таких как встроенные видеоплееры. Сначала необходимо подключить библиотеку, установив её с помощью npm или через CDN:

<!-- Подключение через CDN -->
<script src="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.js"></script>

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

var modal = new tingle.modal({
  closeLabel: "Закрыть", // Текст кнопки для закрытия модала
  sticky: true, // Окно будет оставаться открытым, пока пользователь не закроет его вручную
  footer: true, // Включает нижний футер с кнопками
  // Другие опции конфигурации
});

Встраивание видео в модальное окно

Вставка видео в модальное окно — это простой процесс, однако важно правильно настроить HTML-структуру и управлять взаимодействием с видео для оптимальной работы.

  1. HTML-разметка для видео

    Для встраивания видео в модальное окно используйте HTML5 элемент <video>. Этот элемент позволяет вставить видео, которое можно воспроизвести прямо в модальном окне.

    Пример встраивания видео:

    <video id="myVideo" width="100%" controls>
  <source src="path-to-video.mp4" type="video/mp4">
  Ваш браузер не поддерживает элемент video.
</video>

  2. Добавление видео в модальное окно

    После того как модальное окно создано, его содержимое можно обновить с помощью метода setContent, который позволяет динамически встраивать HTML. В нашем случае это будет элемент <video>.

    Пример добавления видео в модальное окно:

    var modal = new tingle.modal({
  closeLabel: "Закрыть",
  sticky: true,
});

var videoHTML = '<video id="myVideo" width="100%" controls>' +
                '<source src="path-to-video.mp4" type="video/mp4">' +
                'Ваш браузер не поддерживает элемент video.' +
                '</video>';

modal.setContent(videoHTML);
modal.open();

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

При встраивании видео в модальное окно важно учесть, что видео должно начинать или приостанавливать воспроизведение в зависимости от действия пользователя. Это можно сделать с помощью JavaScript, чтобы контролировать воспроизведение видео при открытии и закрытии модального окна.

  1. Автозапуск видео

    Чтобы видео начинало воспроизведение сразу после открытия модального окна, можно использовать событие modal.open. В нем можно получить доступ к элементу видео и вызвать метод play().

    Пример:

    modal.on('open', function () {
  var video = document.getElementById('myVideo');
  if (video) {
    video.play();
  }
});

  2. Остановка видео при закрытии

    Чтобы видео останавливалось, когда пользователь закрывает модальное окно, нужно использовать событие modal.close. Это событие сработает при закрытии окна, и мы можем приостановить воспроизведение видео, вызвав метод pause().

    Пример:

    modal.on('close', function () {
  var video = document.getElementById('myVideo');
  if (video) {
    video.pause();
    video.currentTime = 0; // Сбрасываем время воспроизведения на начало
  }
});

Обработка других взаимодействий с видео

  1. Пауза и продолжение

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

    var playPauseButton = document.createElement('button');
playPauseButton.textContent = "Пауза/Продолжить";
playPauseButton.oncl ick = function () {
  var video = document.getElementById('myVideo');
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
};

modal.getFooter().appendChild(playPauseButton); // Добавляем кнопку в футер модала

  2. Полн screen

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

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

    var fullscreenButton = document.createElement('button');
fullscreenButton.textContent = "Полный экран";
fullscreenButton.oncl ick = function () {
  var video = document.getElementById('myVideo');
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) { // Firefox
    video.mozRequestFullScreen();
  } else if (video.webkitRequestFullscreen) { // Chrome и Safari
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) { // IE/Edge
    video.msRequestFullscreen();
  }
};

modal.getFooter().appendChild(fullscreenButton);

Стиль и адаптивность видео

  1. Адаптивность

    При встраивании видео в модальное окно важно учитывать, что видео должно корректно адаптироваться к размеру окна. Использование width="100%" для элемента <video> помогает сделать видео гибким и подстраивающимся под ширину окна.

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

    video {
  max-width: 100%;
  height: auto;
}

  2. Стилизация модального окна

    Важно также учитывать, что видео в модальном окне будет выглядеть лучше, если применить подходящие стили для самого окна. Tingle.js позволяет настраивать внешний вид модала через CSS.

    Пример стилизации модального окна:

    .tingle-modal {
  max-width: 800px;
  width: 90%;
  height: 80%;
  margin: auto;
}

Заключение

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

Оглавление