Video.js v10 베타: 16년 만의 전면 재작성으로 88% 더 작아진 오픈소스 비디오 플레이어

• 16년 만에 완전히 새로 작성된 Video.js v10은 번들 크기를 88% 줄이고 현대적 개발 환경에 맞춘 구조로 재탄생함
• React·TypeScript·Tailwind를 1급으로 지원하며, 심미적 기본 UI와 AI 친화적 문서 구조를 제공함
• 새로운 Streaming Processor Framework(SPF) 로 필요한 기능만 조합 가능한 모듈형 스트리밍 엔진을 구현, HLS.js 대비 12% 수준의 경량화 달성
• 컴포지션 기반 아키텍처와 React/Web Components 스킨 시스템으로 UI와 기능을 자유롭게 교체·제거 가능
• 2026년 정식 출시를 목표로 하며, AI 협업 개발과 확장 가능한 프리셋 생태계를 통해 차세대 오픈소스 미디어 플랫폼으로 발전 중임

Video.js v10 베타 개요

• Video.js v10.0.0 베타는 16년 만의 전면 재작성으로, Video.js뿐 아니라 Plyr, Vidstack, Media Chrome 등 여러 오픈소스 프로젝트의 협업 결과물임
• 총 7만5천 GitHub 스타와 매달 수십억 회 재생 규모의 생태계가 참여했으며, 현대적 개발 방식과 AI 보조 개발 환경을 고려한 구조로 새롭게 설계됨
• 주요 목표는 번들 크기 88% 축소, React·TypeScript·Tailwind의 1급 지원, 심미적 기본 UI, AI 친화적 문서 구조 제공임

번들 크기 및 성능 개선

• 기본 Video.js v10 플레이어는 v8 대비 기본 번들 크기가 88% 감소, ABR(Adaptive Bitrate) 기능 제거 시에도 66% 감소
  • 예: v8 기본 260.5kB(minified) → v10 HTML 비디오 플레이어 97.4kB(minified), React 버전은 62.0kB
• 새로운 Streaming Processor Framework(SPF) 도입으로, 필요한 기능만 조합 가능한 모듈형 스트리밍 엔진 구성 가능
  • 단순 HLS 사용 시 v10+SPF는 v8+VHS 대비 파일 크기 19% 수준
  • SPF 엔진 자체는 HLS.js-light의 12% 크기(38.5kB minified) 로 단순 ABR 처리에 최적화
• SPF는 HLS.js, Shaka, dash.js 등 기존 엔진과 모두 호환, 복잡한 DRM·광고 기능이 필요 없는 경우 극단적 경량화 가능

컴포지션 기반 아키텍처

• v10은 State, UI, Media를 분리한 컴포넌트 구조로, 각 요소를 독립적으로 교체·삭제 가능
  • createPlayer() 함수는 features 배열을 받아 필요한 기능만 포함
  • 예: 오디오 기능이 필요 없으면 volume, mute 코드가 번들에 포함되지 않음
• UI를 제거하려면 단순히 스킨을 불러오지 않으면 됨 — 불필요한 코드 완전 배제 가능
• 최소 구성 React 예제는 5kB 미만(gzipped) 으로 동작하며, 단순 재생/일시정지 버튼만 포함

UI 커스터마이징 및 스킨 시스템

• v10은 React와 Web Components 기반의 스킨 시스템을 제공하며, Base UI, Radix 등에서 영감을 받은 unstyled UI primitives 구조 채택
  • 각 UI 컴포넌트는 단일 HTML 요소를 출력해 직접 제어 가능
• 기존 v8에서는 CSS 가상 요소로 제어하던 타임라인 핸들이 v10에서는 실제 DOM 요소로 제공되어 스타일링 단순화
• 베타에는 두 가지 스킨 포함
  • 기본 스킨: 반투명(frosted) 미학, 부드러운 애니메이션
  • 미니멀 스킨: 커스터마이징을 위한 간결한 기본형
• 스킨의 오류 다이얼로그 디자인도 통일되어, 시각적 완성도 향상

프리셋 시스템

• v10은 사용 목적별 프리셋(preset) 개념을 도입해, 스킨·기능·미디어 구성을 조합한 즉시 사용 가능한 플레이어 템플릿 제공
  • Video preset: 일반 웹 비디오용
  • Audio preset: 팟캐스트 등 오디오 전용
  • Background video preset: 배경 영상용, 컨트롤·오디오 제거
• 프리셋은 빠른 시작점을 제공하면서도 모든 구성요소 교체 가능, 완전한 확장성 유지
• 향후 교육용, 숏폼, 크리에이터 플랫폼용 프리셋 추가 예정

AI 친화적 설계

• v10은 AI 에이전트가 함께 개발할 수 있는 구조를 목표로 함
  • 비추상화된 컴포넌트와 unstyled UI primitives로 코드 이해도 향상
  • 문서 탐색 효율을 위한 llms.txt 파일 제공, 프레임워크별 버전 포함
  • 모든 문서를 Markdown 형식으로 제공해, AI가 불필요한 HTML 문맥 없이 직접 접근 가능
  • 저장소 내 AI 스킬 세트를 통해 향후 사용자 개발 지원 예정

베타 사용 안내

• API는 아직 안정화 전, 정식 출시 전까지 일부 인터페이스 변경 가능
• 현재는 기본 웹사이트 재생 기능 중심, 접근성·자막·다양한 포맷 지원 가능하나 설정 메뉴 등은 미구현
• GitHub 이슈 및 Discord 피드백을 적극 수집 중
• 기존 버전 사용자는 마이그레이션 가이드 공개 후 이동 권장

향후 로드맵

• 2026년 중반 정식 출시(GA) 목표
• Plyr, Vidstack, Media Chrome 수준의 기능 동등성 확보 예정
• 광고 기능 지원은 2026년 하반기 계획
• 마이그레이션 가이드 및 추가 프리셋 제공 예정

감사 인사

• 개발팀 및 협력자, Mux의 지원, Brightcove의 장기 유지 보수, Qualabs의 협업에 감사 표명
• 프로젝트의 목표는 “비디오 플레이어에 다시 사랑을 느끼게 하는 것”으로 표현됨