このセクションでは、<video>
タグと <source>
タグを使用してメディア ファイルをウェブページに埋め込む方法、聴覚障がい者向けに動画に字幕を追加する方法、メディア フレームワークを使用するための一般的なコンセプトについて学習します。さらに、プリロードを使用して再生開始を高速化する方法と、Kino と呼ばれるオフライン アダプティブ ストリーミング機能を備えた更新されたデモ PWA を作成する方法についても説明します。
このセクションでは、ウェブページに埋め込む準備ができている動画ファイルがあることを前提としています。カメラからダウンロードした .mov
ファイルは動作しません。ここまでの手順が十分でない場合は、ウェブ用のメディア ファイルを準備するを参照して、ここに戻ってください。
このセクションでは、これらのトピックについて説明します。
- <video> タグと <source> タグでは、ウェブページにメディア ファイルを埋め込む方法について詳しく説明しています。
- メディア アクセシビリティでは、聴覚障がい者向けにメディア ファイルに字幕を追加する方法を学習します。
- メディア フレームワークでは、Shaka Player、JW Player、Video.js などのメディア フレームワークの基本的な使い方を学びます。
- 音声と動画のプリロードによる高速再生では、リソースを積極的にプリロードしてメディア再生を高速化する方法について説明します。
- オフライン ストリーミングを使用する PWA では、フレームワークを使用せずにアダプティブ ストリーミングとオフライン再生が可能な、更新されたデモ PWA がどのように作成されたかを説明します。さらに、ソースコードで遊ぶこともできます。
このセクションの内容は多数あります。まずは <video> タグと <source> タグの使用方法をご覧ください。