Работа с субтитрами

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

Подключение субтитров к видео

Для начала необходимо создать структуру HTML, которая будет включать элемент <video>, в который можно встроить субтитры. Важно помнить, что субтитры должны быть в формате WebVTT (.vtt). Пример базовой структуры:

<video id="my-video" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="ru" label="Русский" default>
  Ваш браузер не поддерживает видео тег.
</video>

В этом примере используется элемент <track>, который добавляет субтитры к видео. Атрибут kind="subtitles" указывает, что это именно субтитры, а не другие виды текста (например, описание для слабовидящих). Атрибут srclang="ru" задает язык субтитров, а label="Русский" позволяет указать название языка в плеере.

Основы формата WebVTT

Формат VTT (WebVTT) используется для хранения текстовых субтитров. Он прост в создании и редактировании. Структура файла WebVTT следующая:

WEBVTT

1
00:00:01.000 --> 00:00:05.000
Привет, это первый субтитр.

2
00:00:06.000 --> 00:00:10.000
Здесь начинается второй субтитр.

Каждый блок субтитров начинается с нумерации, за которой следуют временные метки (в формате часы:минуты:секунды.миллисекунды), указывающие, когда субтитр должен появиться и исчезнуть. Текст самого субтитра пишется сразу под временной меткой.

Взаимодействие с BasicLightbox

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

import basicLightbox from 'basiclightbox';

const videoHtml = `
  <video id="video-with-subtitles" controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="ru" label="Русский" default>
    Ваш браузер не поддерживает видео тег.
  </video>
`;

const instance = basicLightbox.create(videoHtml);
instance.show();

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

Динамическое управление субтитрами

Возможности BasicLightbox можно расширить для динамического управления субтитрами. Например, можно добавлять, изменять или удалять субтитры в процессе просмотра. Для этого необходимо использовать JavaScript для манипуляций с элементом <track>.

Пример кода для включения/выключения субтитров:

const video = document.getElementById('video-with-subtitles');
const track = video.textTracks[0];

const toggleSubtitles = () => {
  track.mode = (track.mode === 'showing') ? 'hidden' : 'showing';
};

// Пример использования:
document.getElementById('toggle-subtitles').addEventListener('click', toggleSubtitles);

В данном примере осуществляется переключение режима отображения субтитров через изменение свойства mode текстовой дорожки. В случае, если субтитры включены, они скрываются, и наоборот.

Настройки отображения субтитров

Также стоит упомянуть возможность настройки отображения субтитров через стили CSS. Элементы, связанные с субтитрами, могут быть стилизованы с использованием стандартных CSS-свойств. Например, можно изменить шрифт, цвет или расположение субтитров:

video::cue {
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 18px;
  font-family: Arial, sans-serif;
}

Данный код изменяет внешний вид субтитров, установленных на видео. Элемент ::cue позволяет задавать стили непосредственно для текста субтитров, изменяя их цвет, шрифт и фон.

Совмещение с другими функциональностями

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

const videoHtmlWithInfo = `
  <div class="video-container">
    <video id="video-with-subtitles" controls>
      <source src="video.mp4" type="video/mp4">
      <track src="subtitles.vtt" kind="subtitles" srclang="ru" label="Русский" default>
      Ваш браузер не поддерживает видео тег.
    </video>
    <div class="info-overlay">Информация о видео</div>
  </div>
`;

const instanceWithInfo = basicLightbox.create(videoHtmlWithInfo);
instanceWithInfo.show();

Здесь добавлен дополнительный блок info-overlay, который может содержать текстовую информацию, показываемую поверх видео, не мешая просмотру и субтитрам.

Заключение

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

Оглавление