Вставка видео и медиа

Для работы с видео и медиа в Markdown через Markdown-it необходимо сначала установить и подключить библиотеку:

const MarkdownIt = require('markdown-it');
const md = new MarkdownIt();

Markdown-it по умолчанию не поддерживает прямую вставку видео или аудио-тегов HTML, но допускает расширение функционала с помощью плагинов или встроенного синтаксиса HTML.

Использование HTML-тегов для медиа

Markdown позволяет вставлять чистый HTML, что делает возможным использование тегов <video> и <audio> напрямую:

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает аудио.
</audio>

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

Особенности:

  • Атрибут controls добавляет стандартные элементы управления воспроизведением.
  • Можно использовать autoplay, loop, muted для кастомизации поведения.
  • Важно указывать тип медиа через type (video/mp4, audio/mpeg).

Настройка безопасного рендеринга HTML

Если включен режим безопасного рендеринга (html: false), HTML-теги будут экранироваться. Для вставки медиа необходимо разрешить HTML:

const md = new MarkdownIt({
  html: true
});

Это позволит использовать все стандартные HTML-теги для медиа внутри Markdown.

Плагины для расширенной поддержки видео

Для более удобной работы с видео и аудио можно использовать плагины, которые добавляют специальные синтаксисы. Пример: markdown-it-video.

Установка:

npm install markdown-it-video

Подключение и использование:

const markdownItVideo = require('markdown-it-video');
md.use(markdownItVideo, {
  youtube: { width: 640, height: 390 },
  vimeo: { width: 640, height: 390 }
});

const result = md.render(`
@[youtube](dQw4w9WgXcQ)
@ 
`);
  • Синтаксис @[youtube](ID) позволяет вставлять YouTube-видео по идентификатору.
  • Плагин автоматически формирует корректный <iframe> с указанными размерами.
  • Поддерживаются параметры ширины, высоты и автозапуска.

Настройка атрибутов видео через Markdown

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

md.renderer.rules.video = function(tokens, idx) {
  const token = tokens[idx];
  return `<video src="${token.content}" width="800" controls autoplay></video>`;
};

Такой подход позволяет создавать собственный синтаксис в Markdown, например:

:::video
video.mp4
:::

И через кастомный рендерер преобразовывать его в полноценный тег <video> с нужными атрибутами.

Встраивание внешних медиа через iframe

Для сторонних сервисов (YouTube, Vimeo, Dailymotion) оптимально использовать <iframe>:

<iframe width="640" height="360" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
  • allowfullscreen включает режим полноэкранного воспроизведения.
  • Можно добавлять allow="autoplay; encrypted-media" для поддержки расширенных функций.
  • Плагин markdown-it-video автоматизирует этот процесс и позволяет не писать iframe вручную.

Вставка изображений и превью для видео

Для улучшения UX часто используют превью-картинки:

[![Превью видео](preview.jpg)](video.mp4)
  • Клик по изображению открывает видео.
  • Можно использовать сочетание HTML и Markdown для более сложного оформления:
<a href="video.mp4">
  <img src="preview.jpg" alt="Видео-превью" width="640">
</a>

Это решение совместимо с любыми Markdown-it плагинами, не требуя дополнительной настройки.

Итоговая структура вставки медиа

  • Локальное видео: <video> с <source> и атрибутами.
  • Локальное аудио: <audio> с <source> и атрибутами.
  • Внешние сервисы: <iframe> или плагины типа markdown-it-video.
  • Превью и UX: использование <a> с изображением для кликабельных видео.
  • Кастомизация: создание собственных правил рендеринга и синтаксиса для Markdown.

Такой подход позволяет интегрировать видео и аудио в Markdown-it гибко и безопасно, сохраняя контроль над HTML и поведение медиа в браузере.

Оглавление