Фреймворк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 };
          },
        },
      },
    },
  },
});