muxinc/next-video

Что это?

Ключевые возможности

• 01Синхронизирует локальные видеофайлы с удалённым хранилищем и автоматически обрабатывает их с помощью команды sync.
• 02Не добавляет большие видеофайлы в git, но сохраняет небольшие файлы метаданных JSON.
• 03Поддерживает Mux, Vercel Blob, Backblaze, Amazon S3 и Cloudflare R2 в качестве провайдеров.
• 04С Mux автоматически создаёт постеры-заглушки и миниатюры, отображаемые при наведении на таймлайн.
• 05Предлагает настраиваемые темы плеера и возможность подключить собственный компонент плеера.
• 06Включает отдельный компонент плеера и компонент фонового видео.

Сценарии использования

• Размещение маркетинговых или продуктовых видео на сайте Next.js без добавления медиафайлов в репозиторий.
• Добавление фонового видео в hero-секцию без элементов управления плеером.
• Встраивание видео с адаптивным стримингом и субтитрами через Mux.
• Перенос существующего хостинга видео на S3 или R2 в процесс сборки Next.js.

Быстрый старт

1. 1

   Запустите автоматическую настройку в корневой папке проекта Next.js

   npx -y next-video init
2. 2

   Добавьте токен доступа Mux в .env.local

3. 3

   Добавьте видео в /videos и синхронизируйте его с удалённым хранилищем

   npx next-video sync
4. 4

   Запустите сервер разработки и откройте демонстрационную страницу

   npm run dev

Что важно знать

• !Для работы удалённого хранилища и оптимизации по умолчанию необходимы аккаунт Mux и токен доступа.
• !Для маршрута /api/video по умолчанию не требуется аутентификация; в рабочей среде доступ к нему следует ограничить.

Темы

Частые вопросы

Что такое next-video?

React-компонент для добавления видео в приложения Next.js с автоматической загрузкой, оптимизацией и доставкой через CDN от Mux или других провайдеров хранилищ. next-video — React-компонент, расширяющий стандартный элемент video для проектов Next.js. Видео размещаются в локальной папке /videos, а команда sync загружает их в удалённое хранилище и обрабатывает, чтобы большие медиафайлы не попадали в git-репозиторий. Импорты видеофайлов преобразуются в объекты ресурсов, которые компонент Video может воспроизводить напрямую.

next-video можно использовать бесплатно? Какая у него лицензия?

next-video распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

next-video всё ещё поддерживается?

Активно поддерживается. Последний коммит в next-video — 3 нояб. 2026 г..

Для чего можно использовать next-video?

Размещение маркетинговых или продуктовых видео на сайте Next.js без добавления медиафайлов в репозиторий. Добавление фонового видео в hero-секцию без элементов управления плеером. Встраивание видео с адаптивным стримингом и субтитрами через Mux. Перенос существующего хостинга видео на S3 или R2 в процесс сборки Next.js.

Как установить next-video?

Запустите автоматическую настройку в корневой папке проекта Next.js: npx -y next-video init Добавьте токен доступа Mux в .env.local Добавьте видео в /videos и синхронизируйте его с удалённым хранилищем: npx next-video sync Запустите сервер разработки и откройте демонстрационную страницу: npm run dev

Где скачать next-video?

Исходный код и инструкции по установке — на GitHub: https://github.com/muxinc/next-video