ウェブページにメディアを追加する方法はいくつかあります。前回、標準の <video> タグを使用する方法を学びました。この記事では、デフォルトの HTML5 動画プレーヤーの動作を拡張または置き換えるために使用できるメディア フレームワーク（またはライブラリ）について説明します。
メディア フレームワークには、独自のフレームワークとオープンソースのフレームワークの両方があり、その中核には、さまざまなコンテナ形式と伝送プロトコルの音声や動画の再生をサポートする一連の API があります。優れたフレームワークはモジュラー アーキテクチャを備え、明確で詳細なドキュメントを提供します。できれば、設定と使用も比較的簡単なものにする必要があります。「HTML5 動画プレーヤーでほとんどの機能が提供されているなら、フレームワークやライブラリを使用する必要はあるのか？」と思われるかもしれません。いい質問ですね。詳しく見ていきましょう。
フレームワークを使用するメリット
基本的なウェブページのニーズを超えるほとんどの状況では、メディア フレームワークを使用してコンテンツを配信する必要があります。オフライン再生、ストリーミング、分析、ピクチャー イン ピクチャー、プレビュー サムネイル、埋め込み、収益化（フィラーレートの最適化、広告のスケジュール設定、ヘッダー入札など）などの豊富な機能セットを開発して維持する準備ができていない場合は、その複雑さを既存のソリューションにオフロードすることをおすすめします。
ここでメディア フレームワークが役立ちます。フレームワークには、一連の機能と、それらの機能を使用できる条件が用意されています。プロジェクトに適したフレームワークを選択する必要があります。次の記事では、複数の複雑な機能を実装するオフライン ストリーミングを備えた PWA の構築方法について説明します。ネタバレになりますが、これは大変な作業であり、本番環境向けのソリューションには程遠いものです。フレームワークを使用して、手間を省きましょう。
選択できるオプションは多数ありますが、この記事では Shaka Player、JW Player、Video.js の 3 つに焦点を当てます。
Shaka Player
ドキュメントによると、Google の Shaka Player は、アダプティブ メディア用のオープンソースの JavaScript ライブラリです。プラグインを使用せずに、ブラウザでアダプティブ メディア形式（DASH や HLS など）を再生します。代わりに、Shaka Player はオープンウェブ標準の MediaSource Extensions と Encrypted Media Extensions を使用します。
Shaka Player は、IndexedDB を使用したメディアのオフライン ストレージと再生もサポートしています。コンテンツは任意のブラウザに保存できます。ライセンスの保存は、ブラウザのサポートに依存します。
Shaka Player のドキュメント サイトに、基本的な使用方法が記載されています。ただし、Shaka Player を使用するには、まず動画または音声要素を含む HTML ページを作成する必要があります。次に、アプリの JavaScript でポリフィルをインストールし、ブラウザのサポートを確認します。ブラウザが Shaka Player のサポートを確認すると、スクリプトが Player オブジェクトを作成してメディア要素をラップし、エラーをリッスンしてから、マニフェスト ファイルを読み込みます。そこからは Shaka Player が処理を受け持ちます。
Shaka では、メディア ファイルを自分でホストしてエンコードする必要があります。メディア サーバーの作成はそれほど複雑ではありませんが、メディアのエンコード/コード変換は時間がかかり、複雑になる可能性があります。繰り返しの作業を自動化してプロセスを高速化するには、この部分を Zencoder、Amazon Elastic Encoder、Google Transcoder API などのサービスにオフロードすることをおすすめします。
Shaka Player の優れた点は、DASH と HLS のパッケージングと暗号化用の優れたツールとメディア パッケージング SDK（Shaka Packager）があることです。オンライン ストリーミング用にメディア コンテンツを準備してパッケージ化できます。これは、メディア変換とメディアの暗号化で説明しました。
JW Player
ホスティングとエンコード/トランスコード サービスを提供するオプションを探している場合は、JW Player を検討してください。ただし、JW Player は独自のソフトウェアです。つまり、プラットフォームやロードマップをあまり制御できません。動画にウォーターマークが表示される基本無料版と、商用版があります。
JW Player は、MPEG-DASH によるストリーミング（有料バージョンのみ）、デジタル著作権管理（DRM）（Vualto を使用）、インタラクティブ広告、インターフェースのカスタマイズ、埋め込みをサポートしています。API と SDK が詳細にドキュメント化されています。ただし、メディアをすばやく無料でホストする方法をお探しの場合は、通常、YouTube 動画を埋め込むのが最適な無料オプションです。
Video.js
ウェブサイトによると、Video.js は HTML5 の世界向けにゼロから構築されています。HTML5 動画と、DASH や HLS などの最新のストリーミング形式、YouTube や Vimeo をサポートしています。パソコンとモバイル デバイスでの動画再生をサポートし、CSS ベースのスキンによりあらゆるデバイスで美しく表示されます。
Video.js を使用する方法はいくつかありますが、最も簡単なのは Fastly が提供する無料の CDN バージョンを使用することです。プレーヤーのセットアップ方法について詳しくは、スタートガイド ページをご覧ください。Video.js は非常に強力な動画プレーヤーですが、Shaka Player と同様に、動画をホストしてエンコードする必要があります。ただし、プラグイン システムには違いがあります。Video.js プレーヤーで YouTube 動画を再生したり、カスタマイズしたりできます。
その他のフレームワーク
利用可能なフレームワークやライブラリは多数ありますが、この記事ではその一部のみを紹介します。フレームワークを選択する際は、プロジェクトに必要な機能と、メディアをホストしてエンコードまたはトランコードする方法を考慮する必要があります。プレロール広告やその他の収益化戦略が必要ですか？メディアはオフラインで利用できますか？予算はどの程度ですか？その他、さまざまな考慮事項があります。調査を行い、ネットワーク内の人におすすめを尋ねます。他にも数十の優れたオプションがあります。選択する前に、チームに適したオプションを選択して、プロジェクトのライフサイクル中に不要な技術的負債や複雑さを生み出さないようにしてください。
次に、作成したオフライン ストリーミングを備えた PWA について説明します。この PWA は、重い処理を処理するフレームワークを使用せずに HTML5 動画オブジェクトのみを使用して独自のソリューションをロールアウトする際に発生する主な課題にどのようにアプローチし、対処するかを示しています。