Video.js v10ベータ版リリース、なぜこんなに時間がかかったのか？

Video.jsはHTML5ベースのウェブビデオプレイヤーを構築するためのオープンソースフレームワークであり世界で最も人気のあるものの一つです。2026年3月にVideo.jsの開発チームはVideo.js v10のベータ版をリリースしました。Video.jsはv10ベータ版のリリースまでに長い期間を要しましたが、理由について公式サイトのブログにて説明しています。

Video.js v10 Beta: Hello, World (again) | Blog | Video.js | Open Source Video Player
https://videojs.org/blog/videojs-v10-beta-hello-world-again

◆v10ベータ版のリリース
Video.js v10ベータ版のリリースに時間がかかった主な理由は基盤となるコードベースの大規模な書き直しにあります。書き直しはVideo.jsだけにとどまらずPlyr・Vidstack・Media Chromeといった他のオープンソースプロジェクトも対象となったとのこと。

Video.jsが開発されたきっかけは2010年頃からFlash Playerの開発元であったAdobeがHTML5への移行を匂わせ始めたことでした。当時Flashはウェブ上で動画を再生するための主要な技術でしたが、セキュリティの問題やモバイルデバイスでの非対応などの理由からHTML5ベースのビデオプレイヤーへの移行が進んでいました。Video.jsはHTML5への移行を支援するために開発されHTML5ビデオプレイヤーの構築を容易にするためのツールや機能を提供してきました。ただコードベースやAPIはFlash Playerの時代に設計されたものであり、モダンな開発手法やAI活用を見据えた大規模な刷新が必要とされていました。

Video.jsがv10ベータ版に向けてどのような点に注力したかについて、以下のように説明されています。

◆バンドルサイズの削減
ビデオプレイヤーに関する最大の問題点はファイルサイズの大きさでした。Video.jsのサイズ肥大化の一因は多くの機能を提供するためにあまり使われないコードを多く含んでいたことでした。v10のデフォルトプレイヤーはアダプティブビットレート(ABR)機能のサポートを削除するなどの対策により従来のデフォルトプレイヤーと比較して88%のサイズ削減を実現しています。より直接的な比較をするためABRの削除による効果を除外した場合でもv10のデフォルトプレイヤーは以前のバージョンよりも66%軽量であり、バンドル次第ではさらに軽量になります。

フル機能のビデオプレイヤーについて見てみると、HLS(HTTP Live Streaming)やMPEG-DASHといったABRフォーマットを操作するために必要なストリーミングエンジンが肥大化の要因となっています。具体的な要因としてはマニフェストの解析・セグメントの読み込み・バッファ管理・ABRロジック・コーデック検出・MSE統合・DRM・サーバーサイド広告などが挙げられます。従来のストリーミングエンジンはモノリシック・アーキテクチャを採用しているためバンドルサイズを小さくすることが困難でしたが、v10ではSPF(Streaming Processor Framework)と呼ばれる新しいフレームワークを導入することで、特定の目的に特化したより小型のストリーミングエンジンを構成することを目指しています。簡単なHLSユースケースの場合だと、SPFを使用したVideo.js v10はABRを含むVideo.js v8のファイルサイズのわずか19%です。

各エンジンを比較してみることでVideo.js v10の特徴がより鮮明になります。他のエンジンはフォークでもしない限り小型化は非常に困難ですが、SPFを使用して構築されたエンジンはHLSを用いたシンプルなアダプティブストリーミングに必要な機能のみを含んでいるため、ファイルサイズはHLS.js-lightのわずか12%となっています。

ただし、必ずしも他の多機能なストリーミングエンジンをSPFで置き換えるようなことを目標にしているわけではなく、実際にVideo.js v10は他のエンジンと連携することができるとのこと。Video.js v10が目標とするのは一般的でシンプルなユースケースでファイルサイズを大幅に縮小することです。同時により多くのサイトやアプリがシンプルなABRによるファイルサイズ軽減の恩恵を受けられるとも考えており、SPFはそのための手段の一つと位置付けているそうです。

◆カスタマイズ
Video.js v10のファイルサイズ削減については必要なものだけでプレイヤーを構成できるよう設計されており、シンプルなユースケースではよりサイズを抑制することができます。例えばビデオプレイヤーと再生ボタンのみで構成されたReact用「hello world」プレイヤーはgzip圧縮するとわずか5KB未満です。

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

const Player = createPlayer({
  features: [features.playback],
});

function App() {
  const store = Player.usePlayer();
  const paused = Player.usePlayer((s) => s.paused);

  return (
    <Player.Provider>
      <layer.Container>
        <Video src="video.mp4" />
        <button onClick={() => (paused ? store.play() : store.pause())}>
          {paused ? 'Play' : 'Pause'}
        </button>
      </Player.Container>
    </Player.Provider>
  );
}

v10ではまずState・UI・Mediaを独自のコンポーネントに分割し、APIコントラクトを介して連携して動作します。各主要コンポーネントはオプションであり簡単に交換・設定でき、UIやメディアコンポーネントも単体で利用可能となっています。プレイヤーを初期化するcreatePlayer()関数に必要な機能を「features」として配列で渡すことにより内部の状態・機能を構築できます。上記の例では再生機能だけを使用するため「features.playback」のみを指定しているわけです。プレイヤーにオーディオ機能が必要なければ音量やミュートを組み込む必要はありません。ビデオプレイヤーにおいてファイルサイズは重要ではあるもののパフォーマンス指標の一つに過ぎませんが、最初からきちんと設計しておかないとすぐに制御不能な状態になりかねない部分でもあります。ベータ版リリース時点での新しいアーキテクチャの出来栄えについては「まだ改善の余地はあるものの非常に満足」とのことです。

Video.js v10ベータ版にはすぐに使える完成度の高いスキン(コントロールセット)がいくつか含まれているものの、それで満足できない場合は任意のスキンに対して「Eject」という機能を実行すればフレームワークの言語に合わせた完全なソースコードを取得できると言及されています。ソースコードは実際に使用したり改変したりできる本物のコンポーネントであり、各コンポーネントは単一のHTMLを生成するためUI内で発生するすべてのイベントに直接アクセス可能です。

◆デザインとUIの改善
v10ベータ版には「フロスト感のある美観を備えたデフォルトスキン」と「開発者向けのミニマルスキン」の2つが搭載されており、いずれも「洗練されたコントロール」「スムーズなインタラクション」「細部まで配慮されたアニメーション」を備えています。

以下はデフォルトスキンの外観。ビデオスキンとオーディオスキンの両方を表示しています。

以下は開発者向けのミニマルスキンです。

従来のUIから特に大きく変わったのがエラーダイアログです。以下はデフォルトスキンのもの。

ミニマルスキンのエラーダイアログは以下の通り。

ちなみに、従来のエラーダイアログは以下のようなものでした。当時はデザイン的なこだわりの優先順位が低すぎたため、どのスキンでもエラーダイアログはただ「X」という文字がどっしりと表示されるだけの「見栄えの悪いもの」だったとのこと。

また、v10では想定されるユースケースに合わせたプリセットをパッケージ化する予定であり、ベータ版では3つを提供しています。以下はデフォルトのビデオプリセットです。

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

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

以下はオーディオプリセット。

const Player = createPlayer({
  features: audioFeatures,
});

function App() {
  return (
    <Player.Provider>
      <AudioSkin>
        <Audio src="audio.mp3" />
      </AudioSkin>
    </Player.Provider>
  );
}

以下は背景動画のプリセット。背景動画にはレイアウトは必要なもののコントロールは必要ないため、「用途に最適なプレイヤーをそのまま提供する」というプリセットのコンセプトが最も真価を発揮するユースケースであるといえます。

const Player = createPlayer({
  features: backgroundVideoFeatures,
});

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

プリセットを使用することでベースとなるコンポーザブルな構造により要素の追加・削除・交換も簡単に行えるため、柔軟性を犠牲にすることなくウェブ開発者はすぐに仕事を始めることができます。将来的には「クリエイター向けプラットフォーム用」「スワイプ可能なショート動画用」「教育用」など様々なプリセットを提供する予定とのことです。

◆AIとの連携
v10ベータ版を開発するにあたり、AIを活用してVideo.jsベースのプレイヤーを構築する開発者側のエクスペリエンスに重点を置いて設計を行っています。

・抽象化の度合いが低いコンポーネントやスタイルが適用されていない「UIプリミティブ」を用意することで、エージェントがプロジェクト内のコードを直接活用できるようにし外部ドキュメントへの依存を減らす
・プロジェクト内のコードを説明するドキュメントを「llms.txt」として提供することで、エージェントがVideo.jsのドキュメントを効率的に閲覧できるようにする
・すべてのドキュメントのMarkdown版を提供することで、エージェントが不要なコンテキスト情報を読み込む負担を大幅に軽減する
・リポジトリ内のAIスキルセットの蓄積により開発の支援を行う

◆まとめ
Video.js v10は記事作成時点でベータ版であるため、以下の注意点・考慮すべき点が挙げられています。

・APIはまだ十分に安定していない
・機能が制限されている場合がある
・GitHubやDiscordでのフィードバックを歓迎している

ベータ版という制約はあるものの「新しいことを始めるならば今はv10を試すのにいい時期です」とのことなので、興味のある人はぜひVideo.js v10ベータ版を試してみてください。