ウェブページにメディアを追加するには、いくつかの方法があります。標準の <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 プレーヤー
ホスティング サービスとエンコード/コード変換サービスを提供するオプションをお探しの場合は、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 と同様に、動画のホストとエンコードも必要です。ただし、1 つの違いはプラグイン システムで、Video.js プレーヤーで YouTube 動画を再生できるなど、カスタマイズもできる点が異なります。
その他のフレームワーク
利用可能なフレームワークとライブラリは多数ありますが、この記事ではそのほんの一部をご紹介します。フレームワークを選択する際は、プロジェクトに必要な機能と、メディアのホスト、エンコード、コード変換の方法を検討する必要があります。プレロール広告などの収益化戦略が必要ですか？メディアをオフラインで使用できますか？予算の程度その他の考慮事項調査を行い、ネットワーク内のユーザーに提案を求めてください。他にも多数の優れたオプションがあります。選択を行う前に、チームに適したオプションを慎重に選択し、プロジェクトのライフサイクル中に維持しなければならない不要な技術的負担や複雑さを回避してください。
次に、Google が作成したオフライン ストリーミングを使用した PWA について学習し、複雑な作業に対処するためのフレームワークなしで HTML5 動画オブジェクトのみを使用して、独自のソリューションをロールすることに伴う主な課題に取り組む方法を紹介します。