프로젝트 소개

next-video를 사용하면 Next.js 애플리케이션에서 비디오 파일을 가져와 React Video 컴포넌트를 통해 렌더링할 수 있습니다. 자동 설정 명령은 패키지를 설치하고, /videos 디렉토리를 생성하며, Next.js 구성 및 .gitignore를 업데이트하고, TypeScript 가져오기 유형을 추가하고, 감시 기반 동기화 스크립트를 구성하며, Mux 자격 증명과 데모 페이지를 준비할 수 있습니다. 수동 설정은 next.config에서 withNextVideo, video.d.ts 유형 참조, next-video sync 명령을 사용합니다. Turbopack 사용자는 @videos 경로 별칭을 구성할 수 있습니다. 비디오 소스 파일은 Git 외부에 보관하고, 생성된 JSON 에셋 메타데이터 파일은 커밋하도록 설계되었습니다. sync 명령은 로컬 비디오를 업로드하고 처리하며, 개발 중 새 파일을 감시하고 원격 에셋에 대한 매핑을 생성할 수 있습니다. 원격 비디오 URL도 가져올 수 있습니다. 런타임에 제공되는 문자열 URL의 경우 패키지는 App 및 Pages 라우터 모두에 선택적 /api/video 요청 핸들러를 제공합니다. 이 경로는 기본적으로 인증되지 않으므로 프로덕션에 노출될 경우 보호해야 합니다. 기존 Mux 에셋은 재생 ID를 사용하여 대화형 또는 비대화형 모드에서 next-video adopt로 채택할 수 있습니다. Mux는 기본 공급자이며 저장소 외부 저장, CDN 전송, HLS 적응, 자동 포스터, 타임라인 호버 썸네일, 스트리밍 형식 지원, AI 생성 캡션, 비디오 분석을 제공합니다. 기타 지원되는 공급자로는 Vercel Blob, Backblaze, Amazon S3, Cloudflare R2가 있으며, 환경 변수, 구성 옵션, 기능 세트가 다릅니다. 비디오 처리가 없는 공급자는 웹 호환 MP4 파일이 필요합니다. 플레이어 레이어는 player.style의 테마 컴포넌트, 플레이어 전용 가져오기, 경량 배경 비디오 컴포넌트, 사용자 정의 poster 및 blurDataURL props, next/image와 같은 슬롯형 포스터 요소, as prop을 통한 완전 사용자 정의 플레이어를 지원합니다. 에셋 메타데이터 저장은 기본 JSON 파일 로드, 저장, 업데이트 훅을 교체하여 사용자 정의할 수도 있습니다.