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

MDX (Markdown + JSX) позволяет интегрировать JSX-компоненты прямо в Markdown-документы, что делает его мощным инструментом для построения интерактивного контента. Встраивание видео — один из ключевых элементов динамических страниц. Существует несколько подходов к реализации, каждый из которых имеет свои особенности и ограничения.

Использование HTML-тега <video>

В MDX можно использовать стандартный HTML-тег <video> с полным контролем над параметрами проигрывания.

<video
  src="/videos/sample.mp4"
  controls
  autoplay={false}
  loop={false}
  muted={false}
  width="640"
  height="360"
>
  Ваш браузер не поддерживает тег video.
</video>

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

  • controls — отображает стандартные элементы управления (плей, пауза, ползунок времени).
  • autoplay — автоматическое воспроизведение видео при загрузке страницы. Для браузеров часто требуется установка muted={true} для работы.
  • loop — повтор воспроизведения.
  • muted — отключение звука по умолчанию.
  • fallback-контент — текст или альтернативное сообщение для браузеров, не поддерживающих <video>.

Использование компонента ReactPlayer

Библиотека react-player упрощает работу с внешними видео-сервисами (YouTube, Vimeo, SoundCloud) и предоставляет единый API для управления видео.

import ReactPlayer from 'react-player';

<ReactPlayer
  url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  playing={false}
  controls={true}
  width="100%"
  height="480px"
/>

Преимущества:

  • Поддержка множества платформ без необходимости отдельной настройки для каждого сервиса.
  • Гибкое управление воспроизведением через свойства playing, volume, muted.
  • Легкая интеграция с хуками React для отслеживания состояния воспроизведения.

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

Динамическая загрузка видео через MDX-компоненты

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

import VideoPlayer from './components/VideoPlayer.mdx';

<VideoPlayer src="/videos/tutorial.mp4" controls loop />

Особенности такого подхода:

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

Настройка адаптивного видео

Для корректного отображения на разных устройствах видео должно быть адаптивным. Наиболее простой способ — использование CSS.

<div style={{ position: 'relative', paddingTop: '56.25%' }}>
  <video
    src="/videos/sample.mp4"
    controls
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
    }}
  />
</div>

Объяснение:

  • paddingTop: '56.25%' — поддерживает соотношение сторон 16:9.
  • position: absolute и width: 100%, height: 100% позволяют видео масштабироваться вместе с контейнером.

Управление событиями видео

В MDX-компонентах можно использовать стандартные события DOM или React-события:

<video
  src="/videos/sample.mp4"
  controls
  onP lay={() => console.log('Видео начато')}
  onPa use={() => console.log('Видео приостановлено')}
  onEn ded={() => console.log('Видео завершено')}
/>

Часто используемые события:

  • onPlay — срабатывает при запуске воспроизведения.
  • onPause — срабатывает при приостановке.
  • onEnded — срабатывает после окончания видео.
  • onTimeUpdate — позволяет отслеживать прогресс воспроизведения для кастомных таймеров или аналитики.

Поддержка субтитров

Видео можно снабдить субтитрами через тег <track>:

<video src="/videos/sample.mp4" controls>
  <track
    src="/videos/subtitles.vtt"
    kind="subtitles"
    srcLang="ru"
    label="Русский"
    default
  />
</video>
  • kind — тип дорожки (subtitles, captions, descriptions).
  • srcLang — язык субтитров.
  • label — отображаемое название дорожки.
  • default — автоматически включить дорожку при воспроизведении.

Lazy loading видео

Для оптимизации загрузки страниц и снижения потребления трафика можно использовать ленивую загрузку видео.

<video
  src="/videos/sample.mp4"
  controls
  loading="lazy"
  width="640"
  height="360"
/>

Если используется ReactPlayer, можно динамически подгружать компонент через React.lazy:

import React, { Suspense } from 'react';
const LazyPlayer = React.lazy(() => import('react-player'));

<Suspense fallback={<div>Загрузка видео...</div>}>
  <LazyPlayer url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" controls />
</Suspense>

Вывод

MDX позволяет встроить видео практически любым способом: через стандартные HTML-теги, компоненты React или внешние библиотеки. Ключевые аспекты — адаптивность, управление событиями, субтитры и оптимизация загрузки. Комбинируя эти подходы, можно создать гибкую систему видео-контента в рамках документации, блогов и учебных материалов.

Оглавление