ユーザーはメディア、特に動画を好みます。動画は楽しく、有益な情報源です。モバイル デバイスでは、テキストよりも動画で情報を取得するほうが簡単な場合があります。優れたユーザー エクスペリエンスを実現するには、動画で使用可能な帯域幅を超えないようにする必要があります。ユーザーは、どのデバイスで視聴していても、それらを使用できる必要があります。メディアのダウンロードを待つ必要は決してありません。再生ボタンを押しても何も起こらないのは誰にとっても不便です。
ご自身のデバイスで動画を視聴したことは間違いなくあるでしょう。つまり、最後の段落の内容は驚くべきものではありません。次は、動画などのメディア ファイルを自分のウェブサイトに配置する方法を学びます。メディアを追加する技術的な要件は、ユーザー エクスペリエンスに役立つものでなければなりません。
技術要件
- メディア ファイルのバージョンは、音声ストリームと動画ストリームの両方を含む一般的なウェブ対応形式です。
- 解像度がユーザーのデバイスに適している。
- ビットレートでユーザーのネットワーク帯域幅が過負荷にならない。
- 結果は、適切なテクノロジーを使用しているすべての主要ブラウザで表示できます。
- ファイルが暗号化されている（省略可）。
これらの技術要件を満たすには、このウェブサイトのメディア セクションをご覧ください。これらのコンセプトがまだ抽象的でも心配ありません。これらの機能は、この記事全体を通して順を追って説明します。最初のセクションではメディアの基本コンセプトについて、2 番目のセクションではウェブにメディアを追加する方法について、最後のセクションではウェブでメディアを使用する高度なテクニックと実践的なアプリケーションについて学習します。
ウェブで動画を表示する
サイトに動画を表示する方法は 4 つあります。
- 動画を YouTube や Vimeo などのメディア ホスティング プロバイダにアップロードします。これらのオプションを使用するには、プレーヤーをサイトに埋め込む必要があります。
- HTML の
<video>要素と<audio>要素を使用した基本的なセルフホスト埋め込み。 - Shaka Player、JW Player、Video.js などの動画ライブラリを使用した、より機能豊富な埋め込み。
- 独自のメディア サーバーやストリーミング アプリケーションを構築する。
このサイトでは主に、メディアの埋め込みの基本について説明します。ただし、独自のメディア ストリーミング アプリケーションの構築に向けて、より高度なトピックについても説明します。オフライン サポートを備えた Media PWA を作成して、オフライン サポートを実現する方法と、そのために必要な労力を示しています。このアプリケーションは、製品版として提供されるものでも、YouTube や Vimeo などのサービスと競合するものでもありません。しかし、新しいことに挑戦するための出発点として役立つでしょう。
正直なところ、ホスト型メディア サービスに匹敵するサービスを構築するには、専門のエンジニアチームと数千時間の作業が必要になります。競合他社としてその市場に参入することが目標でない限り、他の方法のいずれかを使用することをおすすめします。この技術を理解することは有益です。独自のアプリケーションや動画プレーヤーをロールアウトしないとしても、最先端のブラウザ サポートを調査してテストしたり、少なくとも既存の動画ライブラリのいずれかを使用したりすることは有用です。
学習内容
media コレクションは 3 つの部分で構成されています。この最初のセクションでは、サイトにメディアを追加するためのコンセプトと前提条件について説明します。これには、メディア ファイルの作成方法、ウェブ用にファイルを準備するために必要なアプリケーションの基本、ストリーミングのコンセプトなどが含まれます。2 番目のセクションでは、ファイルを準備してさまざまな形式に変換し、必要に応じて暗号化を追加する方法について説明します。最後のセクションでは、メディア ファイルをウェブページに埋め込む方法、自動再生のベスト プラクティス、メディア フレームワークの使用、動画をオフラインにする方法、動画をアクセス可能にする方法について説明します。
内容は盛りだくさんです。まずはメディア ファイルの基本から始めましょう。