Web動画再生分野の老舗オープンソースプロジェクトVideo.jsが最近、大きなニュースを放った——創設者がプロジェクトを離れて16年後に復帰し、チームを率いて徹底的な書き直しを完了させ、新バージョンのサイズはなんと**88%**も削減された。

200KBから25KBへ

Video.js 8.xのコアサイズはgzip後約200KBで、現代のWebアプリケーションにとってはすでに軽量な部類に入る。しかしv10バージョンでは、この数字が25KBに圧縮された——小さな画像ファイルよりも小さい。

どうやって実現したのか？

  • レガシーコードの削除：IE時代の古い互換ロジックを完全に廃棄
  • モジュール化の再構築：モノリシックアーキテクチャからプラガブルなコンポーネントシステムへ
  • Tree-shaking最適化：実際に使用する機能のみをパッケージング
  • ネイティブESM優先：UMDの重荷を解消

React時代の回答

新版Video.jsで最も驚きをもたらした変更は、公式Reactバインディングの提供だ。

import { createPlayer } from '@videojs/react';
import { VideoSkin, Video, videoFeatures } from '@videojs/react/video';

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

export function VideoPlayer() {
  return (
    <Player.Provider>
      <VideoSkin poster="thumbnail.webp">
        <Video src="video.mp4" playsInline />
      </VideoSkin>
    </Player.Provider>
  );
}

このコンポーザブルなAPI設計は、現代のUIフレームワークの影響を明らかに受けている。必要な機能を選択的に導入でき、プレーヤー全体を一括読み込む必要はない。

なぜ書き直したのか？

Video.jsは2010年に誕生し、当時HTML5 Videoはまだ草案で、Flashこそが動画再生の主流だった。ブラウザ間の溝を埋めるため、Video.jsは大量のpolyfillやhackを蓄積してきた。

16年後、Web標準はすでに成熟している：

  • HLSとDASHのネイティブサポートがますます充実
  • Media Source Extensions (MSE) が標準装備に
  • モバイルブラウザの動画再生処理も統一されつつある

歴史的な重荷を背負いながら前進し続けることは、プロジェクトの発展速度を鈍らせるだけだ。

開発者にとっての意義

新規プロジェクトにとって：v10は魅力的な選択肢だ——軽量、モダン、歴史的な重荷なし。

既存プロジェクトにとって：移行には時間がかかるが、公式に詳細なアップグレードガイドが提供されている。性能向上を考慮すれば、この投資は価値がある。

エコシステムにとって：より小さいサイズはより速い読み込み速度を意味し、モバイルユーザーの体験向上に特に重要だ。

最後に

オープンソースプロジェクトのライフサイクルは、しばしば商用ソフトウェアよりも長い。Video.jsの今回の書き直しは一つのことを証明した：時に、後方互換性を打破する勇気が、次の10年を勝ち取ることになるのだ。

プロジェクトURL：github.com/videojs/video.js