ユーザーはメディア、特に動画を好むため、楽しくてためになるものになります。モバイル デバイスでは、動画の方がテキストよりも情報を消費しやすい場合があります。優れたユーザー エクスペリエンスのために、利用可能な帯域幅以上の帯域幅を動画で必要としないでください。ユーザーが、閲覧するデバイスに関係なく使用できる必要があります。メディアのダウンロードを待つ必要はありません。再生ボタンを押しても何も起こらないので 好ましくありません
皆さんはおそらくご自身のデバイスで動画をご覧になったことがあるでしょう。つまり、この最後の段落で驚くようなことはないということです。次に動画やその他のメディアファイルを ウェブサイトに配置する方法を学びますメディアを追加するための技術要件は、ユーザー エクスペリエンスに沿っている必要があります。
技術要件
- メディア ファイルのバージョンは、音声と動画の両方のストリームを含む一般的なウェブ フレンドリーな形式です。
- 解像度がユーザーのデバイスに適していること。
- ビットレートによってユーザーのネットワーク帯域幅が過負荷にならないようにします。
- 検索結果は、適切な技術を使用して、すべての主要なブラウザで表示できます。
- ファイルが暗号化されている（省略可）。
これらの技術要件を満たすには、このウェブサイトのメディア セクションをご覧ください。コンセプトがまだ抽象的であっても、心配はいりません。これについては、すべての記事で段階的に説明します。最初のセクションではメディアの基本コンセプトを学習し、2 番目のセクションではメディアをウェブに追加する方法、最後のセクションではウェブ上でメディアを使用する高度な手法を用いた実践的な応用を学習します。
ウェブ上に動画を表示する
サイトで動画を表示する方法は 4 つあります。
- YouTube や Vimeo などのメディア ホスティング プロバイダに動画をアップロードします。 これらのオプションを使用するには、プレーヤーをサイトに埋め込む必要があります。
- HTML
<video>要素と<audio>要素を使用した基本的な自己ホスト型埋め込み。 - Shaka Player、JW Player、Video.js などの動画ライブラリを使用した、よりフル機能の埋め込み。
- 独自のメディア サーバーとストリーミング アプリケーションの構築。
このサイトでは、主にメディアの埋め込みの基本について説明します。ただし、独自のメディア ストリーミング アプリケーションの構築を開始できるように、より高度なトピックについて説明します。これは簡単な作業ではありません。そのため、リファレンスとして使用するオフライン サポートを備えたメディア PWA を作成しました。これにより、これを実現する方法と必要な作業量の両方を確認できます。このアプリケーションは、本番環境に対応したサービスや YouTube や Vimeo などのサービスとの競合ではありませんが、やりがいのある新しいことを学ぶための出発点となります。
率直に言って、ホスト型メディア サービスとの競合を構築するには、専門エンジニアのチームと数千時間の作業が必要です。競合他社として市場に参入することが目標でない限り、他のいずれかの方法を使用することをおすすめします。独自のアプリケーションや動画プレーヤーをロールアウトしなくても、最先端のブラウザ サポートを試してみることや、少なくとも既存の動画ライブラリのいずれかを使用することには、このテクノロジーについて理解することをおすすめします。
学習内容
media コレクションは 3 つの部分で構成されています。この最初のセクションでは、サイトにメディアを追加するためのコンセプトと前提条件について説明します。これには、メディア ファイルの構成方法、ウェブ用のファイルを準備するために必要なアプリケーションの基本、ストリーミングのコンセプトの説明が含まれます。2 番目のセクションでは、ファイルを準備してさまざまな形式に変換し、必要に応じて暗号化を追加する方法について説明します。最後のセクションでは、ウェブページにメディア ファイルを埋め込む方法、自動再生のベスト プラクティス、メディア フレームワークの使用、動画をオフラインにする方法、動画にアクセスできるようにする方法を紹介します。
取り上げることがたくさんあるので、まずはメディア ファイルの基本から始めましょう。