Repolode
Enviar
muxinc

muxinc/next-video

Un componente de React para añadir video a aplicaciones Next.js, con carga, optimización y entrega por CDN automáticas mediante Mux u otros proveedores de almacenamiento.

Ver en GitHubSitio web
Estrellas
1,225
Forks
71
Issues abiertos
1
Último commit
hace 3 días

¿Qué es?

next-video es un componente de React que amplía el elemento de video nativo para proyectos Next.js. Coloca los archivos de video en una carpeta local /videos y el comando de sincronización los carga en un almacenamiento remoto y los procesa, para que los archivos multimedia grandes no queden en el repositorio de git. Las importaciones de archivos de video se resuelven en objetos de recursos que el componente Video puede reproducir directamente.

De forma predeterminada, Mux se encarga del procesamiento y el alojamiento, y ofrece streaming adaptativo con compresión, imágenes de póster de vista previa automáticas, miniaturas de la línea de tiempo al pasar el cursor, subtítulos generados por IA y analíticas opcionales. El proyecto también admite Vercel Blob, Backblaze, Amazon S3 y Cloudflare R2 como proveedores, aunque solo Mux realiza el procesamiento necesario para esas funciones.

El reproductor está basado en Media Chrome, ofrece temas personalizables y se puede sustituir por un componente de reproductor propio. También hay componentes independientes de reproductor y de video de fondo para los casos en que no se necesitan carga ni procesamiento.

Funciones clave

  • 01Sincroniza archivos de video locales con almacenamiento remoto y los procesa automáticamente mediante el comando de sincronización.
  • 02Mantiene los archivos de video grandes fuera de git y registra los archivos pequeños de metadatos JSON.
  • 03Admite Mux, Vercel Blob, Backblaze, Amazon S3 y Cloudflare R2 como proveedores.
  • 04Ofrece imágenes de póster de vista previa y miniaturas de la línea de tiempo al pasar el cursor de forma automática con Mux.
  • 05Ofrece temas personalizables para el reproductor y un espacio para integrar un componente de reproductor propio.
  • 06Incluye un reproductor independiente y un componente de video de fondo.

Casos de uso

  • Alojar videos de marketing o de productos en un sitio Next.js sin incluir archivos multimedia en el repositorio.
  • Añadir una sección principal con video de fondo y sin controles de reproducción.
  • Incrustar videos que requieren streaming adaptativo y subtítulos mediante Mux.
  • Migrar el alojamiento de videos existente en S3 o R2 a un flujo de trabajo de compilación de Next.js.

Inicio rápido

  1. 1

    Ejecuta la configuración automática en la raíz de tu proyecto de Next.js

    npx -y next-video init
  2. 2

    Añade tu token de acceso de Mux a .env.local

  3. 3

    Añade un vídeo a /videos y sincronízalo con el almacenamiento remoto

    npx next-video sync
  4. 4

    Inicia el servidor de desarrollo y abre la página de demostración

    npm run dev

Antes de usarlo

  • El almacenamiento remoto y la optimización predeterminados requieren una cuenta de Mux y un token de acceso.
  • La ruta /api/video no requiere autenticación de forma predeterminada; debes protegerla en producción.

Temas

#react#nextjs#video#video-streaming#video-player#mux#hacktoberfest#next#react-video#video-processing

Preguntas frecuentes

¿Qué es next-video?
Un componente de React para añadir video a aplicaciones Next.js, con carga, optimización y entrega por CDN automáticas mediante Mux u otros proveedores de almacenamiento. next-video es un componente de React que amplía el elemento de video nativo para proyectos Next.js. Coloca los archivos de video en una carpeta local /videos y el comando de sincronización los carga en un almacenamiento remoto y los procesa, para que los archivos multimedia grandes no queden en el repositorio de git. Las importaciones de archivos de video se resuelven en objetos de recursos que el componente Video puede reproducir directamente.
¿next-video es gratuito? ¿Qué licencia tiene?
next-video es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿next-video sigue mantenido?
Mantenimiento activo. El último commit de next-video fue el 3 nov 2026.
¿Para qué puedo usar next-video?
Alojar videos de marketing o de productos en un sitio Next.js sin incluir archivos multimedia en el repositorio. Añadir una sección principal con video de fondo y sin controles de reproducción. Incrustar videos que requieren streaming adaptativo y subtítulos mediante Mux. Migrar el alojamiento de videos existente en S3 o R2 a un flujo de trabajo de compilación de Next.js.
¿Cómo se instala next-video?
Ejecuta la configuración automática en la raíz de tu proyecto de Next.js: npx -y next-video init Añade tu token de acceso de Mux a .env.local Añade un vídeo a /videos y sincronízalo con el almacenamiento remoto: npx next-video sync Inicia el servidor de desarrollo y abre la página de demostración: npm run dev
¿Dónde consigo next-video?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/muxinc/next-video

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados

amannn / next-intl

Biblioteca de internacionalización (i18n) para Next.js, con sintaxis de mensajes ICU, fechas y números adaptados a la configuración regional, y hooks de traducción con seguridad de tipos.

Frontend y UI#i18n#nextjs#react
4,4 mil+5 esta semana396TypeScriptMITBien mantenidoActualizado el mes pasado