TL;DR

  • Video.js 10.0.0이 1년간의 설계·개발·테스트를 거쳐 정식 출시됐으며, 베타·출시 후보 단계를 끝내고 새 프로젝트와 기존 플레이어의 마이그레이션에 사용할 수 있음.
  • Video.js, Plyr, Vidstack, Media Chrome, Mux Player의 경험과 기여자를 모아 플레이어 다섯 개를 밑바닥부터 재구축했으며, Video.js v8 기본 번들보다 파일 크기를 60% 줄인 RC 벤치마크 결과를 제시함.
  • React 컴포넌트와 패턴, 웹 컴포넌트, TypeScript, Tailwind를 지원하고 상태·UI·미디어를 분리한 조합형 아키텍처를 제공함.
  • 설치·문서·마이그레이션 안내를 개선하고, Shadcn을 통한 스킨 소스 편집과 코딩 에이전트용 공식 Video.js 스킬을 제공함.
  • 스트리밍 엔진 조합 프레임워크 SPF는 아직 광고와 진정한 저지연 라이브를 지원하지 않으며, 해당 용도에는 기본 HLS 엔진인 HLS.js 기반 HlsJsVideo를 사용할 수 있음.

Video.js 10 정식 출시

  • 1년간의 설계, 개발, 테스트를 거쳐 Video.js 10.0.0을 정식 출시했으며, 베타와 출시 후보(RC) 표기를 끝내고 안정 버전으로 공개함.
  • v10 안정 출시를 기다린 사용자는 이제 새 프로젝트를 시작하거나 v8 및 다른 플레이어에서 마이그레이션할 수 있음.
  • 2010년 Flash에서 오픈 웹으로 동영상을 옮기려는 목적으로 Video.js를 시작했으며, 16년이 지난 지금 웹은 크게 달라졌지만 플레이어 일부는 당시 아키텍처 결정에 기반하고 있었음.
  • v10은 플레이어 하나가 아니라 다섯 개를 밑바닥부터 재구축하는 프로젝트임. Video.js, Plyr, Vidstack, Media Chrome, Mux Player의 사람과 경험을 하나의 프로젝트와 기여자 그룹으로 결집함.
  • Demuxed 발표로 프로젝트를 시작하고, 베타 발표에서 아키텍처를 소개했으며, 출시 후보 단계에 이르기까지 실제 환경에서 더 폭넓게 사용함.
  • 정식 출시는 안정 버전 제공, 더 나은 시작 방법, 그리고 함께 구축한 사용자들의 피드백을 반영한 다수의 수정으로 이어지는 다음 단계임.

v10의 주요 기능

  • 더 작은 파일 크기: RC 벤치마크에서 적응형 스트리밍이 포함된 Video.js v8 기본 번들보다 크기가 60% 감소함. 조합형 아키텍처를 통해 사용하지 않는 기능을 제외할 수 있어 필요 없는 코드까지 전송하지 않아도 됨.
  • 프레임워크에 맞는 컴포넌트: React용 일급 컴포넌트와 패턴, 일반 HTML용 웹 컴포넌트, 일급 TypeScript 및 Tailwind 지원을 제공함. 상태, UI, 미디어가 분리돼 한 부분을 바꿔도 주변 전체를 다시 구성할 필요가 없음.
  • 기본 스킨과 커스터마이징: 기본 스킨에 더 많은 디자인 작업을 반영했으며, 더 깊은 커스터마이징을 원하면 스킨 소스를 프로젝트에 가져와 실제 컴포넌트를 수정할 수 있음. 플레이어의 출력 결과를 역분석할 필요가 없음.
  • 개발자와 코딩 에이전트를 고려한 설계: 직접 코드를 작성하거나 에이전트의 도움을 받는 경우 모두 이해하기 쉽도록 코드, API, 문서를 설계함.
  • HLS, DASH, YouTube, Vimeo, Mux, Cloudflare Stream을 비롯한 소스 유형과 서비스에서 작동함.
  • 베타 게시물에서 아키텍처, 번들 비교, UI 결정 사항을 자세히 설명했으며, 해당 내용은 v10을 만든 이유이기도 함.

RC 이후 변경 사항

  • RC에서 GA까지의 작업은 설치, 커스터마이징, 일상적인 사용 경험을 개선하는 데 집중함.

더 나은 시작 경로

  • 문서와 설치 경험을 재설계해 사용하는 프레임워크와 만들려는 플레이어 유형에 맞는 경로를 더 명확하게 제시함.
  • 빌드 설정이 필요하지 않은 개발자를 위해 CDN 호스팅 조합 기능도 개선함.
  • 마이그레이션 안내에는 기존 Video.js v8 API 사용 방식을 v10 패턴으로 옮기는 방법이 포함됨. v10은 기존 버전에 바로 덮어쓰는 업데이트가 아니라 재구축이므로 문서에서 그 차이를 처리하는 방법을 안내함.

Shadcn으로 프로젝트에 스킨 가져오기

  • 베타에서는 플레이어 UI를 직접 소유하는 개념을 소개했으며, GA에서는 일급 Shadcn 지원으로 이를 더 쉽게 적용할 수 있음.
  • Shadcn CLI로 스킨 소스를 프로젝트에 추가하면 레이아웃, 컨트롤, 스타일이 편집 가능한 파일로 제공됨.
  • 버튼 위치를 옮기거나 타임라인을 바꾸고 컨트롤을 제거할 수 있으며, 모든 디자인 결정을 위한 설정 옵션이 추가될 때까지 기다릴 필요가 없음.

코딩 에이전트용 공식 스킬

  • 코딩 에이전트가 최신 v10 패턴을 사용하고 적절한 문서를 찾도록 돕는 공식 Video.js 스킬을 공개함.
  • 다음 명령으로 설치함.
  • npx @videojs/cli agents skills

작지만 중요한 변경 사항

  • 스킨의 제목 표시와 챕터 표시 방식을 개선함.
  • 새 Compat 스킨을 통해 브라우저 호환 범위를 Safari 16까지 확장함.
  • 다수의 버그를 수정하고 훨씬 폭넓은 실제 애플리케이션에서 테스트함. RC를 사용하고 기대와 다르게 작동하는 부분을 알려준 사용자들의 피드백을 반영함.

안정 버전도 완성은 아님

  • 새로운 스트리밍 엔진 조합 프레임워크인 SPF가 번들 크기를 크게 줄이는 데 기여하지만, 아직 광고나 진정한 저지연 라이브를 지원하지 않음.
  • 해당 요구 사항이 v10 사용을 막는 것은 아님. 이런 용도에는 현재 기본 HLS 엔진인 HLS.js 기반 HlsJsVideo 컴포넌트를 사용할 수 있음.
  • 플레이어와 스트리밍 엔진은 별개의 선택 항목임.
  • SPF를 계속 개선하고 v10의 기능 범위를 확장할 계획임. GA는 사용자가 구축을 시작할 준비가 됐다는 뜻이지, 개선할 일이 남지 않았다는 뜻은 아님.

시작하기 또는 마이그레이션하기

  • Video.js는 Apache 2.0 라이선스에 따른 무료 오픈소스 소프트웨어임.
  • 설치 안내서로 시작하거나 Video.js v8, Mux Player, Media Chrome, Vidstack용 마이그레이션 안내서를 이용할 수 있음.
  • v10 패키지 이름은 @videojs/react와 @videojs/html임. npm의 video.js 패키지는 당분간 v8을 유지함.

감사 인사

  • 프로젝트 진행 과정에서 피드백을 보내준 팀과 모든 사용자에게 감사를 전함.
  • 함께 만든 결과물에 자부심을 느끼며, 사용자가 이를 바탕으로 무엇을 만드는지 기대함.
  • 동영상 플레이어를 다시 좋아하게 되길 바란다는 인사로 글을 마무리함.