Web マルチメディアの歴史#
- PC 時代：Flash などの再生プラグイン、リッチクライアント。
- モバイルインターネット時代：Flash などが徐々に廃止され、HTML5 が登場しましたが、動画フォーマットのサポートは限られています。
- Media Source Extensions、さまざまな動画フォーマットをサポート。
基礎知識#
コーディングフォーマット#
画像の基本概念#
- 画像解像度：画像を構成するピクセルデータを決定するもので、水平方向と垂直方向における画像のピクセル数を指します。
- 画像深度：画像深度は、各ピクセルを保存するために必要なビット数を指します。画像深度は、画像の各ピクセルが持つ可能性のある色数や可能な階調数を決定します。
- 例えば、カラー画像は各ピクセルを R、G、B の三成分で表し、各成分は 8 ビット、ピクセル深度は 24 ビットで、表現できる色数は 2 の 24 乗、すなわち 16777216 色です；
- 一方、モノクロ画像は各ピクセルを保存するのに 8 ビット必要で、画像のピクセル深度は 8 ビット、最大階調数は 2 の 8 乗、すなわち256です。
- 画像解像度と画像深度は、画像が占めるサイズを共同で決定します。
動画の基本概念#
- 解像度：各フレームの画像解像度
- フレームレート：動画の単位時間内に含まれる動画フレームの数
- ビットレート：動画の単位時間内に転送されるデータ量を指し、一般的にはkbpsで表されます。すなわちキロビット毎秒です。
- 解像度、フレームレート、ビットレートは共同で動画のサイズを決定します。
動画フレームの分類#
I フレーム、P フレーム、B フレーム
I フレーム（内部コーディングフレーム）：すべての情報を持つ独立したフレームで、独立してデコードされ、他のフレームに依存しません。
P フレーム（前方予測コーディングフレーム）：前の I フレームまたは P フレームを参照してコーディングされます。
B フレーム（双方向予測コーディングフレーム）：前後のフレームに依存し、本フレームと前後のフレームの違いを示します。
1 -> 2 -> 3 ->.....
DTS（デコード時間スタンプ）：ビットストリームがいつデコーダに送られるかを決定します。
PTS（プレゼンテーション時間スタンプ）：デコード後の動画フレームがいつ表示されるかを決定します。
B フレームが存在しない場合、DTS の順序と PTS の順序は同じであるべきです。
GOP（グループオブピクチャ）#
2 つの I フレームの間隔で、通常は 2〜4 秒です。
I フレームが多いと、動画は大きくなります。
なぜコーディングが必要なのか？#
動画解像度：1920 × 1080
この動画の 1 枚の画像のサイズ：1920 × 1080 × 24/8 = 6220800 バイト（5.2M）
フレームレートが 30FPS、長さ 90 分のこの動画は、占有サイズ：933G、大きすぎます！
さらに高い 60FPS のことは言うまでもありません……
コーディングでは何を圧縮しているのでしょうか？
- まずは空間冗長性：
- 時間冗長性：↓ボールの位置だけが変わり、他は変わらない
-
コーディング冗長性：図の画像は、青を 1、白を 0 で表すことができます（この 2 色しかないため、特定のハフマンコーディング方式を使用）。
-
視覚的冗長性
コーディングデータ処理フロー#
予測によって空間と時間の冗長性を除去 -> 変換して空間冗長性を除去
- 量子化 視覚的冗長性を除去：視覚システムがあまり見えないものを取り除く
- エントロピーコーディング コーディング冗長性を除去：出現頻度が高いものは、コーディング文字に必要な長さが短い。
パッケージフォーマット#
上記の動画コーディングは単純な動画情報のみを保存しています。
パッケージフォーマット：音声、動画、画像、または字幕情報を保存するためのコンテナです。
マルチメディア要素と拡張 API#
video & audio#
<video> タグは、HTML または XHTML 文書にメディアプレーヤーを埋め込むために使用され、文書内での動画再生をサポートします。
<!DOCTYPE html>
<html>
<body>
<video src="./video.mp4" muted autoplay controls width=600 height=300></video>
<video muted autoplay controls width=600 height=300>
<source src="./video.mp4"></source>
</video>
</body>
</html>
<audio> 要素は、文書に音声コンテンツを埋め込むために使用されます。
<!DOCTYPE html>
<html>
<body>
<audio src="./auido.mp3" muted autoplay controls width=600 height=300></audio>
<audio muted autoplay controls width=600 height=300>
<source src="./audio.mp3"></source>
</audio>
</body>
</html>
| メソッド | 説明 |
|---|---|
| play() | 音声 / 動画の再生を開始します（非同期） |
| pause() | 現在再生中の音声 / 動画を一時停止します |
| load() | 音声 / 動画要素を再読み込みします |
| canPlayType() | ブラウザが指定された音声 / 動画タイプを再生できるかどうかを検出します |
| addTextTrack() | 音声 / 動画に新しいテキストトラックを追加します |
| 属性 | 説明 |
|---|---|
| autoplay | 読み込みが完了した後に自動再生するかどうかを設定または返します。 |
| controls | 音声 / 動画のコントロールを表示するかどうかを設定または返します（再生 / 一時停止など） |
| currentTime | 音声 / 動画の現在の再生位置を設定または返します（秒単位） |
| duration | 現在の音声 / 動画の長さを返します（秒単位） |
| src | 音声 / 動画要素の現在のソースを設定または返します |
| volume | 音声 / 動画の音量を設定または返します |
| buffered | 音声 / 動画のバッファリングされた部分を示す TimeRanges オブジェクトを返します |
| playbackRate | 音声 / 動画再生の速度を設定または返します。 |
| error | 音声 / 動画のエラー状態を示すMediaError オブジェクトを返します |
| readyState | 音声 / 動画の現在の準備状態を返します。 |
| ... | ... |
| イベント | 説明 |
|---|---|
| loadedmetadata | ブラウザが音声 / 動画のメタデータを読み込んだときにトリガーされます |
| canplay | ブラウザが音声 / 動画の再生を開始できるときにトリガーされます |
| play | 音声 / 動画が再生を開始したとき、または一時停止から再開したときにトリガーされます |
| playing | 音声 / 動画がバッファリングのために一時停止または停止した後に準備が整ったときにトリガーされます |
| pause | 音声 / 動画が一時停止したときにトリガーされます |
| timeupdate | 現在の再生位置が変更されたときにトリガーされます |
| seeking | ユーザーが音声 / 動画の新しい位置に移動 / ジャンプを開始したときにトリガーされます |
| seeked | ユーザーが音声 / 動画の新しい位置に移動 / ジャンプしたときにトリガーされます |
| waiting | 動画が次のフレームをバッファリングするために停止したときにトリガーされます |
| ended | 現在の再生リストが終了したときにトリガーされます |
| ... | ... |
欠陥#
- audio と video は hls、flv などの動画フォーマットを直接再生することができません。
- 動画リソースのリクエストと読み込みはコードで制御できないため、以下の機能を実現できません。
- セグメント読み込み（データ量の節約）
- 解像度のシームレスな切り替え
- 正確なプリロード
MSE（拡張 API）#
メディアソース拡張 API（Media Source Extensions）
-
プラグインなしで Web 上でストリーミングメディアを再生
-
hIs、flv、mp4 などのフォーマットの動画を再生することをサポート
-
動画のセグメント読み込み、解像度のシームレスな切り替え、適応ビットレート、正確なプリロードなどを実現可能
-
主流のブラウザは基本的にサポートしていますが、iOS の Safari は除きます。
- mediaSource インスタンスを作成します。
- mediaSource への URL を作成します。
- sourceopen イベントをリッスンします。
- sourceBuffer を作成します。
- sourceBuffer にデータを追加します。
- updateend イベントをリッスンします。
- プレーヤーの再生フロー
ストリーミングプロトコル#
HLS の正式名称は HTTP Live Streaming で、Apple 社が提案した HTTP ベースのメディアストリーミングプロトコルであり、リアルタイムの音声と動画のストリーミングに使用されます。現在、HLS プロトコルはビデオオンデマンドやライブストリーミングの分野で広く利用されています。
応用シーン#
- オンデマンド / ライブ -> 動画アップロード -> 動画トランスコーディング
- 画像 -> 新しい画像をサポート
- クラウドゲーム -> 煩雑なクライアントをダウンロードする必要がなく、遠隔で実行され、動画ストリームが行き来します（遅延に対する要求が高い）。
まとめと感想#
本授業では、先生が Web マルチメディア技術の基本概念について解説しました。例えば、コーディングフォーマット、パッケージフォーマット、マルチメディア要素、ストリーミングプロトコルなど、Web マルチメディアのさまざまな応用シーンについても説明しました。
本文で引用したほとんどの内容は、劉立国先生の授業および MDN からのものです。