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