ウェブページにメディアを追加する方法はいくつかあります。標準の <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 の素晴らしい点は、Shaka Packager と呼ばれる、DASH と HLS のパッケージ化と暗号化用の優れたツールとメディア パッケージ SDK があることです。前述のメディア変換とメディアの暗号化で学習した、オンライン ストリーミング用のメディア コンテンツを準備してパッケージ化できます。
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 と同様に、動画のホストとエンコードも行う必要があります。ただし、プラグイン システムでは Video.js プレーヤーでの YouTube 動画の再生などができ、カスタマイズもできます。
その他のフレームワーク
利用可能なフレームワークやライブラリは数多くありますが、この記事ではそのごく一部のみを説明しています。フレームワークを選択する際は、プロジェクトに必要な機能と、メディアのホスト、エンコード、コード変換の方法を検討する必要があります。プレロール広告またはその他の収益化戦略が必要ですか？メディアをオフラインでも利用できますか？予算の規模はどれくらいかその他の考慮事項調査を行い、ネットワーク内のメンバーに提案を求めます。他にも多数の優れたオプションがあり、選択を行う前に、チームに適したオプションを選択し、プロジェクトのライフサイクル中に不要な技術的負担や複雑さが発生しないようにしてください。
次に、オフライン ストリーミング対応の PWA について説明します。負担の大きい作業に対処するためのフレームワークを使わずに、HTML5 動画オブジェクトのみを使用する独自のソリューションをロールアウトする場合の主な課題にアプローチして対処する方法を実演します。