À propos du projet

next-video permet aux applications Next.js d'importer des fichiers vidéo et de les restituer via un composant React Video. La commande d'installation automatique installe le package, crée un répertoire /videos, met à jour la configuration Next.js et .gitignore, ajoute des types TypeScript d'importation, configure un script de synchronisation basé sur la surveillance, et peut préparer les identifiants Mux ainsi qu'une page de démonstration. L'installation manuelle utilise withNextVideo dans next.config, une référence de type video.d.ts et la commande next-video sync. Les utilisateurs de Turbopack peuvent configurer un alias de chemin @videos. Les fichiers sources vidéo sont destinés à être conservés en dehors de Git, tandis que les fichiers de métadonnées d'actifs JSON générés sont commités. La commande sync télécharge et traite les vidéos locales, peut surveiller les nouveaux fichiers pendant le développement et crée des correspondances vers des actifs distants. Les URL de vidéos distantes peuvent également être importées ; pour les URL de chaînes fournies à l'exécution, le package fournit un gestionnaire de requêtes /api/video optionnel pour les routeurs App et Pages. Cette route n'est pas authentifiée par défaut et doit être protégée si elle est exposée en production. Les actifs Mux existants peuvent être adoptés avec next-video adopt en utilisant un ID de lecture, en mode interactif ou non interactif. Mux est le fournisseur par défaut et offre un stockage hors dépôt, une livraison CDN, une adaptation HLS, des affiches automatiques, des vignettes de survol de la chronologie, la prise en charge des formats de streaming, des sous-titres générés par IA et des analyses vidéo. Les autres fournisseurs pris en charge incluent Vercel Blob, Backblaze, Amazon S3 et Cloudflare R2, avec différentes variables d'environnement, options de configuration et ensembles de fonctionnalités ; les fournisseurs sans traitement vidéo nécessitent des fichiers MP4 compatibles web. La couche de lecteur prend en charge les composants thématiques de player.style, une importation uniquement du lecteur, un composant vidéo d'arrière-plan léger, des props personnalisées poster et blurDataURL, un élément d'affiche inséré tel que next/image, et des lecteurs entièrement personnalisés via la prop as. Le stockage des métadonnées d'actifs peut également être personnalisé en remplaçant les hooks par défaut de chargement, sauvegarde et mise à jour des fichiers JSON.