▲

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

 (videojs.org)
2P by GN⁺ 10시간전 | ★ favorite | 댓글 1개
  • 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의 협업에 감사 표명
  • 프로젝트의 목표는 “비디오 플레이어에 다시 사랑을 느끼게 하는 것”으로 표현됨
▲
GN⁺ 10시간전  [-]
Hacker News 의견들

  • 혹시 궁금한 사람들을 위해 말하자면, 이 웹사이트의 문법 하이라이팅 색상 테마는 “gruvbox”임
    개인적으로 아주 마음에 드는데, 이걸 찾아내는 데 꽤 오래 걸렸음
    gruvbox GitHub 링크

    • 혹시 이 웹사이트가 어떤 기술로 만들어졌는지 아는 사람 있음? 디자인과 UI가 정말 마음에 듦
    • 참고로 이 테마는 VSCode에서도 사용할 수 있음

  • 나는 video.js를 써본 적이 없는데, 사이트나 광고가 이미 익숙한 사람들을 대상으로 한 것처럼 느껴졌음
    읽으면서도 한 가지 궁금했던 건, 이게 HTML video 태그와 뭐가 다른지였음. 단순히 컨트롤러만 다른 건가?

    • 좋은 지적임. 사이트에서 그 부분을 더 명확히 설명할 필요가 있음
      video 태그는 요즘 꽤 좋아졌지만, Video.js는 브라우저 간 일관된 스타일링, 고급 기능(분석, DRM, 360도 영상 등), 다양한 스트리밍 포맷 지원(HLS, DASH 등) 같은 점에서 차별화됨
      결국 video 태그로도 구현은 가능하지만, 그렇게 하다 보면 결국 Video.js 같은 걸 직접 만들게 됨
    • 모든 환경에서 video 태그가 제대로 동작하지 않음. 브라우저마다 엣지 케이스가 많음
      안정적인 플레이어나 스트리밍 기능이 필요하면 Video.js를 쓰는 게 좋음
      참고로 나는 조지아 국가용 TV 방송 플레이어를 만들었는데, 2009년 LG 스마트TV부터 최신 브라우저까지 지원했음
    • 대부분의 브라우저가 HLS나 DASH를 지원하지 않음
      이게 중요한 이유는 동적 비트레이트 조정 때문임. 캐싱도 더 효율적임

  • WebVTT 관련해서 요즘 상황이 달라졌는지 궁금함
    예전에 자막 렌더링을 커스터마이징하려 했는데 너무 어려웠음

  • 왜 이걸 Web Component로 배포하지 않았는지 궁금함
    내 생각엔 완벽한 사용 사례 같음 — 의미 있는 객체에 내장된 컨트롤이 있으니까

    • 좋은 질문임. 예전에 media-chrome과 Mux Player를 Web Component로 만들려다 React 통합 문제로 고생했음
      결국 React용 shim을 만들어서 해결했지만, 그게 또 다른 문제를 낳았음
      VJS 10에서는 headless 코어 + 렌더링 레이어 구조로 타협점을 찾았음
      덕분에 React 컴포넌트와 Web Component를 모두 지원함
      media-chrome GitHub 링크
    • Web Component는 멋져 보이지만, 실제로는 스타일링과 SSR 문제로 시간을 많이 잡아먹음
      Shadow DOM 버그나 프레임워크 간 호환성 때문에 결국 플레이어보다 환경 설정에 더 많은 시간을 쓰게 됨
      대부분의 사용자는 이런 걸 신경 쓰지 않음. 그냥 JS 라이브러리 + 깔끔한 API가 훨씬 낫다고 생각함
    • 사실 React 코드가 HTML Custom Elements로 컴파일되기 때문에, 넓은 의미로 보면 이미 Web Component임
      다만 React를 쓰는 이유는 트리 셰이킹(tree-shaking) 덕분에 필요한 코드만 포함할 수 있기 때문임
      일반 HTML에서는 아직 이런 최적화가 어렵기 때문에, 빌드 파이프라인이 일종의 Web Component 생성기 역할을 하는 셈임

  • Plyr를 쓰던 내 오디오 플레이어를 Video.js로 바꿔보려 했는데, 기본 설정에서 몇 가지 기능 격차가 있었음
    1배속 이하 재생 속도 없음, 모바일에서 볼륨 조절 불가, 탐색 버튼 없음, 색상 커스터마이징 어려움, 데모 부족 등

    • 좋은 피드백임. 이 내용들을 이슈로 등록할 예정임
      현재 Plyr 등과의 기능 동등성(feature parity) 을 목표로 하고 있으며, GA 시점(연내 중반)을 목표로 함

  • 나는 영상 호스팅은 잘 모르지만 HTML5 비디오 플레이어를 써본 적 있음
    서버 측에서 비디오 청크를 직접 제공하는 엔드포인트를 만들어야 하는지 궁금함
    ffmpeg로 2MB 단위로 나눈다면, 그걸 어디에 두는 게 좋을까? CDN? 자체 서버?
    Video.js가 가장 부드럽게 작동하려면 어떤 구성이 최선일까?

    • 그냥 HLS로 변환하면 됨. 1~2초 단위로 자동 청크화되고, nginx에서 정적 파일로 서빙 가능함
      Video.js와 잘 맞고, LG TV에서도 태그 기반 재생이 가능함
    • 런타임에서 버전 전환(ABR)이 필요 없다면 수동 청크화도 필요 없음
      서버가 Range 요청만 지원하면 브라우저가 알아서 처리함
      나는 DO Spaces 같은 오브젝트 스토리지 + CDN 조합을 쓰는데 잘 작동함
    • 다만 청크는 IDR 키프레임으로 시작해야 해서 단순하지 않음
      인코딩과 세그먼트 분할을 한 번에 처리해야 함 (예: ffmpeg의 dash 포맷터)
      오디오와 비디오 세그먼트 길이를 맞추려면 GOP 계산기가 유용함
      일반적으로는 고품질 원본에서 여러 해상도로 인코딩 후, HLS/DASH 매니페스트와 함께 S3 같은 곳에 올림
      플레이어는 매니페스트 URL 하나로 필요한 모든 리소스를 찾아감
    • MPE-DASH도 고려해볼 만함

  • 블로그 포스트가 정말 잘 쓰였음
    독자를 전문가로 존중하는 설명 방식이 인상적이었음. 이런 식의 제품 발표가 더 많아졌으면 함

  • Steve 축하함!
    예전에 JW Player에서 일할 때 Video.js의 단순함과 테마 시스템에 감명받았음
    이번 버전도 큰 성공을 거두길 바람

    • 오랜만이네 Zach! 반가움
      FOMS나 여러 컨퍼런스에서 JW 팀과 이야기 나눴던 게 즐거웠음
      영상 기술 쪽은 여전히 뜨거운 분야니까 언제든 다시 돌아오길 바람

  • 88%라는 수치는 놀라움
    가장 큰 개선 포인트가 뭐였는지 궁금함 — 아마 플러그인 시스템일 것 같음
    리라이트 과정에서 주요 통합 기능이 깨지진 않았는지도 알고 싶음

  • 리라이트 과정에서의 아키텍처 변화와, 이전 Video.js 디자인 대비 트레이드오프가 무엇이었는지 궁금함

답변달기