プログラミング

Video.js v10 Betaが登場 — 16年ぶりのフルリライトで88%軽量化を実現した全貌

Video.jsWeb開発オープンソースJavaScriptパフォーマンス

はじめに

Webの動画プレーヤーとして長年デファクトスタンダードの地位を占めてきたVideo.jsが、16年ぶりにゼロからリライトされた。2026年3月10日に公開されたv10 Betaは、デフォルトのバンドルサイズを88%削減しながら、React・TypeScriptへのファーストクラスサポートやコンポーザブルなアーキテクチャを実現している。Hacker Newsでは577ポイントを獲得し、大きな注目を集めた。この記事では、なぜリライトに踏み切ったのか、技術的に何が変わったのか、そしてWeb開発者にとって何を意味するのかを深掘りする。

16年越しの「Hello, World」再び — リライトの背景

Video.jsは2010年、FlashからHTML5への移行期に誕生した。当時はブラウザ間の動画再生の互換性が大きな課題で、Video.jsはその抽象化レイヤーとして爆発的に普及した。しかし16年が経ち、コードベースとAPIは「別の時代のWeb開発」を反映したものになっていた。

今回のリライトを主導したのは、原作者のSteve Heffernan氏だ。長年プロジェクトから離れていた彼が復帰し、単独ではなく4つの主要OSSプレーヤープロジェクトを巻き込む形でリビルドを進めた。Video.js、Plyr、Vidstack、Media Chrome — 合計75,000以上のGitHubスターを持つこれらのプロジェクトの知見が、v10に集約されている。PlyrのクリエイターであるSam Potts氏がスキンデザインを担当し、Mux（Media Chromeの開発元）からもコントリビューターが参加するなど、競合ではなく協調による開発が実現した。

リライトの4つの柱は明確だ。バンドルサイズの大幅削減、フレームワーク固有のパターンでの深いカスタマイズ、デフォルトの見た目とパフォーマンスの改善、そしてAIエージェントとの互換性である。

アーキテクチャの革新 — コンポーザブル設計とSPF

v10の技術的な核心は、モノリシックからコンポーザブルへのアーキテクチャ転換にある。

従来のVideo.jsは、すべての機能が一体化したプレーヤーオブジェクトだった。DRM、広告、ライブストリーミングの機能を使わなくても、それらのコードはバンドルに含まれていた。v10ではState、UI、Mediaを独立したコンポーネントに分離し、APIコントラクトを通じて通信する設計に変更された。

中核となるのがcreatePlayer関数だ。Zustandのストアスライスに着想を得たフィーチャー配列方式で、必要な機能だけをインポートする。インポートしなかったコンポーネントはバンドルに一切含まれない。

// 再生機能のみの最小プレーヤー — 5kB未満
const Player = createPlayer({
  features: [features.playback],
});

UIにも大きな変革がある。Base UIやRadixに着想を得たUnstyled Primitivesを採用し、各コンポーネントが単一のHTML要素をレンダリングする。疑似要素のハックは排除され、実際のHTML要素による構築に移行した。カスタマイズ性を重視し、コンポーネントのソースコードを自分のプロジェクトにコピーして直接編集できる「Eject」機能も提供される。

特に注目すべきは、新しいストリーミングエンジン**SPF（Streaming Processor Framework）だ。モノリシックなストリーミングライブラリとは対照的に、機能的なコンポーネントを組み合わせる関数型のアプローチを採用している。基本的なHLS再生だけが必要な場合、SPFのサイズはHLS.js-lightのわずか12%**に収まる。

バンドルサイズの比較

構成v8v10削減率
コア（ABRなし）75.2 kB25.1 kB66%
HLSストリーミング込み202.7 kB38.7 kB81%
デフォルト構成——88%

React版の最小構成（再生のみ）であれば、gzip後5kB未満という驚異的な軽さだ。

エンジニアにとって何が変わるか

React/TypeScriptプロジェクトでの採用が格段に容易になる。 v8まではjQuery時代の設計思想が残り、Reactとの統合には多くのワークアラウンドが必要だった。v10ではProviderパターンによるネイティブなReact統合が実現されている。

const Player = createPlayer({ features: videoFeatures });

function App() {
  return (
    <Player.Provider>
      <VideoSkin><Video src="video.mp4" /></VideoSkin>
    </Player.Provider>
  );
}

パフォーマンスへの影響も大きい。 Webアプリケーションにおいて動画プレーヤーのバンドルサイズは無視できないウェイトを占めてきた。v8 + VHSで202.7kBだったものが38.7kBに縮小されることで、初期ロード時間とCore Web Vitalsの改善が期待できる。特にモバイルユーザーや低帯域環境では、この差は体感に直結する。

用途別プリセットも実用的だ。動画プレーヤー、オーディオプレーヤー、背景動画（コントロールやオーディオ不要）などのユースケースに最適化された構成がすぐに使える。従来はゼロから組み立てる必要があったカスタマイズが、プリセット＋調整で完結する。

ただし現時点での制約も理解しておく必要がある。v10はBeta段階であり、APIは不安定で変更の可能性がある。設定メニューは未実装、広告サポートは2026年後半の予定だ。GAは2026年中期を目標としており、それまでにv8やPlyr、Vidstackからのマイグレーションガイドも整備される予定だ。新規プロジェクトでの試験的な導入には適しているが、プロダクション環境への採用は時期尚早といえる。

まとめ

  • Video.js v10は16年ぶりのフルリライトで、4つの主要OSSプレーヤーの知見を統合
  • コンポーザブルアーキテクチャにより、バンドルサイズを最大88%削減
  • 新ストリーミングエンジンSPFはHLS.js-lightの12%のサイズで基本HLS再生を実現
  • React/TypeScriptネイティブ対応により、モダンなフロントエンド開発との親和性が大幅向上
  • GAは2026年中期予定。現時点ではBetaのため、新規プロジェクトでの検証利用が推奨

OSSの競合プロジェクトが統合に向かうというのは珍しいケースだ。Web動画プレーヤーという成熟した領域で、軽量化とモジュラー設計という時代の要請に応えるv10の試みは、今後のフロントエンドライブラリ設計の参考事例にもなりうる。

ソース

Back to articles