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

Фреймворк 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. Тогда этот URL должен быть прямой ссылкой на медиафайл (`.mp4`, `.webm`, `.ogg`, `.mov`, `.m4v`), поскольку он попадает в `<video src>` дословно. Укажите `uploadByUrl`, чтобы принимать любой URL и разрешать его самостоятельно. |
| `types` | `string[]` | `['video/*']` | Список разрешённых MIME-типов для загрузок. Записи могут быть точными (`video/mp4`) или групповыми (`video/*`). По умолчанию разрешён любой тип видео. |
| `maxSize` | `MaxSizeConfig` | `100 MiB` | Максимальный размер загрузки. Число ограничивает все типы, в байтах. Объект задаёт ограничение для каждого MIME-типа, где `'*'` служит запасным значением. |
| `onUploadError` | `UploadErrorHandler` | `undefined` | Вызывается, когда загрузка не удалась. Получает `{ code, tool, message, file?, url?, size?, maxSize?, cause }`. Ничего не вернули: блок показывает своё сообщение. Вернули строку: блок показывает её. Вернули `false`: блок возвращается в пустое состояние без ошибки, и вы можете показать свой тост. Если ваш uploader отклонил промис, придёт код `UPLOAD_FAILED`. Исходная ошибка лежит в `cause`. |
| `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
  variants?: { url: string; mimeType: string }[]; // Other formats, best first
}
```

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 };
          },
        },
      },
    },
  },
});
```