---
title: "Блок «Видео» — загрузка и встроенные плееры"
description: "Загрузка видео или встраивание плеера с автоматической конвертацией GIF в WebM и щедрым лимитом на размер файла."
source: https://blokeditor.com/ru/docs/video/
lastmod: 2026-09-07
---

Фреймворк JavaScript

Блочные инструменты Видео

# Видео: загрузка и встроенные плееры

Полнофункциональный блок видеоплеера. Отрисовывает загруженное или указанное ссылкой видео с собственной панелью управления (воспроизведение и пауза, полоса перемотки с буферизованным диапазоном и предпросмотром при наведении, громкость, скорость воспроизведения, повтор, «картинка в картинке», театральный и полноэкранный режимы), необязательной подписью и мягким свечением позади плеера. Видео отправляется через загрузчик, который предоставляет потребитель; если его нет, инструмент откатывается на локальный blob URL (uploadByFile) или на вставленный URL (uploadByUrl). Необязательный список разрешённых MIME-типов и максимальный размер ограничивают, что можно принять.

### Импорт

TypeScript

```
import { Video } from '@bloklabs/core/tools';
```

### Конфигурация

| Опция | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `uploader` | `VideoUploader` | `undefined` | Загрузчик от потребителя с необязательными методами `uploadByFile(file, ctx)` (возвращает `{ url, fileName? }`) и `uploadByUrl(url, ctx)` (возвращает `{ url }`). Колбэк `ctx.onProgress(percent)` сообщает о прогрессе загрузки. Если загрузчик не задан, видео откатывается на blob URL или на введённый URL — а он тогда должен быть прямой ссылкой на медиафайл (`.mp4`, `.webm`, `.ogg`, `.mov`, `.m4v`), поскольку попадает в `<video src>` дословно. Укажите `uploadByUrl`, чтобы принимать любой URL и разрешать его самостоятельно. |
| `types` | `string[]` | `['video/*']` | Список разрешённых MIME-типов для загрузок. Записи могут быть точными (`video/mp4`) или групповыми (`video/*`). По умолчанию разрешён любой тип видео. |
| `maxSize` | `MaxSizeConfig` | `100 MiB` | Максимальный размер загрузки. Число ограничивает все типы (в байтах); объект задаёт ограничение для каждого MIME-типа, где `'*'` — запасное значение. |
| `sources` | `'upload' | 'url' | 'both'` | `'both'` | Ограничивает способы добавления медиа — только загрузка файла, только URL или оба варианта. |
| `captionPlaceholder` | `string` | `"Write a caption…"` | Плейсхолдер, который показывается в поле подписи. |
| `glow` | `'more' | 'less' | 'minimal' | 'none'` | `'minimal'` | Интенсивность мягкого свечения, отрисовываемого позади каждого плеера. |

### Формат данных

TypeScript

```
interface VideoData {
  url: string;             // Video source URL — http(s) or blob:
  caption?: string;        // Plain-text caption
  captionVisible?: boolean; // Caption visible in the rendered state (default true)
  width?: number;          // Width as percent of the editor container, 10–100 (resize handle, default 100)
  alignment?: 'left' | 'center' | 'right';
  autoplay?: boolean;      // Autoplay on render
  loop?: boolean;          // Loop playback
  hideControls?: boolean;  // Render a control-free player
  fileName?: string;       // Original filename, when known
  mimeType?: string;       // MIME type
  aspectRatio?: string;    // e.g. "16 / 9", used to reserve layout space
}
```

JSON

```
{
  "id": "vid001",
  "type": "video",
  "data": {
    "url": "https://example.com/media/clip.mp4",
    "fileName": "clip.mp4",
    "mimeType": "video/mp4",
    "alignment": "center"
  }
}
```

### Пример использования

TypeScript

```
import { Blok } from '@bloklabs/core';
import { Video } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    video: {
      class: Video,
      config: {
        uploader: {
          async uploadByFile(file) {
            const url = await myUpload(file);
            return { url, fileName: file.name };
          },
        },
      },
    },
  },
});
```