音声と動画の加工 - ウェブメディア技術

音声と動画の加工
========

ウェブのよいところは、複数の技術をまとめて新しいものを作ることができる点です。ネイティブの音声や動画をブラウザー上で利用できるということは、これらのデータストリームを `<canvas>`、WebGL、Web Audio API を利用して操作することで、音声や動画に直接変更を加えることができることを意味します。例えば音声にリバーブやコンプレッション効果をかけたり、動画にグレイスケールやセピアのフィルターをかけたりすることができます。この記事では、必要なことを説明するためのリファレンスを提供します。

動画の加工
-----

動画の各フレームからピクセルの値を読むことができることは、とても有用です。

### 動画とキャンバス

`<canvas>` 要素はウェブページ上でグラフィックを描画するための平面を提供します。これは強力で、動画の処理にも有用です。

一般的なテクニックは次のようになります。

1. `<video>` 要素からのフレームを中間の `<canvas>` 要素に描画します。
2. 中間の `<canvas>` 要素からデータを取得し、それを加工します。
3. 加工したデータを「画面」の `<canvas>` を通じて描画します。
4. 一時停止し、繰り返します。

例えば、動画を処理してグレースケールで表示する場合を考えてみましょう。この場合、ソース動画と出力のグレースケールのフレームの両方を表示します。通常、「動画をグレースケールで再生」機能を実装する場合、 `display: none` を `<video>` 要素のスタイルに追加して、ソース動画が画面に描画されず、変更されたフレームのみが表示されるキャンバスが表示されるようにします。

#### HTML

動画プレイヤーと、 `<canvas>` 要素は次のように記述します。

```html
<video
 id="my-video"
 controls="true"
 width="480"
 height="270"
 crossorigin="anonymous">
  <source
 src="http://jplayer.org/video/webm/Big\_Buck\_Bunny\_Trailer.webm"
 type="video/webm" />
  <source
 src="http://jplayer.org/video/m4v/Big\_Buck\_Bunny\_Trailer.m4v"
 type="video/mp4" />
</video>

<canvas id="my-canvas" width="480" height="270"></canvas>
```

#### JavaScript

このコードはフレームの加工を扱います。

```js
var processor = {
  timerCallback: function () {
    if (this.video.paused || this.video.ended) {
      return;
    }
    this.computeFrame();
    var self = this;
    setTimeout(function () {
      self.timerCallback();
    }, 16); // roughly 60 frames per second
  },

  doLoad: function () {
    this.video = document.getElementById("my-video");
    this.c1 = document.getElementById("my-canvas");
    this.ctx1 = this.c1.getContext("2d");
    var self = this;

    this.video.addEventListener(
      "play",
      function () {
        self.width = self.video.width;
        self.height = self.video.height;
        self.timerCallback();
      },
      false,
    );
  },

  computeFrame: function () {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
    var l = frame.data.length / 4;

    for (var i = 0; i < l; i++) {
      var grey =
        (frame.data[i \* 4 + 0] +
          frame.data[i \* 4 + 1] +
          frame.data[i \* 4 + 2]) /
        3;

      frame.data[i \* 4 + 0] = grey;
      frame.data[i \* 4 + 1] = grey;
      frame.data[i \* 4 + 2] = grey;
    }
    this.ctx1.putImageData(frame, 0, 0);

    return;
  },
};
```

ページの読み込み後に、次のように呼び出してください。

```js
processor.doLoad();
```

#### 結果

これは、キャンバスを使用して動画フレームを加工する方法を示すとてもシンプルな例です。効率をよくするために、対応しているブラウザーで実行する場合は `requestAnimationFrame()` を `setTimeout()` の代わりに使用することを検討したほうがいいでしょう。

**メモ:** 潜在的なセキュリティ上の問題により、動画がコードと異なるドメインより配信されている場合、動画を配信しているサーバーで CORS (オリジン間リソース共有) (en-US) を有効にする必要があります。

### 動画と WebGL

WebGL はキャンバスを使用してハードウェアアクセラレーションによる三次元や二次元の描画を行う強力な API です。 `<video>` 要素と組み合わせることで、動画をテクチャとして利用できます。つまり三次元空間上に動画を配置し、再生できます。

**メモ:** このデモのソースコードは GitHub にあります (ライブで表示も)。

### 再生速度

音声や動画の再生速度は `<audio>` もしくは `<video>` 要素の `playbackRate` と呼ばれる属性を使用して調整することができます。 `playbackRate` には再生速度の倍率を指定します。例えば 0.5 を指定すると半分の速度で、 2 を指定すると倍速で再生されます。

なお、 `playbackRate` プロパティは `<audio>` と `<video>` の両方で動作しますが、どちらの場合も、再生速度を変更するものの音程は*変更しません*。音声の高さを変更するには、 Web Audio API を使用する必要があります。 `AudioBufferSourceNode.playbackRate` プロパティを参照してください。

#### HTML

```html
<video
 id="my-video"
 controls
 src="http://jplayer.org/video/m4v/Big\_Buck\_Bunny\_Trailer.m4v"></video>
```

#### JavaScript

```js
var myVideo = document.getElementById("my-video");
myVideo.playbackRate = 2;
```

```
<video id="my-video" controls="true" width="480" height="270">
  <source
 src="http://jplayer.org/video/webm/Big\_Buck\_Bunny\_Trailer.webm"
 type="video/webm" />
  <source
 src="http://jplayer.org/video/m4v/Big\_Buck\_Bunny\_Trailer.m4v"
 type="video/mp4" />
</video>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
var myVideo = document.getElementById('my-video');
myVideo.playbackRate = 2;</textarea
>
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function setPlaybackRate() {
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  setPlaybackRate();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", setPlaybackRate);
window.addEventListener("load", setPlaybackRate);
```

**メモ:** playbackRate のデモを試してみてください。

音声の加工
-----

`playbackRate` の一方で、音声を加工するためには Web Audio API を利用することが一般的です。

### 音源の選択

Web Audio API は、様々なソースから音声を受け取り、それを処理してを受信し、それを処理して音を処理した後に送信する出力機器を表す `AudioDestinationNode` に送り出すことができます。

| この音声ソースの場合... | この Web Audio ノード型を使用してください node type |
| --- | --- |
| HTML の `<audio>` または `<video>` 要素の音声トラック | `MediaElementAudioSourceNode` |
| メモリ内の生の音声データバッファー | `AudioBufferSourceNode` |
| サイン波やその他の合成波形を生成するオシレーター | `OscillatorNode` |
| WebRTC の音声トラック (例えば `getUserMedia()` を使用して取得できるマイク入力) | `MediaStreamAudioSourceNode` |

### 音声フィルター

Web Audio API では `BiquadFilterNode` (en-US) を利用することで様々なフィルターやエフェクトを利用できます。

#### HTML

```html
<video id="my-video" controls src="myvideo.mp4" type="video/mp4"></video>
```

#### JavaScript

```js
var context = new AudioContext(),
  audioSource = context.createMediaElementSource(
    document.getElementById("my-video"),
  ),
  filter = context.createBiquadFilter();
audioSource.connect(filter);
filter.connect(context.destination);

// Configure filter
filter.type = "lowshelf";
filter.frequency.value = 1000;
filter.gain.value = 25;
```

```
<video
 id="my-video"
 controls="true"
 width="480"
 height="270"
 crossorigin="anonymous">
  <source
 src="http://jplayer.org/video/webm/Big\_Buck\_Bunny\_Trailer.webm"
 type="video/webm" />
  <source
 src="http://jplayer.org/video/m4v/Big\_Buck\_Bunny\_Trailer.m4v"
 type="video/mp4" />
</video>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
filter.type = "lowshelf";
filter.frequency.value = 1000;
filter.gain.value = 25;</textarea
>
```

```
var context = new AudioContext(),
  audioSource = context.createMediaElementSource(
    document.getElementById("my-video"),
  ),
  filter = context.createBiquadFilter();
audioSource.connect(filter);
filter.connect(context.destination);

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function setFilter() {
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  setFilter();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", setFilter);
window.addEventListener("load", setFilter);
```

**メモ:** CORS (en-US) が有効になっていない環境では、動画はコードと同じドメイン上になければなりません。これはセキュリティ上の問題を避けるためです。

#### よく使われる音声フィルター

このノードでよく利用されるフィルターは以下の通りです。

* ローパス: 閾値に指定された周波数より低い音は通過させ、高いものは減衰させます。
* ハイパス: 閾値に指定された周波数より高い音は通過させ、低いものは減衰させます。
* バンドパス: 指定された周波数帯の音は通過させ、それ以外は減衰させます。
* ローシェルフ: 周波数に関わらず全ての音を通過させますが、閾値より低いものは増幅 (もしくは減衰) されます
* ハイシェルフ: 周波数に関わらず全ての音を通過させますが、閾値より高いものは増幅 (もしくは減衰) されます
* ピーキング: 周波数に関わらず全ての音を通過させますが、指定された周波数帯のものは増幅 (もしくは減衰) されます
* ノッチ: 指定された周波数帯を除き、全ての音を通過させます
* オールパス: 周波数に関わらず全ての音を通過させますが、幾つかの周波数間の相関係を変更します

**メモ:** 詳しくは `BiquadFilterNode` (en-US) を参照してください。

### たたみ込みとインパルス

`ConvolverNode` を利用することで、音声に**インパルス応答**を適用することができます。インパルス応答とはハンドクラップのような短い音のインパルスから作成された音のことです。インパルス応答はインパルスが作られた環境 (例えばトンネル内で手を叩くことで発生するエコー) を示します。

#### 例

```js
var convolver = context.createConvolver();
convolver.buffer = this.impulseResponseBuffer;
// Connect the graph.
source.connect(convolver);
convolver.connect(context.destination);
```

適用例としてはこの Codepen をご覧ください (ただし、とても、とてもくだらないです。小さな子どもが喜ぶくらいでしょう)。

### 空間的な音

**パンナーノード**を使用することで、音源の位置を操作できます。パンナーノード—`PannerNode`—は、ソースコーンの位置だけでなく、その方向も指定することができます。位置や方向は三次元空間上で指定します。

#### 例

```js
var panner = context.createPanner();
panner.coneOuterGain = 0.2;
panner.coneOuterAngle = 120;
panner.coneInnerAngle = 0;

panner.connect(context.destination);
source.connect(panner);
source.start(0);

// Position the listener at the origin.
context.listener.setPosition(0, 0, 0);
```

**メモ:** GitHub リポジトリに例があります (ライブ版も)。

JavaScript によるコーデック
-------------------

JavasCript でより低レベルでの音声操作が可能です。これを利用することで、オーディオコーデックを自作することができます。

以下にフォーマットとそのコーデックのリストを示します。

* AAC: AAC.js
* ALAC: alac.js
* FLAC: flac.js
* MP3: mp3.js
* Opus: Opus.js
* Vorbis: vorbis.js

**メモ:** AudioCogs でいくつかのデモを試せます。 Audiocogs は JavaScript でのコーデック実装を行うためのフレームワークである Aurora.js を提供しています。

例
-

* 様々な Web Audio API (およびその他) の例
* THREE.js Video Cube example
* Convolution Effects in Real-Time
関連情報
----

### チュートリアル

* キャンバスを使用した動画の加工 (en-US)
* HTML5 playbackRate の解説
* Web Audio API の利用
* Web audio spatialisation の基本 (en-US)
* 動画フレームの WebGL テクスチャとしての利用 (THREE.js WebGL ライブラリ (及びその他) と この効果の実現)
* WebGL におけるアニメーションテクスチャ
* Developing Game Audio with the Web Audio API (Room effects and filters)
### リファレンス

* `<audio>` および `<video>` 要素
* `HTMLMediaElement` API
* `<canvas>` 要素
* Web Audio API
* AudioContext
* More info on Spatial Audio (en-US)
* ウェブメディア技術


メディアおよびウェブ音声 API の自動再生ガイド - ウェブメディア技術

メディアおよびウェブ音声 API の自動再生ガイド
=========================

ページが読み込まれるとすぐに音声（または音声トラックを含む動画）の再生を自動的に開始することは、ユーザーにとって歓迎されない驚きです。 メディアの自動再生は便利な目的に役立ちますが、注意して必要なときにだけ使用してください。 ユーザーがこれを制御できるようにするために、ブラウザーは多くの場合、さまざまな形式の自動再生のブロック (autoplay blocking) を提供します。 このガイドでは、さまざまなメディアおよびウェブオーディオ API (Web Audio API) の自動再生機能について説明します — 自動再生の使用方法と自動再生のブロックを適切に処理するためのブラウザーの操作方法の簡単な概要を含みます。

ソースメディアに音声トラックがない場合、または音声トラックがミュートされている場合、自動再生のブロックは `<video>` 要素には適用*されません*。 アクティブな音声トラックを持つメディアは**可聴である**と見なされ、自動再生のブロックがそれらに適用されます。 **可聴でない**メディアは自動再生のブロックの影響を受けません。

自動再生と自動再生のブロック
--------------

**自動再生** (**autoplay**) という用語は、ユーザーが再生の開始を明確に要求しなくても音声の再生を開始させる機能を意味します。 これには、メディアの自動再生のための HTML 属性の使用と、ユーザー入力を処理するコンテキストの外で再生を開始するための JavaScript コードのユーザーの両方が含まれます。

つまり、次の両方が自動再生のふるまいと見なされるため、ブラウザーの自動再生のブロックのポリシーに従います。

```html
<audio src="/music.mp3" autoplay></audio>
```

と

```js
audioElement.play();
```

次のウェブ機能および API は自動再生のブロックの影響を受ける可能性があります。

* HTML の `<audio>` 要素と `<video>` 要素
* ウェブオーディオ API (Web Audio API)

ユーザーの観点からは、警告なしに自発的にノイズを発し始めるウェブページまたはアプリは、耳障り、不便、または気まずいものになる可能性があります。 そのため、ブラウザーでは通常、特定の状況下でのみ自動再生が正常に行われるようにすることしかできません。

### 自動再生の可用性

一般的な規則として、次の条件の*少なくとも 1 つ*が当てはまる場合にのみ、メディアの自動再生が許可されると想定できます。

* 音声がミュートになっているか、音量が 0 に設定されている。
* ユーザーがサイトを操作した（クリック、タップ、キーを押すなど）。
* サイトが許可リストに登録されている場合。 これは、ユーザーがメディアと頻繁に関わっているとブラウザーが判断した場合は自動的に、または設定や他のユーザーインターフェイス機能を使用して手動で行われる場合があります。
* 自動再生機能ポリシーを使用して `<iframe>` とその文書に自動再生のサポートを付与する場合。

そうでないと、再生がブロックされる可能性があります。 ブロックされる正確な状況、およびサイトが許可リストに登録される方法の詳細はブラウザーによって異なりますが、上記のガイドラインを参考にしてください。

詳しくは、 Google Chrome および WebKit の自動再生ポリシーを参照してください。

**メモ:** 別の言い方をすれば、音声が含まれているメディアの再生は、ユーザー操作がまだ行われていないタブでプログラム的に再生が開始されると、通常はブロックされます。 ブラウザーはさらに他の状況下でブロックすることを選択するかもしれません。

メディア要素の自動再生
-----------

自動再生とは何か、自動再生が許可されないようにすることができるかについて説明したので、次に、ウェブサイトまたはアプリがページの読み込み時に自動的にメディアを再生する方法、自動再生の失敗の検出方法、および自動再生がブラウザーによって拒否されたときの対処方法について説明します。

### autoplay 属性

コンテンツを自動的に再生する最も簡単な方法は、 `autoplay` 属性を`<audio>` 要素または `<video>` 要素に追加することです。 これにより、要素の `autoplay` プロパティが `true` に設定され、`autoplay` が `true` の場合、次のことが発生した後、メディアはできるだけ早く自動的に再生を開始します。

* ページは自動再生機能を使用することを許可されている
* 要素はページの読み込み中に作成された
* ネットワークのパフォーマンスや帯域幅に劇的な変化がないと仮定して、再生を開始し、中断することなくメディアの最後まで再生を続けるのに十分なメディアが受信されている

#### 例: autoplay 属性

`autoplay` 属性を使用する `<audio>` 要素は、次のようになります。

```html
<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
</audio>
```

#### 例 2: 自動再生の失敗を検出する

重要なことを自動再生に頼っている場合、または自動再生の失敗が何らかの形でアプリに影響を与える場合は、自動再生が開始されなかったことを知りたいと思うでしょう。 残念ながら、`autoplay` 属性の場合、自動再生が正常に開始されたかどうかを認識するのは困難です。 自動再生が失敗したときに起動されるイベントはありません。 また、設定可能な例外やコールバック、あるいは自動再生が機能したかどうかを示すフラグもメディア要素にありません。 本当にできることは、いくつかの値を調べて、自動再生が機能したかどうかについて山を張ることだけです。

見方を変えることができるのであれば、メディアの再生がうまくいかなかったときではなく、メディアの再生がうまくいったことを知ることに頼ることをお勧めします。 メディア要素で `play` イベントが発生するのを待ち受けすることで、これを簡単に行うことができます。

`play` イベントは、メディアが一時停止後に再開されたとき*と*自動再生が発生したときの両方に送信されます。 つまり、初めて `play` イベントが発生したときは、ページが開かれた後に初めてメディアの再生が開始されたことがわかります。

次の HTML をメディア要素として考えます。

```html
<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)"></video>
```

ここでは、 `<video>` 要素に `autoplay` 属性が設定されており、 `onplay` イベントハンドラーが設定されています。イベントは `handleFirstPlay()` と呼ばれる関数によって処理され、この関数は入力として `play` イベントを受け取ります。

`handleFirstPlay()` は次のようになります。

```js
let hasPlayed = false;
function handleFirstPlay(event) {
  if (!hasPlayed) {
    hasPlayed = true;

    const vid = event.target;

    vid.onplay = null;

    // 再生が開始された後に行う必要があるものをすべて開始する。
  }
}
```

`Event` オブジェクトの `target` から動画要素への参照を取得した後、その要素の `onplay` ハンドラーは `null` に設定されます。 これにより、今後の `play` イベントがハンドラーに配信されなくなります。 これは、文書がバックグラウンドタブにあるときに、動画がユーザーによって一時停止および再開された場合、またはブラウザーによって自動的に行われる場合に発生する可能性があります。

この時点で、あなたのサイトやアプリはそれがする必要があるものは何でも始めることができます。

**メモ:** この方法では、自動再生とユーザーによる手動再生開始は区別されません。

### play() メソッド

用語「自動再生」はまた、スクリプトが、ユーザ入力イベント処理のコンテキストの外側で、音声を含んだメディアの再生を開始しようと試みるシナリオを指します。 これは、メディア要素の `play()` メソッドを呼び出すことによって行われます。

**メモ:** 自動再生設定のサポートは、自動再生の他の手段よりも `autoplay` 属性の方が広く普及しているため、できるだけ `autoplay` 属性を使用することを強くお勧めします。 また、ブラウザーが再生開始の責任を負うようにして、再生のタイミングを最適化します。

#### 例: 動画の再生

この簡単な例では、文書内の最初の `<video>` 要素を再生します。 文書に自動的にメディアを再生するパーミッションがない限り、`play()` は再生を開始させません。

```js
document.querySelector("video").play();
```

#### 例: play() のエラー処理

`play()` メソッドを使用して開始すると、メディアの自動再生の失敗を検出するのがはるかに簡単になります。 `play()` は、メディアが正常に再生を開始すると解決され、自動再生が拒否された場合など、再生が開始しないと却下される `Promise` を返します。 自動再生が失敗した場合、おそらくメディアを再生するためのパーミッションをユーザーが与えるようにブラウザーに手動で指示する方法をユーザーに提供したいと思うでしょう。

仕事を達成するために、このようなコードを使うかもしれません。

```js
let startPlayPromise = videoElem.play();

if (startPlayPromise !== undefined) {
  startPlayPromise
    .then(() => {
      // 再生が始まった後でのみ行うべきことを何でも
      // 始めます。
    })
    .catch((error) => {
      if (error.name === "NotAllowedError") {
        showPlayButton(videoElem);
      } else {
        // 読み込みまたは再生エラー
      }
    });
}
```

`play()` の結果に対して最初に行うことは、それが未定義 (`undefined`) ではないことを確認することです。 これは、以前のバージョンの HTML 仕様書では、`play()` が値を返さなかったためです。 操作の成功または失敗を判断できるようにというプロミスを返すことが最近追加されました。 `undefined` をチェックすることで、このコードが古いバージョンのウェブブラウザーでエラーにより失敗することを防ぎます。

`play()` が返すプロミスがエラーなしで解決された場合、 `then()` 節が実行され、自動再生が開始されたときに必要なことを始めることができるようになります。

次にプロミスに `catch()` ハンドラーを追加します。 これは、エラーの `name` を調べて、`NotAllowedError` かどうかを確認します。 これは、自動再生が拒否されたなど、パーミッションの問題が原因で再生が失敗したことを示します。 その場合は、ユーザーが手動で再生を開始できるようにするためのユーザーインターフェイスを表示する必要があります。 これはここでは関数 `showPlayButton()` によって処理されます。

その他のエラーは適切に処理されます。

`play()` によって返されたプロミスがエラーなしで解決された場合、`then()` 句が実行され、自動再生が開始されたときに必要なことは何でも開始できます。

```js
let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);
```

ウェブ音声 API を使用した自動再生
-------------------

ウェブオーディオ API では、ウェブサイトまたはアプリは、 `AudioContext` にリンクされているソースノードで `start()` メソッドを使用して音声の再生を開始できます。 ユーザ入力イベント処理のコンテキストの外側でそうすることは、自動再生規則の影響を受けます。

autoplay 機能ポリシー
---------------

上記のブラウザー側での自動再生機能の管理および制御に加えて、ウェブサーバーは自動再生が機能することを許可する意欲を表現することもできます。 HTTP の `Feature-Policy` ヘッダーの `autoplay` ディレクティブは、メディアの自動再生に使用できるドメインがあれば、それを制御するために使用されます。 既定では、`autoplay` 機能ポリシー (feature policy) は `'self'`（*単一引用符を含む*）に設定されています。 これは、文書と同じドメインでホストされているときに自動再生が許可されることを示します。

また、`'none'` を指定して自動再生を完全に無効にしたり、`'*'` を指定してすべてのドメインからの自動再生を許可したり、メディアを自動的に再生できる 1 つ以上の特定のオリジンを指定できます。 これらのオリジンはスペース文字で区切ります。

**メモ:** 指定された機能ポリシーは、そのフレームとその中にネストされているすべてのフレームに新しい機能ポリシーを設定する `allow` が含まれていない限り、文書とその中にネストされているすべての `<iframe>` に適用されます。

`<iframe>` の `allow` 属性を使用してそのフレームとそのネストされたフレームの機能ポリシーを指定するときは、値 `'src'` を指定して、フレームの `src` 属性で指定されたものと同じドメインからのメディアの自動再生のみを許可できます。

### 例: 文書のドメインからの自動再生のみを許可する

`Feature-Policy` ヘッダーを使用して、文書のオリジンからのメディアの自動再生のみを許可するには次のようにします。

```http
Feature-Policy: autoplay 'self'
```

`<iframe>` に対して同じことを行うには次のようにします。

```html
<iframe src="mediaplayer.html" allow="autoplay 'src'"> </iframe>
```

### 例: 自動再生と全画面モードの許可

前の例に全画面 API (Fullscreen API) のパーミッションを追加すると、ドメインに関係なく全画面のアクセスが許可されている場合、次のような `Feature-Policy` ヘッダーになります。 必要に応じてドメイン制限を追加できます。

```http
Feature-Policy: autoplay 'self'; fullscreen
```

`<iframe>` 要素の `allow` プロパティを使って同じパーミッションを設定すると、次のようになります。

```html
<iframe src="mediaplayer.html" allow="autoplay 'src'; fullscreen"> </iframe>
```

### 例: 特定のソースからの自動再生を許可する

文書（または `<iframe>`）の独自ドメインと `https://example.media` の両方からメディアを再生できるようにする `Feature-Policy` ヘッダーは、次のようになります。

```http
Feature-Policy: autoplay 'self' https://example.media
```

次のように `<iframe>` を記述して、この自動再生ポリシーをそれ自体に適用する必要があり、すべての子フレームをこのように記述することを指定することができます。

```html
<iframe
 width="300"
 height="200"
 src="mediaplayer.html"
 allow="autoplay 'src' https://example.media">
</iframe>
```

### 例: 自動再生を無効にする

`autoplay` 機能ポリシーを `'none'` に設定すると、文書または `<iframe>` とすべてのネストされたフレームに対して自動再生が完全に無効になります。 HTTP ヘッダーは次のとおりです。

```http
Feature-Policy: autoplay 'none'
```

`<iframe>` の `allow` 属性を使う場合は、次のようになります。

```html
<iframe src="mediaplayer.html" allow="autoplay 'none'"> </iframe>
```

ベストプラクティス
---------

ここでは、自動再生を最大限に活用するためのヒントと推奨されるベストプラクティスを紹介します。

### メディアコントロールを使用した自動再生失敗の処理

自動再生の一般的な使用例は、記事、広告、またはページの主な機能のプレビューに合わせてビデオクリップの再生を自動的に開始することです。 このような動画を自動再生するには、2 つの選択肢があります。 音声トラックを使用しない、または音声トラックを使用しますが、既定で音声をミュートするように `<video>` 要素を次のように設定する方法です。

```html
<video
 src="/videos/awesomevid.webm"
 controls
 autoplay
 playsinline
 muted></video>
```

この動画要素は、ユーザーコントロール（通常は再生/一時停止、動画のタイムラインのスクラブ、音量調整、およびミュート）を含むように構成されています。 また、`muted` 属性が含まれているため、動画は自動再生されますが、音声はミュートされています。 ただし、ユーザーはコントロールのミュート解除ボタンをクリックして音声を再度有効にすることができます。

ブラウザー設定オプション
------------

ブラウザーには、自動再生が機能する方法や自動再生のブロックの処理方法を制御する設定があります。 ここでは、ウェブ開発者として特別な意味または重要性があるかもしれないそのような設定がリストされています。 これらには、テストやデバッグに役立つ可能性のあるものや、あなたが処理する準備を整える必要がある方法で設定できるものが含まれます。

### Firefox

`media.allowed-to-play.enabled`

`HTMLMediaElement.allowedToPlay` プロパティをウェブに公開するかどうかを指定する論理型設定。 これは現在既定では `false` です（既定で `true` になっているナイトリービルドを除く）。 これが `false` の場合、`allowedToPlay` プロパティは `HTMLMediaElement` インターフェイスにないため、`<audio>` 要素にも `<video>` 要素にも存在しません。

`media.autoplay.allow-extension-background-pages`

この論理型設定が `true` の場合、ブラウザー拡張機能のバックグラウンドスクリプトは音声メディアを自動再生できます。 この値を `false` に設定すると、この機能は無効になります。 既定値は `true` です。

`media.autoplay.allow-muted`

`true`（既定）の場合、現在ミュートされている音声メディアを自動的に再生することを許可する論理型設定。 これが `false` に変更された場合、音声トラックのあるメディアはミュートされていても再生が許可されません。

`media.autoplay.block-webaudio`

ウェブオーディオ API に自動再生のブロックを適用するかどうかを示す論理型設定。 既定値は `true` です。

`media.autoplay.default`

既定で自動再生サポートのドメインごとの設定を許可する（`0`）、ブロックする（`1`）、使用時のプロンプト（`2`）のどちらにするかを指定する整数設定。 既定値は `0` です。

`media.autoplay.enabled.user-gestures-needed`（ナイトリービルドのみ）

ユーザーのジェスチャーの検出によって `media.autoplay.default` の設定をオーバーライドできるかどうかを制御する論理型設定。 `media.autoplay.default` が `0`（既定で自動再生が許可）に設定されて*いない*場合、この設定が `true` の場合、ページがユーザーのジェスチャーによってアクティブにされ、可聴でないメディアはまったく制限されていない場合に、音声トラック付きのメディアを自動再生できます。

`media.block-autoplay-until-in-foreground`

バックグラウンドタブで開始したときにメディアの再生がブロックされるかどうかを示す論理型設定。 既定値の `true` は、他の方法で利用できる場合でも、タブが前面に表示されるまで自動再生は実行されないことを意味します。 これは、タブが音を出し始めて、ユーザーがすべてのタブやウィンドウの中からそのタブを見つけることができないという煩わしい状況を防ぎます。

関連情報
----

* ウェブメディア技術
* 動画と音声のコンテンツ（学習ガイド）
* ウェブオーディオ API の使用
* クロスブラウザー音声の基本 (en-US)


音声と動画の配信 - ウェブメディア技術

音声と動画の配信
========

静的な」メディアファイルからアダプティブなライブストリームまで、さまざまな方法で音声と動画をウェブ上に配信することができます。この記事は、ウェブベースのメディアの様々な配信メカニズムや、一般的なブラウザーへの互換性を探るための出発点として意図されています。

audio および video 要素
------------------

録音された音声ファイルを扱う場合でも、ライブストリームを扱う場合でも、ブラウザーの `<audio>` と `<video>` 要素を通じてそれらを利用できるようにする仕組みはほとんど変わりません。現在、すべてのブラウザーで対応するには、 2 つの形式を指定する必要がありますが、 MP3 と MP4 の形式が Firefox と Opera で採用されたため、この状況は急速に変化しています。互換性に関する情報は、ウェブ上のメディアタイプと形式のガイドで探すことができます。

動画と音声を配信する場合、一般的なワークフローは通常次のようなものです。

1. ブラウザーの機能検出で対応している形式を調べる（通常は上記のように 2 つから選択することになります）。
2. ブラウザーが指定された形式の再生にネイティブに対応していない場合は、静止画を表示するか、動画を表示するための代替技術を使用します。
3. どのようにメディアを再生/インスタンス化するかを確認します（例えば `<video>` 要素か `document.createElement('video')` か）。
4. メディアファイルをプレイヤーに配信する。
### HTML の音声

```html
<audio controls preload="auto">
  <source src="audiofile.mp3" type="audio/mpeg" />

  <!-- mp3 に対応していないブラウザーのための代替 -->
  <source src="audiofile.ogg" type="audio/ogg" />

  <!-- audio タグに対応していないブラウザーのための代替 -->
  <a href="audiofile.mp3">音声をダウンロード</a>
</audio>
```

上記のコードでは、スムーズな再生のために、できるだけ多くの音声を先読みさせようとする音声プレイヤーを作成しています。

**メモ:** モバイルブラウザーによっては、 `preload` 属性が無視される場合があります。

詳しい情報は、クロスブラウザーの音声の基本（HTML Audio の詳細） (en-US)

### HTML の動画

```html
<video
 controls
 width="640"
 height="480"
 poster="initialimage.png"
 autoplay
 muted>
  <source src="videofile.mp4" type="video/mp4" />

  <!-- mp4 に対応していないブラウザーのための代替 -->
  <source src="videofile.webm" type="video/webm" />

  <!-- 字幕ファイルを指定 -->
  <track src="subtitles\_en.vtt" kind="subtitles" srclang="en" label="English" />
  <track
 src="subtitles\_no.vtt"
 kind="subtitles"
 srclang="no"
 label="Norwegian" />

  <!-- video タグに対応していないブラウザーのための代替 -->
  <a href="videofile.mp4">download video</a>
</video>
```

上記のコードでは、寸法が 640x480 ピクセルの動画プレイヤーを作成し、動画が再生されるまではポスター画像を表示しています。動画は自動再生されますが、既定ではミュートされるように指示しています。

**メモ:** `autoplay` 属性は、一部のモバイルブラウザーで無視される場合があります。また、自動再生機能は、使い方を誤ると物議をかもす可能性があります。自動再生の賢い使用方法を知るために、メディアとウェブ音声 API の自動再生ガイドを読むことを強くお勧めします。

詳しい情報は <video> 要素とクロスブラウザーの動画プレイヤーの作成 (en-US)を参照してください。

### JavaScript の音声

```js
const myAudio = document.createElement("audio");

if (myAudio.canPlayType("audio/mpeg")) {
  myAudio.setAttribute("src", "audiofile.mp3");
} else if (myAudio.canPlayType("audio/ogg")) {
  myAudio.setAttribute("src", "audiofile.ogg");
}

myAudio.currentTime = 5;
myAudio.play();
```

ブラウザーで対応している音声ファイルの種類に応じて音声のソースを設定し、 5 秒後に再生ヘッドを設定して再生を試みます。

**メモ:** 再生は、ユーザー主導のイベントによって発行されない限り、ほとんどのブラウザーで無視されます。

また、 `<audio>` 要素に base64 エンコードされた WAV ファイルを与えて、その場で音声を生成することも可能です。

```html
<audio id="player" src="data:audio/x-wav;base64,UklGRvC…"></audio>
```

Speak.js はこのテクニックを採用しています。デモを試してみてください。

### JavaScript の動画

```js
const myVideo = document.createElement("video");

if (myVideo.canPlayType("video/mp4")) {
  myVideo.setAttribute("src", "videofile.mp4");
} else if (myVideo.canPlayType("video/webm")) {
  myVideo.setAttribute("src", "videofile.webm");
}

myVideo.width = 480;
myVideo.height = 320;
```

ブラウザーの対応している動画ファイルの種類に応じて動画のソースを設定し、動画の幅と高さを設定します。

ウェブオーディオ API
------------

```js
let context;
let request;
let source;

try {
  context = new AudioContext();
  request = new XMLHttpRequest();
  request.open(
    "GET",
    "http://jplayer.org/audio/mp3/RioMez-01-Sleep\_together.mp3",
    true,
  );
  request.responseType = "arraybuffer";

  request.onload = () => {
    context.decodeAudioData(request.response, (buffer) => {
      source = context.createBufferSource();
      source.buffer = buffer;
      source.connect(context.destination);
      // autoplay
      source.start(0); // start was previously noteOn
    });
  };

  request.send();
} catch (e) {
  alert("web audio api not supported");
}
```

この例では、 XHR 経由で MP3 ファイルを取得し、それをソースに読み込んで再生しています（自分で試してみてください）。ウェブオーディオ API の基本的なことについては、ウェブオーディオ API の使用を参照してください。

getUserMedia / ストリーム API
------------------------

また、`getUserMedia` とストリーム API を使用して、ウェブカメラやマイクからライブストリームを取得することも可能です。これは WebRTC (Web Real-Time Communications) として知られる幅広い技術の一部であり、Chrome、Firefox、Opera の最新バージョンと互換性があります。

ウェブカメラからストリームを取得するには、まず `<video>` 要素を設定します。

```html
<video id="webcam" width="480" height="360"></video>
```

次に、対応している場合は、ウェブカメラのソースを動画要素に接続します。

```js
if (navigator.mediaDevices) {
  navigator.mediaDevices
    .getUserMedia({ video: true, audio: false })
    .then(function onSuccess(stream) {
      const video = document.getElementById("webcam");
      video.autoplay = true;
      video.srcObject = stream;
    })
    .catch(function onError() {
      alert(
        "There has been a problem retrieving the streams - are you running on file:/// or did you disallow access?",
      );
    });
} else {
  alert("getUserMedia is not supported in this browser.");
}
```

詳しくは、 `MediaDevices.getUserMedia` のページを参照してください。

メディアストリームの収録
------------

ブラウザーが `getUserMedia` を使用してマイクやカメラからメディアを取得し、新しいメディアレコーダー API を使用して即座に記録できるようにするための新しい標準が展開されています。 `getUserMedia` から受け取ったストリームを `MediaRecorder` オブジェクトに渡して、結果の出力を受け取り、音声や動画のソースに渡します。

主な仕組みは下記の通りです。

```js
navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then(function onSuccess(stream) {
    const recorder = new MediaRecorder(stream);

    const data = [];
    recorder.ondataavailable = (e) => {
      data.push(e.data);
    };
    recorder.start();
    recorder.onerror = (e) => {
      throw e.error || new Error(e.name); // e.name is FF non-spec
    };
    recorder.onstop = (e) => {
      const audio = document.createElement("audio");
      audio.src = window.URL.createObjectURL(new Blob(data));
    };
    setTimeout(() => {
      rec.stop();
    }, 5000);
  })
  .catch(function onError(error) {
    console.log(error.message);
  });
```

詳しくはメディアレコーダー APIを参照してください。

メディアソース拡張 (MSE)
---------------

メディアソース は W3C の作業草案で、`HTMLMediaElement` を拡張して JavaScript が再生用のメディアストリームを生成できるようにすることを計画しています。JavaScript でストリームを生成できるようにすることで、アダプティブストリーミングや時刻をずらしたライブストリームなど、様々な使用用途が容易になります。

### 暗号化メディア拡張 (EME)

暗号化メディア拡張は W3C による提案で、 `HTMLMediaElement` を拡張し、保護されたコンテンツの再生を制御するための API を提供するものです。

この API は、単純なクリアキーの復号から、（適切なユーザーエージェントが実装されたために）高価値の動画まで、使用用途に対応しています。ライセンスとキーの交換はアプリケーションによって制御されるため、さまざまなコンテンツの復号化および保護技術に対応した堅牢な再生アプリケーションを開発することが容易になります。

EME の主な使用方法の一つは、ブラウザーに DRM (Digital Rights Management) を実装することです。 DRM は、ウェブ上のコンテンツ（特に動画）のコピーを防止するために役立ちます。

### アダプティブストリーム

アダプティブストリーミングを促進するために、新しい書式化とプロトコルが展開されています。アダプティブストリーミングメディアとは、ユーザーが利用できる帯域幅に反応して、ストリームの帯域幅と一般的な品質をリアルタイムで変更できることを意味しています。アダプティブストリーミングは、音声や動画のスムーズな配信が最も重要であるライブストリーミングと組み合わせて使用されることが多い。

アダプティブストリーミングに使用される主な形式は、 HLS と MPEG-DASH です。 MSE は DASH を保有することを念頭に置いて設計されています。 MSE は ISOBMFF と M2TS に従ってバイトストリームを定義します（DASH はどちらにも対応しており、 HLS は後者に対応しています）。一般的に言って、標準規格に関心があり、柔軟性を求めている場合、あるいはほとんどの現代のブラウザーに対応したい場合は、DASH を使用した方がよいかもしれません。

**メモ:** 現在、Safari は DASH に対応していませんが、OSX Yosemite でリリースされる予定の新しいバージョンの Safari では dash.js が動作する予定です。

DASH も、メディアファイルの前処理や分割が不要な単純なオンデマンドプロファイルを含む、多くのプロファイルを提供しています。また、メディアを HLS と DASH の両方に変換してくれるクラウドベースのサービスも数多くあります。

詳しい情報は、ウェブ音声と映像のライブストリーミングを参照してください。

メディアプレイヤーのカスタマイズ
----------------

音声と動画のプレイヤーをブラウザー間で一貫した外見にしたいと考えたり、サイトに一致するように微調整したいと思ったりすることがあるかもしれません。これを実現する一般的な方法は、`controls` 属性を省略して既定のブラウザーコントロールを表示しないようにし、HTML と CSS を使用してカスタムコントロールを作成し、JavaScript でコントロールを音声/動画 API にリンクさせることです。

もし何か追加する必要があれば、再生速度、品質ストリームスイッチ、あるいは音声スペクトルなど、既定のプレイヤーには現在存在しない機能を追加することが可能です。たとえば、特定の条件下でプログレス バーを削除することもできます。

クリック、タッチ、およびキーボード イベントを検出し、再生、一時停止、スクラブなどのアクションを発生させることができます。ユーザーの利便性とアクセシビリティのために、キーボード制御を覚えておくことは、多くの場合、重要なことです。

簡単な例です。まず、 HTML で音声とカスタムコントロールを設定します。

```html
<audio
 id="my-audio"
 src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio>
<button id="my-control">play</button>
```

音声を再生・一時停止するイベントを検出する JavaScript を少し追加します。

```js
window.onload = () => {
  const myAudio = document.getElementById("my-audio");
  const myControl = document.getElementById("my-control");

  function switchState() {
    if (myAudio.paused) {
      myAudio.play();
      myControl.textContent = "pause";
    } else {
      myAudio.pause();
      myControl.textContent = "play";
    }
  }

  function checkKey(e) {
    if (e.keycode === 32) {
      // space bar
      switchState();
    }
  }

  myControl.addEventListener(
    "click",
    () => {
      switchState();
    },
    false,
  );

  window.addEventListener("keypress", checkKey, false);
};
```

この例をここで試してみることができます。より詳しい情報は、自分自身でカスタム音声プレイヤーを作成する (en-US)をご覧下さい。

音声/動画のその他の豆知識
-------------

### メディアのダウンロードの中止

メディアの再生を止めるのは要素の `pause()` メソッドを呼び出すだけと簡単ですが、ブラウザーはメディア要素がガベージコレクションによって廃棄されるまで、メディアをダウンロードし続けます。

ここでは、ダウンロードを一度に中止させるトリックを紹介します。

```js
const mediaElement = document.querySelector("#myMediaElementID");
mediaElement.removeAttribute("src");
mediaElement.load();
```

メディア要素の `src` 属性を削除して load() メソッドを呼び出すと、動画に関連付けられたリソースが解放され、ネットワークからのダウンロードが中止されます。 `src` 属性を削除しただけでは load アルゴリズムを呼び出さないため、属性を削除した後に `load()` を呼び出す必要があります。もし `<video>` 要素が `<source>` 要素の子孫も保有している場合は、 `load()` を呼び出す前にそれらも削除する必要があります。

`src` 属性に空文字列を設定するだけでは、実際にはブラウザーが動画のソースを相対パスで設定しているかのように扱うことに注意してください。これにより、ブラウザーは有効な動画である可能性が低いものを、再度ダウンロードしようとします。

### メディアのシーク

メディア要素は、現在の再生位置をメディアのコンテンツにおける特定の位置に移動するためのサポートを提供します。これは、要素の `currentTime` プロパティの値を設定することで行います。要素のプロパティの詳細については、`HTMLMediaElement` を参照してください。この値には、再生を継続させたい時刻を秒単位で設定します。

要素の `seekable` プロパティを使用して、現在シークするために使用できるメディアの範囲を決定することができます。これは、シーク可能な時刻の範囲をリストアップした `TimeRanges` オブジェクトを返します。

```js
const mediaElement = document.querySelector("#mediaElementID");
mediaElement.seekable.start(0); // 開始時刻を返す（秒単位）
mediaElement.seekable.end(0); // 終了時刻を返す（秒単位）
mediaElement.currentTime = 122; // 122 秒目へシーク
mediaElement.played.end(0); // ブラウザーが再生した秒数を返す
```

### 再生範囲の指定

`<audio>` または `<video>` 要素に対してメディアの URI を指定するとき、オプションとして、再生するメディアの部分を指定するための追加情報を記述することができます。これを行うには、ハッシュマーク ("#") に続いてメディアフラグメントの記述を追加します。

時刻の範囲は、構文を使用して指定します。
```

#t=[starttime][,endtime]
```

時刻は、秒数（浮動小数点数）、またはコロンで区切られた時・分・秒数（2 時 5 分 1 秒なら 2:05:01 など）で指定します。

いくつか例を挙げます。

`http://example.com/video.ogv#t=10,20`

動画を 10 秒目から 20 秒目の範囲で再生することを指定します。

`http://example.com/video.ogv#t=,10.5`

動画を先頭から 10.5 秒目まで再生することを指定します。

`http://example.com/video.ogv#t=,02:00:00`

動画を先頭から2時間分を再生することを指定します。

`http://example.com/video.ogv#t=60`

動画の再生を 60 秒目から始めて、動画の終わりまで再生することを指定します。

エラー処理
-----

エラーは、エラーが発生したソースに対応する子要素 `<source>` に配信されます。

これによって、どのソースが読み込まれなかったかを検出することができ、有益な場合があります。次のような HTML を考えてみましょう。

```html
<video>
<source id="mp4\_src"
 src="video.mp4"
 type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</source>
<source id="3gp\_src"
 src="video.3gp"
 type='video/3gpp; codecs="mp4v.20.8, samr"'>
</source>
<source id="ogg\_src"
 src="video.ogv"
 type='video/ogv; codecs="theora, vorbis"'>
</source>
</video>
```

Firefox は特許の関係で一部のプラットフォームでは MP4 と 3GP に対応していないため、 `<source>` 要素で ID が "mp4\_src" と "3gp\_src" のものは、 Ogg リソースを読み込む前にエラーイベントを受信します。ソースは現れた順に読み込まれ、一度読み込みに成功すると、残りのソースはすべて試されません。

### ブラウザーが提供された形式に対応しているかどうかのチェック

以下の検証済みのソースを audo および video 要素内で使用して、対応を調べてください。

* Audio MP3 (`type="audio/mpeg"`): http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3 (MP3 音声をライブで再生)
* Audio MP4 (`type="audio/mp4"`): http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a (MP4 音声をライブで再生)
* Audio Ogg (`type="audio/ogg"`): http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg (OGG 音声をライブで再生)
* Video MP4 (`type="video/mp4"`): http://jPlayer.org/video/m4v/Big\_Buck\_Bunny\_Trailer.m4v (MP4 動画をライブで再生)
* Video WebM (`type="video/webm"`): http://jPlayer.org/video/webm/Big\_Buck\_Bunny\_Trailer.webm (WebM 動画をライブで再生)
* Video Ogg (`type="video/ogg"`): http://jPlayer.org/video/ogv/Big\_Buck\_Bunny\_Trailer.ogv (OGG 動画をライブで再生)

これらが再生されない場合、テストしているブラウザーが指定された形式に対応していないことになります。異なる形式を使用するか、代替手段を使用することを検討してください。

これがうまく動作するのに、提供しているファイルが動作しない場合、 2 つの可能性があります。

#### 1. メディアサーバーが、ファイルと共に正しい MIME 型を配信していない

通常これは対応していますが、メディアサーバーの `.htaccess` ファイルに以下のように追加する必要があるかもしれません。
```

# AddType TYPE/SUBTYPE EXTENSION

AddType audio/mpeg mp3
AddType audio/mp4 m4a
AddType audio/ogg ogg
AddType audio/ogg oga

AddType video/mp4 mp4
AddType video/mp4 m4v
AddType video/ogg ogv
AddType video/webm webm
AddType video/webm webmv
```

#### 2. ファイルが正しくエンコードされていない

ファイルが正しくエンコードされていない可能性があります。以下のツールのいずれかを使用してエンコードしてみてください。これらのツールは、かなり有益であることが証明されています。

* Audacity — 無料音声エディター・レコーダー
* Miro — 無料、オープンソースの音楽・動画プレイヤー
* Handbrake — オープンソースの動画変換
* Firefogg — Firefox 用動画と音声のエンコーディング
* FFmpeg2 — 包括的なコマンドラインエンコーダー
* Libav — 包括的なコマンドラインエンコーダー
* Vid.ly — 動画再生、変換、配信
* Internet Archive — 無料の変換とストレージ
### 読み込めたソースがない場合の検出

すべての子要素　`<source>`　の読み込みに失敗したことを検出するには、メディア要素の `networkState` 属性の値を調べてください。これが `HTMLMediaElement.NETWORK_NO_SOURCE` であれば、すべてのソースの読み込みに失敗したことが分かります。

この時点で別のソースを追加する場合、メディア要素の子として新しい `<source>` 要素を挿入すると、 Gecko は指定したリソースの読み込みを試みます。

### デコードしたソースがない場合、フォールバックコンテンツを表示する機能

現在のブラウザーでどのソースもデコードできなかった場合、動画の代替コンテンツを示すもう 1 つの方法は、最後の source 要素にエラーハンドラーを追加することです。そうすれば、動画を代替コンテンツに置き換えることができます。

```html
<video controls>
  <source src="dynamicsearch.mp4" type="video/mp4"></source>
  <a href="dynamicsearch.mp4">
    <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
  </a>
  <p>Click image to play a video demo of dynamic app search</p>
</video>
```

```js
const v = document.querySelector("video");
const sources = v.querySelectorAll("source");
const lastsource = sources[sources.length - 1];
lastsource.addEventListener(
  "error",
  (ev) => {
    const d = document.createElement("div");
    d.innerHTML = v.innerHTML;
    v.parentNode.replaceChild(d, v);
  },
  false,
);
```

音声と動画の JavaScript ライブラリー
------------------------

音声と動画の JavaScript ライブラリーは数多く存在します。最も人気のあるライブラリーでは、すべてのブラウザーで一貫したプレイヤーデザインを選ぶことができ、音声と動画をネイティブに対応していないブラウザー用の代替手段を提供します。代替手段は、歴史的には Adobe Flash や Microsoft Silverlight などの今では使われなくなったプラグインを使用して、非対応のブラウザーでメディアプレイヤーを提供してきましたが、これらは現代のコンピューターでは対応しなくなくなりました。他にも、字幕のための `<track>` 要素のような機能も、メディアライブラリーを通して提供することができます。

### 音声のみ

* SoundManager
* AmplitudeJS
* HowlerJS
### 動画のみ

* flowplayer: 無料版には flowplayer ロゴのウォーターマークが入ります。オープンソース（GPL ライセンス）。
* JWPlayer: ダウンロードするには登録が必要です。オープンソース版（クリエイティブ・コモンズ・ライセンス）。
* SublimeVideo: 登録が必要です。 CDN でホストされているライブラリーへのドメイン特定のリンクを持つ、形式という形で集合します。
* Video.js: 無償かつオープンソース（Apache 2 ライセンス）。
### 音声と動画

* jPlayer: 無償かつオープンソース（MIT ライセンス）。
* mediaelement.js: 無償かつオープンソース（Apache 2 ライセンス）。
### ウェブオーディオ API

* AudioContext monkeypatch: 古いバージョンのウェブオーディオ API のためのポリフィル。オープンソース (Apache 2 ライセンス)。
基本的なチュートリアル
-----------

クロスブラウザー対応の動画プレイヤーの作成 (en-US)

`<video>` 要素を使用した、基本的なクロスブラウザー対応の動画プレーヤーを作成するためのガイドです。

動画プレイヤーのスタイル付けの基本 (en-US)

前回の記事でクロスブラウザーに対応した動画プレイヤーを作成したため、この記事では、プレイヤーに基本的なレスポンシブスタイルを提供することについて見ていきます。

クロスブラウザー対応のオーディオの基本 (en-US)

この記事では、クロスブラウザーで動作する HTML 音声プレーヤーの作成に関する基本的なガイドと、関連するすべての属性、プロパティ、イベントの説明、およびメディア API を使用して作成するカスタム コントロールのクイック ガイドを提供します。

メディアのバッファリング、シーク、再生範囲 (en-US)

時には、`<audio>` や `<video>` がどれだけダウンロードされたか、あるいは遅延なく再生できるかを知ることは有益なことです。この良い例が、音声や 動画プレイヤーのバッファリング進捗バーです。この記事では、 TimeRanges やメディア API の他の機能を使用して、バッファ/シークバーを構築する方法について説明します。

HTML の playbackRate の説明 (en-US)

`playbackRate` プロパティを使うと、ウェブ音声や動画の再生速度や割合を変更することができます。この記事では、その詳細について説明します。

ウェブオーディオ API の使用

ウェブオーディオ API を使用して、音声ソースを取得、操作、再生するための基本的な方法を説明します。

ストリーミングメディアのチュートリアル
-------------------

ウェブの音声や映像のライブストリーミング

ライブストリーミング技術は、スポーツやコンサートなどのライブイベントを中継するために多く採用されており、一般的にはテレビやラジオの番組がライブで出力されています。しばしば単にストリーミングと略され、ライブストリーミングは、コンピュータや機器にメディアを "ライブ "で送信するプロセスです。これは、変数が多く、かなり複雑で新しい主題であるので、この記事では、この主題に紹介し、どのように始めるかが分かるようにします。

アダプティブストリーミングメディアソースの設定

例えば、サーバー上にアダプティブストリーミングメディアソースを設定し、 HTML のメディア要素の中で利用したいとします。どのようにそれを行うのでしょうか？この記事では、最も一般的な 2 つの形式を見て、その方法を説明します。 MPEG-DASH と HLS (HTTP Live Streaming) です。

HTML 5 動画の DASH アダプティブストリーミング

DASH と WebM を使用したアダプティブストリーミングを設定する方法について詳しく説明します。

高度なチュートリアル
----------

HTML 動画へのキャプションや字幕の追加

この記事では、 Web\_Video\_Text\_Tracks\_Format と `<track>` 要素を使って、 HTML でキャプションと字幕を追加する方法について説明します。

あらゆるブラウザーで動作するウェブオーディオ API コードの作成 (en-US)

クロスブラウザー対応のウェブオーディオ API コードを書くためのガイドです。

メディアレコーダー API で音声を簡単に取り込む

メディアレコーダー API を使用して、メディアストリームを直接収録する基本的な方法について説明します。

**メモ:** Firefox OS バージョン 1.3 以降では、ストリーミング動画配信のための RTSP プロトコルに対応しています。古いバージョンのための代替手段は、代替コンテンツを提供するために Gecko に適した形式 (WebM など) とともに `<video>` を使用することでしょう。これに関するより多くの情報は、随時公開される予定です。

関連情報
----

* video 要素
* HTMLVideoElement API
* MediaSource API
* ウェブオーディオ API
* メディアレコーダー API
* getUserMedia
* イベントリファレンス > メディア


HTML 5 ビデオ用の DASH アダプティブストリーミング - ウェブメディア技術

HTML 5 ビデオ用の DASH アダプティブストリーミング
===============================

Dynamic Adaptive Streaming over HTTP (DASH) は、アダプティブストリーミングプロトコルです。これは動画の再生を維持するためにネットワークパフォーマンスに応じてビデオストリームのビットレートを切り替えることを可能にします。

ブラウザーの対応
--------

Firefox 21 は HTML5 WebM のための DASH の実装を含んでいますが、既定では無効になっています。これは "about:config" の "media.dash.enabled" 設定によって有効にすることができます。

Firefox 23 では HTML5 WebM のための DASH は削除されました。これは Media Source Extensions API の実装で置き換えられました。これは dash.js のような JavaScript ライブラリによる DASH のサポートを可能にするものです。詳しくはバグ 778617 を見てください。

DASH の使い方 - サーバーサイド
-------------------

まず、 WebM ビデオをさまざまなビットレートのビデオファイルとともに DASH マニフェストに変換する必要があります。 まず、 ffmpeg.org の ffpmeg プログラム、 libvpx と libvorbis の WebM ビデオとオーディオ、少なくともバージョン 2.5 (おそらく、これは 3.2.5 でテスト済みです) を必要とします。

### 1. すでに存在する WebM ファイルを使って一つの音声と複数の動画ファイルを作成する

たとえば:

***in.video*** というファイルが ffmpeg でデコード可能な一つ以上の音声と一つ以上の動画ストリームを含むなんらかのコンテナーであるとすると、

音声はこのように作ります:
```

ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm
```

それぞれのビデオはこのように作ります。
```

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \
-an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm
```

もしくは全てを一つのコマンドで一度に行います。
```

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \
-g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \
-an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \
-an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \
-an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \
-an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm
```

### 2. マニフェストファイルを作成する
```

ffmpeg \
  -f webm_dash_manifest -i video_160x90_250k.webm \
  -f webm_dash_manifest -i video_320x180_500k.webm \
  -f webm_dash_manifest -i video_640x360_750k.webm \
  -f webm_dash_manifest -i video_1280x720_1500k.webm \
  -f webm_dash_manifest -i my_audio.webm \
  -c copy \
  -map 0 -map 1 -map 2 -map 3 -map 4 \
  -f webm_dash_manifest \
  -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \
  my_video_manifest.mpd
```

-map 引数は、指定された順序で入力ファイルに対応します。 ファイルごとに 1 つずつ作成する必要があります。 -adaptation\_sets 引数は、それらをアダプテーションセットに割り当てます。 たとえば、ストリーム 0,1,2 および 3（ビデオ）を含む 1 つのセット（0）、およびストリーム 4（オーディオストリーム）のみを含む別のセット（1）が作成されます。

マニフェストと関連する動画ファイルをウェブサーバーや CDN に置いてください。 DASH は HTTP 上で動作するので、 HTTP サーバーがバイトレンジリクエストをサポートしていて .mpd ファイルが mimetype="application/dash+xml" で配信するように設定されていれば、これで全て完了です。

DASH の使い方 - クライアントサイド
---------------------

ビデオファイルの代わりに DASH マニフェストを参照するようにウェブページを修正します:

```html
<video>
  <source src="movie.mpd" />
  <source src="movie.webm" />
  Your browser does not support the video tag.
</video>
```

これだけです！ブラウザーで DASH がサポートされていれば、動画はアダプティブストリーミングで再生されます。

リンク
---

WebM DASH Specification at The WebM Project

DASH Industry Forum

WebM project description of how to create DASH files with FFMPEG


HTML での画像の使用 - ウェブメディア技術

HTML での画像の使用
============

HTML の `<img>` 要素で HTML 文書に画像を埋め込むことができ、 `<picture>` 要素を使用するとレスポンシブ画像を使用することができます。このガイドでは、ウェブサイトへの画像の追加を扱うリソースへのリンクを紹介します。

リファレンス
------

これらの記事では、ウェブ上での画像の表示方法を制御するために使用される HTML 要素と CSS プロパティのいくつかを取り上げています。

### HTML

`<img>`

**HTML の `<img>` 要素**は、ウェブページに画像を埋め込むために使用されます。画像の振る舞いを制御する幅広い属性に対応しており、画像を見られない人のために `alt` テキストのような重要な情報を追加することができます。

`<picture>`

**HTML の `<picture>` 要素**は、 0 個以上の `<source>` 要素と 1 個の `<img>` 要素を含み、様々な画面や端末のシナリオのために画像の別な版を提供します。ブラウザーは、子要素であるそれぞれの `<source>` 要素を考慮して、それらの中から最適なものを選択します。

### CSS

`object-fit`

**`object-fit`** は CSS のプロパティで、置換要素、例えば `<img>` や `<video>` の中身をコンテナーに合わせるために、どのようにリサイズする可を設定します。

`object-position`

**`object-position`** は CSS のプロパティで、要素のボックス内で選択された置換要素内のコンテンツの配置を指定します。ボックス内の領域のうちで置換要素のオブジェクトに覆われていない部分には、要素の背景が表示されます。

`background-image`

**`background-image`** は CSS のプロパティで、 1 つまたは複数の要素の背景画像を設定します。

ガイド
---

これらの記事では、画像の種類を選択して構成するためのガイダンスを提供しています。

画像ファイルの種類と形式ガイド

ウェブブラウザーが一般的に対応ている様々な画像ファイルの種類について、それぞれの使用例、機能、互換性の要素などの詳細を含めて解説しています。さらに、この記事では、与えられた状況に最適な画像ファイルタイプを選択するためのガイダンスを提供します。

メディアのコンテナー要素の width および height 属性をアスペクト比に対応付ける

これにより、ブラウザーが画像を読み込む方法が変更され、アスペクト比がブラウザーによって初期段階で計算され、後で読み込まれる前に画像の表示サイズを修正することができます。

その他のトピック
--------

興味がありそうな関連トピック

HTML の学習: レスポンシブ画像

この記事ではレスポンシブ画像の概念、つまり画面サイズや解像度などが大きく異なる端末でも動作する画像について学び、レスポンシブ画像を実装するために HTML が提供するツールについて見ていきます。


HTML での音声と動画の使用 - ウェブメディア技術

HTML での音声と動画の使用
===============

HTML の `<audio>` および `<video>` 要素により、ウェブページに音声や動画のコンテンツを埋め込むことができます。さらに言えば、その基盤となるインターフェイスは、画面の外でもメディアを全般的に操作し、再生するためのキーとなるものです。このガイドでは、メディア要素を復習し、HTML コンテンツで使用する方法について説明します。

**メモ:** このガイドは、MDNで散在している様々な場所のコンテンツを、1つのまとまった文書やその集合に統合するために計画された更新です。この作業物はまだ予定されていませんが、近いうちに来ることを期待しています。今のところ、お探しの重要な情報の一部は、このトピックに関する学習領域の記事で得ることができます。

音声と動画の操作は始めるにはよいかもしれませんが、現時点ではこれらのオブジェクトを画面外で使用するための具体的なガイドはありません。

関連情報
----

* ウェブメディア技術


画像ファイルの種類と形式ガイド - ウェブメディア技術

画像ファイルの種類と形式ガイド
===============

このガイドでは、ウェブブラウザーが一般的に対応している画像ファイルの種類を取り上げ、サイトの画像に使用するための最も適切な形式を選択するのに役立つ観点を提供します。

一般的な画像ファイルの種類
-------------

ウェブ上で最も一般的に使用されている画像ファイル形式は以下の通りです。

| 略称 | ファイル形式 | MIME タイプ | ファイル拡張子 | 概要 |
| --- | --- | --- | --- | --- |
| APNG | Animated Portable Network Graphics | `image/apng` | `.apng` | 劣化のない一連のアニメーションに最適です（GIF は性能が低い）。 AVIF や WebP はより性能が高いものですが、ブラウザーの対応が狭いのが現状です。**対応:** Chrome, Edge, Firefox, Opera, Safari |
| AVIF | AV1 Image File Format | `image/avif` | `.avif` | 高性能でロイヤリティフリーの画像形式であるため、画像とアニメーションの両方に適しています。 PNG や JPEG よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応しています。 AVIF を使用する場合は、よりブラウザーの対応状況が良い形式への代替を含める（つまり、 `<picture>` 要素を使用する）べきであることに注意してください。**対応:** Chrome, Opera, Firefox（静止画のみ。アニメーション画像は実装。） |
| GIF | Graphics Interchange Format | `image/gif` | `.gif` | 単純な画像やアニメーションに適しています。 PNG の方が劣化なし*かつ*インデックスカラーの静止画に適しており、アニメーションシーケンスには WebP, AVIF, APNG を検討してください。**対応:** Chrome, Edge, Firefox, IE, Opera, Safari |
| JPEG | Joint Photographic Expert Group image | `image/jpeg` | `.jpg`, `.jpeg`, `.jfif`, `.pjpeg`, `.pjp` | 静止画の非可逆圧縮に適しています（現在最も普及しています）。 PNG の方がより正確な画像の再現が必要な場合に適しており、 WebP/AVIF の方がより良い再現性と高い圧縮率の両方が必要な場合に適しています。**対応:** Chrome, Edge, Firefox, IE, Opera, Safari |
| PNG | Portable Network Graphics | `image/png` | `.png` | PNG は元画像をより正確に再現したい場合や、透明度が必要な場合には JPEG より好まれます。 WebP/AVIF はさらに優れた圧縮と再現性を提供しますが、ブラウザーの対応はより限定されています。**対応:** Chrome, Edge, Firefox, IE, Opera, Safari |
| SVG | Scalable Vector Graphics | `image/svg+xml` | `.svg` | ベクター画像形式です。異なる大きさで正確に描画する必要があるユーザーインターフェース要素、アイコン、図などに最適です。**対応:** Chrome, Edge, Firefox, IE, Opera, Safari |
| WebP | Web Picture format | `image/webp` | `.webp` | 画像とアニメーションの両方に最適です。 WebP は PNG や JPEG よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応しています。 AVIF のほうが圧縮機能はわずかに優れていますが、ブラウザーがあまり対応しておらず、プログレッシブレンダリングにも対応していません。**対応:** Chrome, Edge, Firefox, Opera, Safari |

**メモ:** PNG、JPEG、GIF のような古い形式は、WebP や AVIF のような新しい形式と比較して性能が劣りますが、より広範囲の「歴史的な」ブラウザーが対応しています。新しい画像形式は、対応していないブラウザーが無視できるようになってきている（つまり、市場シェアがゼロに近づいてきている）ため、人気が高まってきています。

以下のリストにはウェブ上で見られる画像形式を挙げていますが、ウェブコンテンツでは避けた方が良いものがあります （一般的には、ブラウザーの対応が広くないか、より良い代替手段があるためです）。

| 略称 | ファイル形式 | MIME タイプ | ファイル拡張子 | 説明 |
| --- | --- | --- | --- | --- |
| BMP | ビットマップファイル | `image/bmp` | `.bmp` | Chrome, Edge, Firefox, IE, Opera, Safari |
| ICO | Microsoft Icon | `image/x-icon` | `.ico`, `.cur` | Chrome, Edge, Firefox, IE, Opera, Safari |
| TIFF | Tagged Image File Format | `image/tiff` | `.tif`, `.tiff` | Safari |

**注:** 各画像形式の略語は、形式、その機能、ブラウザーの互換性に関する詳細な情報 (どのバージョンで対応が導入されたか、後に導入された可能性のある特定の特殊機能を含む) についてのより詳しい説明へとリンクしています。

**メモ:** Safari 11.1では、アニメーション GIF の代替として、動画形式を使用する機能が追加されました。
 他のブラウザは対応していません。
 詳しくは、 Chromium のバグ、Firefox のバグを参照してください。

画像ファイルの種類の詳細
------------

以下の節では、ウェブブラウザーで対応している画像ファイルの種類について簡単に説明します。

 以下の表において、**成分あたりのビット数**とは、各色成分を表現するために使用されるビット数を意味します。
 例えば、 RGB の色深度が 8 であれば、赤、緑、青の各成分は 8 ビットの値で表現されることになります。
 一方、**ビット深度**とは、メモリー上で各画素を表現するために使用されるビット数の合計です。

### APNG (Animated Portable Network Graphics)

APNG は Mozilla によって最初に導入されたファイル形式で、 PNG 規格を拡張してアニメーション画像の対応を追加したものです。概念的には何十年も使われているアニメーション GIF 形式に似ていますが、アニメーション GIF が 8 ビットの色深度しか対応していないのに対し、 APNG の方が様々なインデックスカラーに対応しているという点で優れています。

APNG は、進捗インジケーターやアクティビティスロバーなど、他のアクティビティやサウンドトラックに同期する必要のない基本的なアニメーションに最適です。例えば、 APNG は Apple の iMessage アプリ (および iOS のメッセージアプリ) のアニメーションステッカーを作成する際に対応している形式の 1 つです。また、ウェブブラウザーのユーザーインターフェイスのアニメーション部分にもよく使用されています。

|  |  |
| --- | --- |
| MIME タイプ | `image/apng` |
| ファイル拡張子 | `.apng` |
| 仕様書 | wiki.mozilla.org/APNG\_Specification |
| ブラウザーの互換性 | Chrome 59, Edge 12, Firefox 3, Opera 46, Safari 8 |
| 最大の大きさ | 2,147,483,647×2,147,483,647 画素 |
| 対応している色モデル |

| 色モード | 成分あたりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレイスケール | 1, 2, 4, 8, 16 | 各画素は、グレースケール画素の明るさを示す単一の *D* ビット値で構成されています。 |
| トゥルーカラー | 8, 16 | 各画素は、赤、緑、青の色成分のレベルを示す3つの *D* ビット値で表現されます。 |
| インデックスカラー | 1, 2, 4, 8 | 各画素は、 APNG ファイルの `PLTE` チャンク内に含まれるカラーパレットへのインデックスを示す *D* ビット値で、パレット内の色はすべて 8 ビットの深度を使用します。 |
| アルファ付きグレイスケール | 8, 16 | 各画素は、 2 つの *D* ビット値、グレイスケール画素の明るさとアルファサンプル、すなわち画素がどれだけ不透明かで表現されます。 |
| アルファ付きトゥルーカラー | 8, 16 | 各画素は、 4 つの *D* 画素の色成分、赤、緑、青、および画素の不透明度を示すアルファサンプルで構成されます。 |

 |
| 圧縮 | 可逆 |
| ライセンス | Creative Commons Attribution-ShareAlike license (CC-BY-SA) version 3.0 以降の下にフリーかつオープンです。 |

### AVIF 画像

AVIF (AV1 Image File Format) は、 *AV1ビットストリームを HEIF (High Efficiency Image File Format) コンテナー*にエンコードした、強力でオープンソース、ロイヤリティフリーのファイル形式です。

**メモ:** AVIF は、ウェブコンテンツで画像を共有するための「次の大きな流れ」となる可能性を秘めています。
 AVIF は、複雑なライセンスや特許使用料に煩わされることなく、最先端の機能と性能を提供し、他の類似製品を抑えています。

 AV1 は、もともとインターネットでの映像伝送用に設計された符号化方式です。
 この形式は、近年の動画エンコーディングの著しい進歩の恩恵を受けており、関連するハードウェアレンダリングの対応の恩恵を受ける可能性があります。
 しかし、動画と画像のエンコーディングには異なる要件があるため、場合によっては不利になることもあります。

この形式は、次のものを提供します。

* 視覚的に同程度の圧縮レベルであれば、 JPG や PNG と比べて優れた非可逆圧縮が可能です（例: 非可逆 AVIF 画像は JPEG 画像より約 50% 小さい）。
* 一般的に、 AVIF は WebP よりも圧縮率が高く、同じ JPG セットで中央値 50% 対 30% の圧縮率です（出典: AVIF WebP 比較）。 AVIF WebP 比較 (CTRL Blog)).
* 可逆圧縮圧縮。
* アニメーション/複数画像の格納（アニメーション GIF に似ていますが、圧縮率がはるかに優れています）。
* アルファチャンネル（つまり、透明度）の対応。
* *ハイダイナミックレンジ* (HDR): 画像の最も明るい部分と最も暗い部分の間のより大きなコントラストを表現できる画像の保存に対応しています。
* 広い色域: 画像がより広い範囲の色を含むことに対応しています。

 AVIF はプログレッシブレンダリングに対応していないので、ファイルを表示する前に完全にダウンロードする必要があります。
 AVIF ファイルは同等の JPEG や PNG ファイルよりもはるかに小さいため、ダウンロードと表示が迅速に行われ、実際のユーザー操作への影響が極めて小さくなります。
 ファイルサイズが大きい場合は影響が大きくなるため、プログレッシブレンダリングを対応している形式の使用を検討する必要があります。

 AVIF は、デスクトップでは Chrome、Opera、Firefox で対応しています（Firefox は静止画に対応していますが、アニメーションには対応していません）。
 対応はまだ包括的ではなく（歴史もあまりありません）、WebP, JPEG, PNG 形式などで、 `<picture>` 要素 （またはその他の方法） を使用して代替形式を提供する必要があります。

|  |  |
| --- | --- |
| MIME タイプ | `image/avif` |
| ファイルの拡張子 | `.avif` |
| 仕様書 | AV1 Image File Format (AVIF) |
| ブラウザーの互換性 | Chrome 85, Opera 71, Firefox 93
 * Firefox 93 は静止画に対応しており、フルカラーとリミテッドレンジカラーの両方の色空間、ミラーリングと回転のための画像変換に対応しています。
 image.avif.compliance\_strictness の設定を使用して、仕様への準拠の厳密さを調整することができます。
 アニメーション画像には対応していません。
* Firefox 77 ～ 92 は `image.avif.enable` の設定を `true` にする必要があります。それ以前の版は基本的な対応のみです。
 |
| 最大の画像の大きさ | 2,147,483,647×2,147,483,647 画素 |
| 対応しているカラーモード | カラーモードの対応情報は AV1 Bitstream & Decoding Process Specification の 6.4.2 : Color config semantics にあります。
主なものとしては、以下のものがあります。* カラーモード: YUV444, YUV422, YUV420
* グレースケール対応: YUV400
* ビット数: 8/10/12 ビット
* アルファに対応
* ICC プロファイルに対応
* NCLX 対応: sRGB, linear sRGB, linear Rec2020, PQ Rec2020, HLG Rec2020, PQ P3, HLG P3, など
* タイリングに対応
 |
| 圧縮 | 可逆および非可逆 |
| ライセンス | ロイヤリティフリーです。ライセンス情報は http://aomedia.org/license/ にあります。 |

### BMP (ビットマップファイル)

**BMP** (**Bitmap 画像**) ファイル形式は、 Windows コンピューターで最も普及しており、ウェブアプリやコンテンツではふつう、特殊な場合にのみ使用されます。

**警告:** ウェブサイトのコンテンツに BMP ファイルを使用することは、一般的に避けてください。
 一般的な BMP ファイルは、データを非圧縮のラスター画像として表現するため、 png や jpg の画像形式と比較してファイルサイズが大きくなります。
 より効率的な BMP 形式もありますが、あまり普及しておらず、ウェブブラウザーが対応していることもほとんどありません。

 BMP は理論的には様々な内部データ表現に対応しています。
 最も単純でよく使われる形式の BMP ファイルは、非圧縮のラスター画像で、各画素が 3 バイトでその赤、緑、青の成分を表し、各行は 4 バイトの倍数の幅になるよう `0x00` バイトでパディングされています。

 その他のデータ表現も仕様で定義されていますが、広く使われているわけではなく、完全に未実装であることが多いものです。
 これらの機能には、異なるビット深度、インデックス付きカラー、アルファチャンネル、異なる画素オーダー（既定では、 BMP は左上隅から右と下に向かってではなく、左下隅から右と上に向かって書き込まれます）の対応が含まれます。

理論的には複数の圧縮アルゴリズムに対応しており、 BMP ファイル内に JPEG や PNG という形式で画像データを格納することも可能です。

|  |  |
| --- | --- |
| MIME タイプ | `image/bmp` |
| ファイルの拡張子 | `.bmp` |
| 仕様書 | 仕様書はありません。ただし、 Microsoft は docs.microsoft.com/ja/windows/desktop/gdi/bitmap-storage で形式についての一般的なドキュメントを提供しています。 |
| ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべての版 |
| 最大の画像の大きさ | 形式のバージョンによって 32,767×32,767 または 2,147,483,647×2,147,483,647 画素のどちらかです。 |
| カラーモードの対応 |

| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | 1 | それぞれのビットが単一の画素を表し、黒か白かのどちらかになります。 |
| トゥルーカラー | 8, 16 | それぞれの画素は、赤、緑、青の色成分を表す 3 つの値で表現されます。それぞれが *D* ビットです。 |
| インデックスカラー | 2, 4, 8 | それぞれの画素は、 2, 4, 8 ビットのうちの何れかの値で、カラーテーブル内のインデックスとして表現されます。 |
| アルファ付きグレースケール | *なし* | BMP には明確なグレースケールの形式がありません。 |
| アルファ付きトゥルーカラー | 8, 16 | それぞれの画素は、赤、緑、青、アルファの各色成分で表現されます。それぞれが *D* ビットです。 |

 |
| 圧縮 | 非可逆圧縮や可逆圧縮など、複数の圧縮方式に対応しています。 |
| ライセンス | Microsoft Open Specification Promise で扱っています。
 マイクロソフトは BMP に対して特許を保有していますが、特定の条件を満たす限り、特許権を主張しないという約束を発表しています。
 ただし、これはライセンスとは異なります。 BMP は、 Windows Metafile Format (`.wmf`) に含まれます。
  |

### GIF (Graphics Interchange Format)

 1987 年、オンラインサービスプロバイダーである CompuServe は、サービスの全会員が使用できる圧縮グラフィック形式を提供するため、 **GIF** (**Graphics Interchange Format**) 画像ファイル形式を導入しました。
 GIF は Lempel-Ziv-Welch (LZW) アルゴリズムを使用して、 8 ビットのインデックスカラーグラフィックを可逆圧縮します。
 GIF は XBM とともに、 HTML で対応された最初の 2 つのグラフィック形式のうちのひとつでした。

 GIF の各画素は 8 ビットの値で表され、 24 ビット（赤、緑、青それぞれ 8 ビット）のカラーパレットへのインデックスとなります。カラーテーブルの長さは常に 2 のべき乗です（つまり、パレットは 2、4、8、16、32、64、256 の項目があります）。
 255 または 256 色以上を示すには、ふつうディザリングが使用されます。
 カラーパレットを持つ複数の画像ブロックをタイル状に並べてトゥルーカラー画像を作成することは技術的には可能ですが、実際にはほとんど行われません。

画素は不透明です。ただし、特定のカラーインデックスが透明と指定されている場合は、その値で着色された画素は完全に透明になります。

GIF は簡単なアニメーションに対応しています。最初の完全なフレームに続いて、フレームごとに変化する部分を反映した一連の画像を提供します。

 GIF は、そのシンプルさと互換性から、何十年にもわたって非常に人気がありました。
 アニメーションに対応したことで、ソーシャルメディア時代に人気が再燃し、短い「動画」やミームなどの簡単なアニメーションにアニメーション GIF が広く使われるようになりました。

 GIF のもう一つの人気のある機能はインターレースの対応で、画素列を順番通りに保存しないため、部分的に受信したファイルを低画質で表示することができるものです。
 これは、ネットワーク接続が遅い場合に特に有効です。

 GIF は単純な画像やアニメーションに適していますが、フルカラー画像を GIF に変換すると満足のいくディザリングが得られないことがあります。
 通常、新しいコンテンツは可逆圧縮やインデックスカラーの静止画には PNGを、可逆圧縮のアニメーションには APNG を使用することを検討してください。

|  |  |
| --- | --- |
| MIME タイプ | `image/gif` |
| ファイルの拡張子 | `.gif` |
| 仕様書 | GIF87a specificationGIF89a specification |
| ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべてのバージョン |
| 最大の画像の大きさ | 65,536×65,536 画素 |
| カラーモードの対応 |

| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | *なし* | GIF には専用のグレースケール形式がありません。 |
| トゥルーカラー | *なし* | GIF はトゥルーカラーに対応していません。 |
| インデックスカラー | 8 | GIF パレット内のそれぞれの色は、赤、緑、青がそれぞれ 8 ビットで定義されています（全体で画素当たり 24 ビットです）。 |
| アルファ付きグレースケール | *なし* | GIF には専用のグレースケール形式がありません。 |
| アルファ付きトゥルーカラー | *なし* | GIF はトゥルーカラーに対応していません。 |

 |
| 圧縮 | 可逆圧縮 (LZW) |
| ライセンス |
 GIF 形式自体はオープンですが、 LZW 圧縮アルゴリズムは 2000 年代初頭まで特許で保護されていました。
 2004 年 7 月 7 日現在、関連する特許はすべて失効しており、 GIF 形式は自由に使用することができます。
  |

### ICO (Microsoft Windows icon)

 ICO (Microsoft Windows icon) ファイル形式は、 Windows システムのデスクトップアイコン用に Microsoft が設計しました。
 しかし、 Internet Explorer の初期バージョンでは、ウェブサイトのルートディレクトリーに `favicon.ico` という ICO ファイルを用意して、**ファビコン** - お気に入りメニューやサイトのアイコン表現が役立つその他の場所に表示するアイコンを指定することができます。

 ICO ファイルには、複数のアイコンを含むことができ、それぞれの詳細が記載されたディレクトリーから始まります。
 ディレクトリーの後に、アイコンのデータが続きます。
 各アイコンのデータは、ファイルヘッダーを含まない BMP 画像か、ファイルヘッダーを含む完全な PNG 画像のどちらかを使用することができます。
 ICO ファイル内で PNG を使用する方法は Windows Vista までは対応しておらず、対応が十分でない可能性があるため、 ICO ファイルを使用する場合は、 BMP 形式を使用することをお勧めします。

**警告:** ICO ファイルは、ウェブコンテンツに使用すべきではありません。
 また、ファビコンでの利用は 異なる利用場面のアイコンの提供 で述べたように、 PNG ファイルと `<link>` 要素を使用することで抑制されています。

|  |  |
| --- | --- |
| MIME タイプ | `image/vnd.microsoft.icon` (公式),
 `image/x-icon` (Microsoft が使用)
  |
| ファイルの拡張子 | `.ico` |
| 仕様書 |  |
| ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべてのバージョン |
| 最大の画像の大きさ | 256×256 画素 |
| カラーモードの対応 |

BMP 形式のアイコン| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | 1 | 各ビットは 1 画素を表し、黒か白のどちらかになります。 |
| トゥルーカラー | 8, 16 | 各画素は、赤、緑、青の色成分を表す 3 つの値で表され、それぞれ *D* ビットです。 |
| インデックスカラー | 2, 4, 8 | 各画素は 2、4、8 ビットの値で表され、カラーテーブルのインデックスとなる。 |
| アルファ付きグレースケール | *なし* | BMP には明確なグレースケールの形式がありません。 |
| アルファ付きトゥルーカラー | 8, 16 | 各画素は、赤、緑、青、アルファの色成分を表す 4 つの値で表され、それぞれ *D* ビットである。 |

PNG 形式のアイコン| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | 1, 2, 4, 8, and 16 | 各画素は、グレースケールの画素の明るさを示す 1 つの *D* ビット値で構成されます。 |
| トゥルーカラー | 8, 16 | 各画素は、赤、緑、青の色成分のレベルを示す 3 つの *D* ビット値で表現されます。 |
| インデックスカラー | 1, 2, 4, 8 | 各画素は *D* ビットの値で、 APNG ファイルの `PLTE` チャンク内のカラーパレットの中にあるインデックスを示します。パレット内のカラーはすべて 8 ビットの深度を使用します。 |
| アルファ付きグレースケール | 8, 16 | 各画素は 2 つの *D* ビット値で表します。グレースケール画素の明るさと、その画素がどの程度不透明であるかを示すアルファサンプルです。 |
| アルファ付きトゥルーカラー | 8, 16 | 各画素は、赤、緑、青の 4 つの *D* 画素の色成分と、画素の不透明度を示すアルファサンプルで構成されています。 |

 |
| 圧縮 |
 BMP 形式のアイコンは、ほぼ常に可逆圧縮が使用されますが、非可逆圧縮の方法も利用できます。
 PNG 形式のアイコンは常に可逆圧縮されます。
  |
| ライセンス | — |

### JPEG (Joint Photographic Experts Group image)

JPEG （ふつう "**ジェイペグ**" と発音します）画像形式は、現在もっとも広く使用されている静止画向けの非可逆圧縮形式です。
 特に写真に有効です。図や表など鮮明さが必要なコンテンツに非可逆圧縮を適用すると、満足の行く結果が得られないことがあります。

 JPEG はファイル形式というより、写真を圧縮するためのデータ形式です。
 JFIF (**J**PEG **F**ile **I**nterchange **F**ormat) 仕様書が、私たちが "JPEG" 画像と考えているファイル形式を記述しています。

|  |  |
| --- | --- |
| MIME タイプ | `image/jpeg` |
| ファイルの拡張子 | `.jpg`, `.jpeg`, `.jpe`,
 `.jif`, `.jfif` |
| 仕様書 | jpeg.org/jpeg/ |
| ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべてのバージョン |
| 最大の画像の大きさ | 65,535×65,535 画素 |
| カラーモードの対応 |

| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | *なし* | ルーマ 1 チャンネル (Y) で真のグレイスケールに対応可能です。 |
| トゥルーカラー | 8 | 各画素は、赤、青、緑の色成分で記述され、それぞれ 8 ビットです。 |
| インデックスカラー | *なし* | JPEG はインデックスカラーモードを提供していません。 |
| アルファ付きグレースケール | *なし* | JPEG はアルファチャネルに対応していません。 |
| アルファ付きトゥルーカラー | *なし* | JPEG はアルファチャネルに対応していません。 |

 |
| 圧縮 | 非可逆圧縮です。離散コサイン変換に基づいています。 |
| ライセンス | 2006 年 10 月 27 日現在、米国における特許はすべて失効しています。 |

### PNG (Portable Network Graphics)

PNG （"**ピング**"と読みます）画像形式は、 より効率的な圧縮を行うために可逆圧縮または非可逆圧縮を使用し、GIFより高い色深度を対応し、アルファ透過も完全に対応します。

 PNG は広く対応されており、すべての主要なブラウザーがその機能を完全に対応しています。
 Internet Explorer はバージョン 4〜5 で PNG 対応を導入しましたが、 IE9 まで完全には対応せず、長年にわたって、かつて存在した Internet Explorer 6 を含め、数多くの悪名高いバグがありました。
 そのため PNG の普及は遅れましたが、現在では特に元画像の正確な再現が必要な場合によく使われるようになっています。

|  |  |
| --- | --- |
| MIME タイプ | `image/png` |
| ファイルの拡張子 | `.png` |
| 仕様書 | w3.org/TR/PNG |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| 基本対応 | 1 | 12 | 1 | 5 | 3.5.1 (Presto)15 (Blink) | 1 |
| アルファチャネル | 1 | 12 | 1 | 5 | 6 (Presto)All (Blink) | 1 |
| ガンマコレクション | no | yes | 1 | 8 | 1 | broken |
| カラーコレクション | no | yes | 3 | 9 | no | no |
| インターレス | no | ? | 1 | broken | 3.5.1 | no |

 |
| 最大の画像の大きさ | 2,147,483,647×2,147,483,647 画素 |
| カラーモードの対応 |

| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | 1, 2, 4, 8, 16 | 各画素は、グレースケールの画素の明るさを示す 1 つの *D* ビット値で構成されます。 |
| トゥルーカラー | 8, 16 | 各画素は、赤、緑、青の色成分のレベルを示す 3 つの *D* ビット値で表現されます。 |
| インデックスカラー | 1, 2, 4, 8 | 各画素は *D* ビットの値で、 APNG ファイルの `PLTE` チャンク内のカラーパレットの中にあるインデックスを示します。パレット内のカラーはすべて 8 ビットの深度を使用します。 |
| アルファ付きグレースケール | 8, 16 | 各画素は 2 つの *D* ビット値で表します。グレースケール画素の明るさと、その画素がどの程度不透明であるかを示すアルファサンプルです。 |
| アルファ付きトゥルーカラー | 8, 16 | 各画素は、赤、緑、青の 4 つの *D* 画素の色成分と、画素の不透明度を示すアルファサンプルで構成されています。 |

 |
| 圧縮 | 可逆圧縮で、任意で GIF のようなインデックスカラーがあります。 |
| ライセンス |
 ©2003 W3C (MIT, ERCIM,
 Keio), All Rights Reserved. W3C
 liability,
 trademark, document use
 and
 software licensing rules apply. No known royalty-bearing patents.
  |

### SVG (Scalable Vector Graphics)

 SVG は XML ベースのベクターグラフィック形式で、画像の内容を、図形や線の作成、色やフィルターの適用などの描画コマンド群として指定するものです。
 SVG ファイルは、図やアイコンなど、任意の大きさで正確に描画できる画像に適しています。
 そのため、最近のウェブデザインでは、ユーザーインターフェイスの素材としてよく使われています。

 SVG ファイルはテキストファイルで、解釈されると希望する画像が描画されるソースコードを含んでいます。
 例えば、この例では、初期サイズ 100 × 100 の描画領域を定義し、その中に斜めに引いた線が含まれています。

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>
```

SVG はウェブコンテンツで 2 通りの使い方ができます。

1. `<svg>` 要素を HTML に直接書き、その中に SVG 要素を入れて画像を描く。
2. 他のいずれかの画像種別で使用することができるあらゆる場所で表示する。 `<img>` や `<picture>` 要素、 CSS の `background-image` プロパティなどです。

 SVG は、一連の描画コマンドで表現できる画像に最適です。特に、画像が描画されるサイズが不明であったり、変動する可能性がある場合、 SVG は希望するサイズに滑らかに拡大縮小するので、最適な選択と言えます。
 ビットマップ画像や写真画像には適していませんが、 SVG の中にビットマップ画像を含めることは可能です。

|  |  |
| --- | --- |
| MIME タイプ | `image/svg+xml` |
| ファイルの拡張子 | `.svg` |
| 仕様書 | w3.org/TR/SVG2 |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| SVG 対応 | 4 | 12 | 3 | 9 | 10 (Presto)15 (Blink) | 3.2 |
| SVG を画像として使用 (`<img>` など) | 28 | 12 | 4 | 9 | 10 (Presto)15 (Blink) | 9 |

 |
| 最大の画像の大きさ | 無制限 |
| カラーモードの対応 | SVG 内の色は、 CSS 色構文を使用して指定されます。 |
| 圧縮 | SVG ソースは転送中に HTTP 圧縮技術を使用したり、ディスク上で `.svgz` ファイルを使用したりすることで圧縮できます。 |
| ライセンス |
 ©2018 W3C (MIT, ERCIM,
 Keio,
 Beihang), All Rights Reserved. W3C
 liability,
 trademark,
 document use
 and
 software licensing
 rules apply. No known royalty-bearing patents.
  |

### TIFF (Tagged Image File Format)

TIFF はスキャンした写真を格納するために作成されたラスターファイル形式ですが、あらゆる種類の画像に使用することができます。
 これらはある意味で「重い」形式であり、 TIFF のファイルは他の画像形式よりも大きくなる傾向があります。
 これは、多くの場合メタデータが含まれていることと、ほとんどの TIFF 画像が非圧縮か、圧縮後のファイルがかなり大きくなってしまう圧縮アルゴリズムを使用しているためです。

TIFF は様々な圧縮方式に対応していますが、最も一般的に使用されているのは、 FAX ソフトウェアで使用されている CCITT グループ 4 （古い FAX システムではグループ 3）の圧縮方式と、 LZW および非可逆 JPEG の圧縮方式です。

 TIFF ファイルのそれぞれの値は、**タグ**（画像の幅など情報の種類を示す）と**型**（データの格納形式を示す）で指定し、そのタグに割り当てる値の配列の長さを続けます（単一の値でも、すべてのプロパティは配列で格納されます）。
 これにより、同じプロパティに異なるデータ型を使用することができます。
 たとえば、画像の幅である `ImageWidth` は、タグ `0x0100` を用いて格納され、 1 項目の配列となります。
 タイプ 3 (`SHORT`) を指定すると、 `ImageWidth` の値は 16 ビットで格納されます。

| タグ | 型 | サイズ | 値 |
| --- | --- | --- | --- |
| `0x0100` (`ImageWidth`) | `0x0003` (`SHORT`) | `0x00000001` (1 項目) | `0x0280` (640 画素) |

タイプ 4 (`LONG`) では、幅を 32 ビット値で格納します。

| タグ | 型 | サイズ | 値 |
| --- | --- | --- | --- |
| `0x0100` (`ImageWidth`) | `0x0004` (`LONG`) | `0x00000001` (1 項目) | `0x00000280` (640 画素) |

 1 つの TIFF ファイルに複数の画像を含めることができます。これは、例えば複数ページの文書（複数ページのスキャン文書や受信した FAX など）を表現するために使用される場合があります。
 ただし、 TIFF ファイルを読み込むソフトウェアは、最初の画像にのみ対応する必要があります。

 TIFF は、 RGB だけでなく、さまざまな色空間に対応しています。
 CMYK や YCbCr などがあり、印刷物や映画、テレビなどのメディア向けの画像を保存するのに適しています。

 一昔前までは、ウェブコンテンツの中で TIFF 画像に対応しているブラウザーもありましたが、現在では特別なライブラリーやブラウザーのアドオンを使用する必要があります。
 しかし、精密な編集や印刷を目的とした写真やアートワークを配布する場合、ダウンロード可能な TIFF ファイルを提供することが一般的です。

|  |  |
| --- | --- |
| MIME タイプ | `image/tiff` |
| ファイルの拡張子 | `.tif`, `.tiff` |
| 仕様書 | adobe.io/open/standards/TIFF.html |
| ブラウザーの互換性 | TIFF の対応はどのブラウザーにも組み込まれておらず、ダウンロード形式としての価値しかありません。 |
| 最大の画像の大きさ | 4,294,967,295×4,294,967,295 画素 (理論値) |
| カラーモードの対応 |

| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| バイレベル | 1 |
 バイレベル TIFF はそれぞれのバイトが 8 ビットとなり、 1 画素あたり 1 ビットです。
 `PhotometricInterpretation` フィールドで 0 と 1 のどちらが黒で、どちらが白かを指定します。
  |
| グレースケール | 4 および 8 | 各画素は、グレースケール画素の明るさを示す 1 つの *D* ビット値で構成されています。 |
| トゥルーカラー | 8 | RGB のトゥルーカラー画像は、赤、緑、青をそれぞれ 8 ビットずつ使って保存されます。 |
| インデックスカラー | 4 および 8 | 各画素は `ColorMap` レコードのインデックスであり、画像に使用される色を定義します。カラーマップは、赤の値すべて、緑の値すべて、青の値すべての順に並びます（`rgb, rgb, rgb...` ではなく）。 |
| アルファ付きグレースケール | 4 および 8 | アルファ情報は、 `SamplesPerPixel` フィールドで 1 画素あたり 3 サンプル以上あることを指定し、アルファの種類（1 なら関連付けられた、あらかじめ乗算されたアルファ成分、 2 なら関連付けられないアルファ（別のマット））を示すことで追加されます。しかし、アルファチャンネルは TIFF ファイルではほとんど使われず、ユーザーのソフトウェアによって対応されていない可能性があります。 |
| アルファ付きトゥルーカラー | 8 | アルファ情報は、 `SamplesPerPixel` フィールドで 1 画素あたり 3 サンプル以上あることを指定し、アルファの種類（1 なら関連付けられた、あらかじめ乗算されたアルファ成分、 2 なら関連付けられないアルファ（別のマット））を示すことで追加されます。しかし、アルファチャンネルは TIFF ファイルではほとんど使われておらず、ユーザーのソフトウェアによっては対応していない可能性があります。 |

 |
| 圧縮 | ほとんどの TIFF ファイルは非圧縮ですが、可逆圧縮の PackBits と LZW 圧縮、非可逆圧縮の JPEG 圧縮に対応しています。 |
| ライセンス | ライセンスは不要（ただし、使用するライブラリーに関連するものは除く）。既知の特許はすべて失効しています。 |

### WebP 画像

 WebP は、VP8 動画コーデックに基づく予測符号化による非可逆圧縮と、反復データの置換を使用した可逆圧縮に対応しています。
 非可逆圧縮の WebP 画像は、視覚的に同程度の圧縮レベルの JPEG 画像よりも平均 25 ～ 35% 縮小されます。
 可逆圧縮の WebP 画像は、 PNG 形式の同じ画像と比較して、通常 26% 縮小されます。

 WebP はアニメーションにも対応しています。非可逆圧縮の WebP ファイルでは、画像データは VP8 ビットストリームで表現され、複数のフレームを含むことができます。
 可逆圧縮の WebP はアニメーションを記述した `ANIM` チャンクと、アニメーションシーケンスのフレームを表す `ANMF` チャンクを保持します。
 ループはサポートされています。

 WebP は現在、主要なウェブブラウザーの最新バージョンが幅広く対応していますが、歴史的に深く対応してはいません。
 JPEG または PNG 形式の代替画像を、 `<picture>` 要素などで提供してください。

|  |  |
| --- | --- |
| MIME タイプ | `image/webp` |
| ファイルの拡張子 | `.webp` |
| 仕様書 |
RIFF Container SpecificationRFC 6386: VP8 Data Format and Decoding Guide
 (可逆圧縮)WebP Lossless Bitstream Specification
 |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| 非可逆 WebP の対応 | 17 | 18 | 65 | なし | 11.10 (Presto)15 (Blink) | 14 |
| 可逆 WebP | 2325 on Android | 18 | 65 | なし | 12.10 (Presto)15 (Blink) | 14 |
| アニメーション | 32 | 18 | 65 | なし | 19 (Blink) | 14 |

WebP は Firefox 96 および Chrome 50 以降で、画像の*エクスポート*に使用することもできます（対応バージョンの詳細情報は `HTMLCanvasElement.toBlob()` を参照してください）。 |
| 最大の画像の大きさ | 16,383×16,383 画素 |
| カラーモードの対応 |
 非可逆の WebP は、画像を 8 ビット Y'CbCr 4:2:0 (YUV420) 形式で格納します。
 可逆の WebP は 8 ビット ARGB カラーで、それぞれの成分が 8 ビットであり、合計で画素あたり 32 ビットです。
  |
| 圧縮 | 可逆（ハフマン、LZ77、カラーキャッシュコード）または非可逆（VP8） |
| ライセンス | ライセンスは不要で、ソースコードも公開されています。 |

**メモ:** Safari 14、すなわちバージョン 14.0 は WebP の対応がアナウンスされているにもかかわらず、 .webp 画像は macOS デスクトップではネイティブで表示されません。一方、 Safari の iOS 14 版では .webp 画像が正しく表示されます。

### XBM (X Window System Bitmap file)

 XBM (X Bitmap) ファイルは、ウェブで最初に対応されましたが、もはや使用されておらず、その形式には潜在的なセキュリティ上の懸念があるため、避けるべきです。
 最近のブラウザーは何年も前から XBM ファイルに対応していませんが、古いコンテンツを扱っていると、まだ残っているものが見つかるかもしれません。

 XBM は画像の内容をバイトの配列として表現するために C 言語のコードの断片を使用します。
 各画像は 2 つから 4 つの `#define` ディレクティブからなり、ビットマップの幅と高さを（画像がカーソルとして設計されている場合は、オプションでホットスポットも）与え、その後に `unsigned char` の配列が続き、それぞれの値は 8 個の 1 ビットモノクロ画素から構成されます。

 画像は幅 8 画素の倍数でなければなりません。
 例えば、次のコードは 8 画素× 8 画素の XBM 画像を、それらの画素が白黒の市松模様になるように表現しています。

```cpp
#define square8\_width 8
#define square8\_height 8
static unsigned char square8_bits[] = {
  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
};
```

|  |  |
| --- | --- |
| MIME タイプ | `image/xbm`, `image-xbitmap` |
| ファイルの拡張子 | `.xbm` |
| 仕様書 | なし |
| ブラウザーの互換性 | Firefox 1–3.5, Internet Explorer 1–5 |
| 最大の画像の大きさ | 無制限 |
| カラーモードの対応 |

| カラーモード | コンポーネント当たりのビット数 | 説明 |
| --- | --- | --- |
| グレースケール | 1 | 各バイトには 1 ビットの画素が 8 つ含まれています。 |
| トゥルーカラー | *なし* | *なし* |
| インデックスカラー | *なし* | *なし* |
| アルファ付きグレースケール | *なし* | *なし* |
| アルファ付きトゥルーカラー | *なし* | *なし* |

 |
| 圧縮 | Lossless |
| ライセンス | オープンソース |

画像形式の選択
-------

画像形式は、動画形式と比較して、対応が幅広いものの選択肢が少なく、また、それぞれ特定の用途を持つ傾向があるため、ニーズに合わせて最適なものを選択することが容易と思われます。

### 写真

 写真は一般的に非可逆圧縮でうまくいきます（エンコーダの設定に依存します）。
 このため、写真には JPEG と WebP が適しています。 JPEG は互換性がより高いのですが、 WebP はおそらく圧縮率がより優れています。
 品質を最大化し、ダウンロード時間を最小化するには、代替画像を使用して WebP を第一候補に、 JPEG を第二候補にして両方を提供することを検討してください。
 それ以外の場合は、互換性のために JPEG を選択するのが無難です。

| 第一候補 | 代替用 |
| --- | --- |
| WebP または JPEG | JPEG |

### アイコン

 アイコンのような小さい画像では、サイズに制約のある画像で細部が失われないように、可逆圧縮形式を使用します。
 可逆圧縮の WebP はこの目的に最適ですが、対応がまだ進んでいないため、代替画像を提供しない限り、 PNG がより良い選択となります。
 画像に含まれる色が256色より少ない場合は、GIFも選択肢に入りますが、PNGはインデックス圧縮オプション（PNG-8）でさらに小さく圧縮されることがよくあります。

 アイコンがベクターグラフィックで表現できる場合は、 SVG を検討してください。
 SVG の対応状況は良いのですが、古いブラウザーのために PNG の代替を提供する価値があるかもしれません。

| 第一候補 | 代替用 |
| --- | --- |
| SVG, 可逆 WebP, PNG | PNG |

### スクリーンショット

 品質を妥協しない限り、スクリーンショットには可逆圧縮形式を使用することをお勧めします。
 これは、スクリーンショットにテキストが含まれる場合に特に重要です。テキストは非可逆圧縮ではぼやけたり不鮮明になったりしやすいからです。

PNG はおそらく最善の方法ですが、可逆圧縮の WebP の方が間違いなく圧縮率が高くなります。

| 第一候補 | 代替用 |
| --- | --- |
| 可逆 WebP または PNG圧縮結果が気にならない場合は JPEG | PNG または JPEGスクリーンショットで GIF を使用すると色数が制限されます |

### 図、イラスト、グラフ

 ベクターグラフィックを使用して表すことができる画像であれば、すべて SVG が 第一候補です。
 そうでない場合は、 PNG のような可逆圧縮形式を使用する必要があります。
 JPEG や非可逆 WebP のような非可逆形式を選択する場合は、テキストやその他の図形がぼやけたり不鮮明にならないように、圧縮レベルを慎重に判断してください。

| 第一候補 | 代替用 |
| --- | --- |
| SVG | PNG |

代替画像の提供
-------

 標準的な HTML の `<img>` 要素は、画像で互換性のための代替画像に対応していませんが、 `<picture>` 要素は対応しています。
 `<picture>` はいくつかの `<source>` 要素のラッパーとして使われ、それぞれが異なる形式や異なるメディア条件における画像のバージョンを指定し、 `<img>` 要素で画像を表示する場所と、代替可能な既定または「最も互換性のある」バージョンを指定します。

例えば、 SVG で表示するのが最適な図を、 PNG や GIF で代替できるように表示したい場合、次のようにします。

```html
<picture>
  <source srcset="diagram.svg" type="image/svg+xml" />
  <source srcset="diagram.png" type="image/png" />
  <img
 src="diagram.gif"
 width="620"
 height="540"
 alt="Diagram showing the data channels" />
</picture>
```

`<source>` はいくつでも指定できますが、通常は 2 つか 3 つで十分です。

関連情報
----

* メディアの種類と形式のガイド
* ウェブメディア技術
* ウェブで使用される動画コーデックのガイド
* HTML の `<img>` および `<picture>` 要素
* CSS の `background-image` プロパティ
* `HTMLImageElement.Image()` コンストラクターと `HTMLImageElement` インターフェイス


ウェブ動画コーデックガイド - ウェブメディア技術

ウェブ動画コーデックガイド
=============

このガイドでは、ウェブ上で使用する可能性の高い、または使用を検討している動画コーデックを紹介し、その機能の概要と互換性や有用性に関する懸念、そして自分のプロジェクトの動画に適したコーデックを選ぶためのアドバイスを提供します。

非圧縮動画データはサイズが大きいため、格納するのはもちろん、ネットワークで転送するにも、大幅に圧縮する必要があります。非圧縮動画を格納するために必要なデータ量を想像してみてください。

* ハイビジョン (1920x1080) のフルカラー（1 ピクセル 4 バイト）動画は単一のフレームで 8,294,400 バイトになります。
* 一般的な 30 フレーム/秒の HD 動画では、 1 秒間に 248,832,000 バイト (~249MB) を占めることになる。
* 1 分間の HD 動画なら 14.93GB のストレージが必要です。
* 一般的な 30 分のビデオ会議では約 447.9GB、 2 時間の動画では約 1.79**TB**（つまり 1790GB）のストレージが必要となります。

必要なストレージ容量が膨大になるだけでなく、非圧縮の動画を伝送するために必要なネットワーク帯域も、音声やオーバーヘッドを含めない場合、 249MB/秒と膨大な量になります。そこで、動画コーデックの出番となります。音声コーデックが音声データを圧縮するように、動画コーデックは動画データを圧縮し、後でデコードして再生や編集ができる形式にエンコードします。

ほとんどの動画コーデックは、デコードされた動画が原版と正確に一致しないという意味で、**非可逆的**です。コーデックやその設定によって異なりますが、一般的には、圧縮を強くすればするほど、細部や忠実度が失われることになります。可逆圧縮コーデックも存在しますが、一般的にはネットワーク上で使用するよりも、アーカイブやローカル再生のための保存に使用されます。

よくあるコーデック
---------

以下の動画コーデックは、ウェブで最も一般的に使用されているものです。各コーデックについて、対応するコンテナー（ファイル形式）も掲載されています。各コーデックには、特定の機能や注意すべき互換性の問題など、そのコーデックに関する詳細な情報を提供する下記の節へのリンクがあります。

| コーデック名 (短縮) | 完全なコーデック名 | 対応するコンテナー |
| --- | --- | --- |
| AV1 | AOMedia Video 1 | MP4,
 WebM |
| AVC (H.264) | Advanced Video Coding | 3GP,
 MP4 |
| H.263 | H.263 Video | 3GP |
| HEVC (H.265) | High Efficiency Video Coding | MP4 |
| MP4V-ES | MPEG-4 Video Elemental Stream | 3GP,
 MP4 |
| MPEG-1 | MPEG-1 Part 2 Visual | MPEG,
 QuickTime |
| MPEG-2 | MPEG-2 Part 2 Visual | MP4,
 MPEG,
 QuickTime |
| Theora | Theora | Ogg |
| VP8 | Video Processor 8 | 3GP,
 Ogg,
 WebM |
| VP9 | Video Processor 9 | MP4,
 Ogg,
 WebM |

エンコードされた動画に影響を与える要素
-------------------

どのエンコーダーでもそうですが、エンコードされた動画の容量と品質に影響を与える基本的な 2 つの要因のグループがあります。原本の動画の形式とコンテンツに関する特定の仕様と、動画をエンコードするときに使用されるコーデックの仕様と構成です。

最も単純なガイドラインは、エンコードされた動画が圧縮されていない元の動画により近く見えるようにするものは、一般的に結果として得られるデータも大きくなるということです。したがって、常にサイズと品質のトレードオフになります。状況によっては、データサイズを小さくするために品質を犠牲にすることは、失われた品質に見合うものです。他にも、品質の損失は受け入れられず、結果としてファイルが大きくなるコーデック設定を受け入れる必要がある場合もあります。

### エンコード出力における元の動画形式の影響について

元の動画形式が出力にどのように影響するかは、コーデックとそれがどのように動作するかによって異なります。コーデックがメディアを内部ピクセル形式に変換したり、他にも単純なピクセル以外の方法で画像を表したりする場合、元の画像の形式は、何の違いも生じません。しかし、フレームレートや、当然ながら解像度といったものは、メディアの出力サイズに常に影響を及ぼします。

さらに、すべてのコーデックには長所と短所があります。特定の図形やパターンが苦手なもの、シャープなエッジを再現するのが苦手なもの、暗部のディテールが失われがちなものなど、さまざまな可能性があります。これらはすべて、基本的なアルゴリズムと数学に依存しているのです。

元の動画形式やコンテンツが、エンコードされた動画の品質やサイズに与える潜在的な影響| 特性 | 品質への影響 | サイズへの影響 |
| --- | --- | --- |
| 色深度（ビット深度） | 色のビット深度が高いほど、動画の色の忠実さの品質は高くなります。さらに、画像の飽和部分（つまり、明るく純粋な赤 [`rgba(255, 0, 0, 1)`] など、色が純粋で強い部分）では、 1 成分あたり 10 ビット（10 ビットカラー）未満の色深度は、色の可視段差なしで勾配を表現できないバンディング（帯状）を可能にします。 | コーデックによっては、色深度が高いほど圧縮ファイルサイズが大きくなる場合があります。決定要因は、圧縮されたデータにどのような内部ストレージ形式を使用するかです。 |
| フレームレート | 主に、画像内の動きの滑らかさの知覚に影響を与えます。この点については、フレームレートが高いほど、動きはより滑らかでリアルに現れます。最終的には、この点を返すようになります。詳細は下記のフレームレートを参照してください。 | エンコード時にフレームレートを下げないことを想定すると、フレームレートが高いほど圧縮された動画サイズは大きくなります。 |
| 動き | 動画の圧縮は通常、フレームを比較してその違いを見つけ、前のフレームを更新して次のフレームの見え方を近似させるのに十分な情報を含むレコードを構築することによって動作します。連続するフレームが互いに異なる形であればあるほど、その差は大きくなり、圧縮された動画にアーティファクトが生じるのを避けるために、圧縮の効果は低くなります。 | 動きによって生じる複雑さは、フレーム間の差異の数が多くなるため、中間フレームが大きくなります。この理由と他の理由から、動画に動きがあるほど、出力ファイルは通常より大きくなります。 |
| ノイズ | 画像ノイズ（フィルムグレイン効果、ダスト、その他の画像の粗さなど）により、ばらつきが生じます。一般に、ばらつきがあると圧縮が難しくなり、同じ圧縮率を達成するために細部を落とす必要があるため、品質が損なわれます。 | 画像にノイズなどの変動があると、圧縮処理が複雑になり、アルゴリズムが同じ程度に画像を圧縮する成功率は低くなります。ノイズによって発生する変動の一部またはすべてを無視する方法でエンコーダーを構成しない限り、圧縮された動画はより大きくなります。 |
| 解像度（幅と高さ） | 同じ画面内へ表示するのであれば、解像度の高い動画の方が、圧縮時に生じた影響を除けば、元のシーンをより正確に描写することができます。 | 動画の解像度が高くなればなるほど、動画は大きくなります。これは、動画の最終的なサイズに重要な役割を果たします。 |

これらがどの程度エンコード後の動画に影響するかは、使用するエンコーダーや その設定方法など、状況の詳細によって異なります。一般的なコーデックオプションに加えて、エンコーダーは、エンコード中にフレームレートを下げたり、ノイズを除去したり、動画の全体的な解像度を下げたりするように構成されることがあります。

### コーデック構成がエンコーダー出力に与える影響

動画をエンコードするために使用されるアルゴリズムは、一般的に、そのエンコードを実行するために、いくつかの一般的な技術のうちの1つ以上を使用しています。一般的に言って、動画の出力サイズを縮小するようにオプションを構成すると、おそらく動画の全体的な品質に悪影響を及ぼすか、または動画にある種のアーティファクトをもたらすことになります。また、可逆形式のエンコードを選択することも可能で、その場合、エンコードされたファイルのサイズは大きくなりますが、デコード時に元の動画が完全に再現されるようになります。

さらに、それぞれのエンコーダーユーティリティは、元の動画を処理する方法に異なる形にすることがあり、その結果、出力の品質やサイズに差異が生じることがあります。

動画エンコーダーの構成が品質とサイズに与える影響| 機能 | 品質への影響 | サイズへの影響 |
| --- | --- | --- |
| 可逆圧縮 | 品質が損なわれない | 可逆圧縮は、非可逆圧縮ほど動画全体のサイズを縮小することができないため、結果的にファイルサイズが大きくなり、一般的な使用には適さない可能性があります。 |
| 非可逆圧縮 | コーデックの仕様や圧縮率によって、ある程度はアーティファクトや他の形式での品質劣化が発生します。 | エンコードされた動画が元の動画から逸脱することが許されるほど、高い圧縮率を達成することが容易になります。 |
| 品質の設定 | 品質設定が高いほど、エンコードされた動画はより元メディアに近い見栄えになります。 | 一般に、画質を高く設定するとエンコードされる動画ファイルのサイズが大きくなりますが、その程度はコーデックによって異なります。 |
| ビットレート | 一般的にビットレートが高くなると品質が向上します。 | ビットレートが高いほど、出力ファイルのサイズが大きくなります。 |

動画をエンコードするときに利用できるオプションと、それらのオプションに割り当てられる値は、コーデックによってだけでなく、使用するエンコーディングソフトウェアによっても異なります。これらのオプションがエンコードされた動画に与える特定の度合いを理解するためには、エンコードソフトウェアに記載されているドキュメントが役に立ちます。

圧縮時のアーティファクト
------------

**アーティファクト**とは、非可逆エンコーダーの処理で、データが失われたり再配置されたりして、目に見えて悪影響を及ぼす辺りのことです。アーティファクトが一度現れると、動画がどのように表示されるかによって、しばらくの間、その状態が続くことがあります。動画のそれぞれのフレームは、現在表示されているフレームに設定された変更を適用して表示されます。つまり、エラーやアーティファクトは時間とともに蓄積され、グリッチや奇妙な、あるいは予期せぬ画像の逸脱が発生し、それがしばらく続くことになるのです。

これを解決し、動画データのシーク時間を改善するために、動画ファイルに定期的に**キーフレーム**（**イントラフレーム**または **i フレーム**とも呼ばれる）を配置しています。キーフレームはフルフレームで、現在見えているダメージやアーティファクトの残りを修復するために使用されます。

### エイリアシング

エイリアシングとは、エンコーダーのデータから再構成されたときに、圧縮前と同じようには見えなくなるものの総称です。エイリアシングにはさまざまな形のものがありますが、最も一般的なものは次のとおりです。

|  |  |
| --- | --- |
| モアレ模様
**モアレ模様**とは、元画像のパターンとエンコーダーの処理方法が空間的にわずかにずれているときに発生する大規模な空間干渉模様のことです。エンコーダーで発生したアーチファクトは、デコードする際に画像パターンに奇妙な渦巻き状の効果をもたらします。 | モアレ模様により波のような渦巻きを示すレンガ壁 |
| 階段効果
**階段効果**とは、本来は滑らかなはずの斜めの直線や曲線のエッジがギザギザになり、まるで階段の集合体のように見える空間表現です。アンチエイリアス」フィルターで低減される効果です。 | 階段効果を発生させるエイリアシングにより、斜め線が階段のように見える写真  |
| ワゴンホイール効果
**ワゴンホイール効果**（または**ストロボ効果**）とは、映画でよく見られる視覚効果で、フレームレートと圧縮アルゴリズムの相互作用により、回転する車輪が誤った速度で回転して見えたり、逆に回転して見えたりするものです。鉄道の線路や、道路の横に並んでいる柱など、移動する繰り返しパターンでも同じような効果が発生することがあります。これは時間的（時刻的）エイリアシングの問題で、回転の速さが圧縮やエンコーダーの際に行われるサンプリングの周波数と干渉するためです。 | エイリアシングによる車輪の回転で、ワゴンホイール効果が発生します。 |

### カラーエッジング

**カラーエッジング**は、シーン内の色付きオブジェクトのエッジに沿って混入した偽の色として表示される視覚的アーチファクトの一種です。これらの色は、フレームのコンテンツと意図的な色の関係がありません。

### 鮮明度の低下

動画をエンコードする過程でデータを削除するため、細部が失われることがあります。十分な圧縮が適用されると、画像の一部またはすべてが鮮明さを失い、わずかにぼやけた、またはかすんだ外観になる可能性があります。

テキスト、特に小さなテキストは、とても細部が重要なコンテンツであるため、わずかな変化でも読みやすさに大きな影響を与える可能性があります。

### リンギング

非可逆圧縮アルゴリズムでは、圧縮アルゴリズムによって生成された色のついたピクセルがオブジェクトの外側に混入する **リンギング** が発生することがあります。これは、オブジェクトとその背景の間の鋭い境界をまたぐブロックを使用するアルゴリズムで発生します。これは特に圧縮レベルが高い場合によく見られます。

![リンギング効果の例](/ja/docs/Web/Media/Formats/Video_codecs/ringing-effects.png)

上の星の縁の周りにある青とピンクのフリンジに注目してください（他にも手順やその他の重要な圧縮アーチファクトもあります）。これらのフリンジは、リンギング効果です。リンギングはモスキートノイズといくつかの点で似ていますが、リンギングがほぼ一定で変化しないのに対し、モスキートノイズは揺らいだり移動したりするのが特徴です。

リンギングは、画像に格納されたテキストを特に読みにくくするアーチファクトの一種で す。

### ポスタリゼーション

**ポスタリゼーション**は、圧縮によってグラデーションの色の詳細が失われた場合に発生します。ある領域のさまざまな色が滑らかに変化する代わりに、画像は元の画像の外観に近い色の塊となり、ブロック化します。

![白頭ワシの写真で、解像度がにじんでいる。](/ja/docs/Web/Media/Formats/Video_codecs/posterize-effect.jpg)

上の写真のハクトウワシ（と背景のユキフクロウ）の羽の色がブロック状になっていることに注目してください。羽の細部は、このようなポスタリゼーション・アーチファクトによって、ほとんど失われています。

### コンターリング

**コンターリング**または**カラーバンディング**は、ポスタリゼーションの特定の一形態で、色ブロックが画像内で帯または縞を形成します。これは、動画が粗すぎる量子化構成でエンコードされている場合に発生します。その結果、動画のコンテンツは、滑らかなグラデーションや遷移の代わりに、色から色への遷移が突然で、色の帯が現れる「層状」な外観を示すようになるのです。

![圧縮により輪郭が生じた画像の例](/ja/docs/Web/Media/Formats/Video_codecs/contouring-effect.jpg)

上の画像の例では、空の色が地平線に向かって変化する際に、一貫したグラデーションではなく、異なる色調の青の帯が存在していることに注目してください。これがコンターリング効果です。

### モスキートノイズ

**モスキートノイズ**は、エッジのきついオブジェクトのエッジの外側や、前景オブジェクトと背景の間の急激な遷移にほぼ従う、ノイズや**エッジのビジー状態**として表示されるテンポラルアーティファクトです。この効果は、リンギングと同様に現れることがあります。

![圧縮によりモスキートノイズが発生した画像の例。](/ja/docs/Web/Media/Formats/Video_codecs/mosquito-effect-sm.png)

上の写真では、橋の周りの空など、様々な場所にモスキートノイズが記載されています。右上に、モスキートノイズが発生している画像の一部をクローズアップして示しています。

モスキートノイズは MPEG 動画に最も多く見られますが、離散コサイン変換 (DCT) アルゴリズムを使用する場合には必ず発生し、例えば JPEG 静止画にも現れます。

### 動き補償ブロック境界のアーチファクト

動画の圧縮は一般に、 2 つのフレームを比較し、その違いを 1 フレームずつ動画の終わりまで記録することで作業します。この手法は、カメラがその場に固定されていたり、フレーム内のオブジェクトが比較的静止している場合にはうまく動作しますが、フレーム内に大きな動きがある場合には、フレーム間の差分の数が非常に多くなり、圧縮がうまくいかないことがあります。

**動き補償** とは、（カメラやフレーム内のオブジェクトの）動きを見て、動いているオブジェクトが各方向に何ピクセルずつ移動したかを判断する技術です。そして、その移動量は、その移動量だけでは記述できない移動したピクセルの記述とともに格納されます。要するに、エンコーダーは移動するオブジェクトを見つけ、元画像のような内部フレームを構築し、すべてのオブジェクトが新しい位置に移されるようにするのです。理論的には、これが新しいフレームの出現を近似させます。そして、作業を完了するために、残りの差異が得られ、オブジェクトのシフトの集合とピクセルの差異の集合が新しいフレームを表すデータとして格納されます。このシフトとピクセル差を記述しているオブジェクトを**残差フレーム**と呼ばれます。

| 元のフレーム | フレーム間の差異 | 動き補償後の差異 |
| --- | --- | --- |
| 動画の元フレーム | 最初のフレームと次のフレームとの相違 | 2 ピクセル右シフト後のフレーム間の差異 |
| 視聴者から見た最初のフルフレーム。 | ここでは、最初のフレームと次のフレームとの間の差異のみが見えています。他はすべて黒です。よく見ると、この差分の大部分はカメラの水平移動によるもので、動き補償の良い候補であることがわかります。 | 異なるピクセルの数を最小にするために、ここではカメラのパンニングを考慮して、まず最初のフレームを 2 ピクセル分右にずらしてから、差分をとっています。これにより、カメラのパンニングが補正され、 2 つのフレームがより多く重なり合うようになります。 |
|
 Images from
 Wikipedia |

動き補償には、一般的に2つの種類があります。**グローバルモーション補正**と**ブロックモーション補正**です。グローバルモーション補正は、一般的に、トラッキング、ドリー移動、パン、チルト、ローリング、上下移動などのカメラの動きを調整します。ブロックモーション補正は局所的な変化を処理し、モーション補正を使用してエンコードすることができる画像の小さな部分を探します。このブロックは通常、グリッド状に固定されたサイズですが、ブロックのサイズを変更したり、ブロックが重なることを許容する動き補償の形式があります。

しかし、動き補償によって発生するアーチファクトがあります。それは、ブロックの境界線に沿った急激なエッジという形式で発生し、偽リンギングなどのエッジ効果をもたらします。これは、残差フレームのコード化に関わる数学に起因するもので、次のキーフレームで修復される前に簡単に気づくものです。

### フレームサイズの縮小

状況によっては、動画ファイルの最終的なサイズを改善するために、動画の寸法を縮小することが有益な場合があります。サイズやスムーズな再生がすぐに失われることはマイナス要因ですが、慎重に判断することで最終的に良い結果が得られる場合があります。1080p の動画を 720p に縮小してからエンコードすると、より高い画質を保有しながらサイズを小さくすることができます。再生時に縮小しても、元の動画をフルサイズでエンコードしてサイズ要件を満たすために画質の劣化を受け入れるよりも良い結果になる場合があります。

### フレームレートの縮小化

同様に、動画からフレームを完全に削除し、フレームレートを下げて補正することができます。これには 2 つの好ましいことがあります。動画全体が小さくなることと、その小さいサイズによって動き補償がより多く達成されることです。例えば、フレーム間の動きのために 2 ピクセル離れている 2 つのフレームの動きの違いをコンピューターで計算する代わりに、他のフレームを 1 つ飛ばし、4 ピクセルの動きの違いを計算することができます。これにより、より少ない残差フレームでカメラ全体の動きを表現することができます。

人間の目でコンテンツが動きとして見えなくなるまでのフレームレートの絶対最小値は、 1 秒間に約 12 フレームです。それ以下になると、動画は静止画の羅列になってしまう。映画フィルムは通常1秒間に 24 フレーム、標準画質のテレビは 1 秒間に約 30 フレーム（それよりいくつか少ないが十分近い）、高画質のテレビは 1 秒間に 24 フレームから 60 フレームです。 24FPS 以上のものであれば、一般的に満足のいく滑らかさとみなされます。 30FPS または 60FPS は、ニーズに応じて理想的なターゲットとなります。

最終的に、どのようなものを犠牲にできるかは、あなたやあなたのデザインチーム次第です。

コーデックの詳細
--------

### AV1

**AOMedia Video 1** (**AV1**) コーデックは、インターネット動画に特化して Alliance for Open Media によって設計されたオープンな形式です。 VP9 や H.265/HEVC よりも高いデータ圧縮率を実現し、 AVC よりも最大 50% 高い圧縮率を達成します。 AV1 は完全にロイヤリティフリーで、 `<video>` 要素と WebRTC の両方で使用するために設計されています。

AV1 は現在 3 つのプロファイルを提供しています。**メイン**、**ハイ**、**プロフェッショナル**の 3 つのプロファイルがあり、色深度やクロマサブサンプリングに対応したものが増えています。さらに、一連の**レベル**が指定され、それぞれが動画の属性の範囲に制限を定義しています。これらの属性には、フレーム寸法、ピクセル単位の画像領域、表示およびデコードレート、平均および最大ビットレート、エンコード/デコード処理で使用されるタイルおよびタイル列の数の制限などがあります。

例えば、 AV1 レベル 2.0 は最大フレーム幅 2048 ピクセル、最大フレーム高さ 1152 ピクセルですが、ピクセル単位の最大フレームサイズは 147456 なので、実際にはレベル 2.0 で 2048x1152 の動画にすることはできません。ただし、少なくとも Firefox と Chrome では、ソフトウェアデコードを実行するときにレベルは実際には無視され、デコーダーは指定された集合を与えられた動画を再生するために最善を尽くすだけであることはメモしておく必要があります。しかし、今後の互換性のために、選んだレベルの範囲内にとどめるべきです。

現時点での AV1 の最大の欠点は、とても新しく、ほとんどのブラウザーに対応するのがまだ途中であることです。また、エンコーダーやデコーダーはまだ性能の最適化が行われておらず、ハードウェアのエンコーダーやデコーダーはまだほとんど開発中で、生産されていません。このため、動画を AV1 形式にエンコードする際には、すべての作業をソフトウェアで行うため、とても長い時間を要します。

これらのことから、当分の間、 AV1 は動画コーデックの最初の選択肢にはなりませんが、将来的に使用する準備が整うのを見守る必要があります。

|  |  |
| --- | --- |
| 対応しているビットレート | 動画のレベルにより異なります。理論上の最大値はレベル 6.3 で 800Mbps に達します。
各レベルの最大解像度とレートを記述している AV1 仕様書のレベル一覧表を参照してください。 |
| 対応しているフレームレート | レベルによって異なります。例: レベル 2.0 は最大 30FPS であるのに対し、レベル 6.3 は 120FPS に達することができます |
| 圧縮 |
 非可逆の
 DCT ベースのアルゴリズム |
| 対応しているフレームサイズ | 8 x 8 ピクセル～ 65,535 x 65,535 ピクセルで、各寸法はこの間の任意の値を導くことができます。 |
| 対応しているカラーモード |

| プロファイル | 色深度 | 色のサブサンプリング |
| --- | --- | --- |
| Main | 8 or 10 | 4:0:0 （グレースケール）または 4:2:0 |
| High | 8 or 10 | 4:0:0 （グレースケール）, 4:2:0, 4:4:4 |
| Professional | 8, 10, or 12 | 4:0:0 （グレースケール）, 4:2:0, 4:2:2, 4:4:4 |

 |
| HDR 対応 | あり |
| 可変フレームレート (VFR) 対応 | あり |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| AV1 対応 | 70 | 75 | 67 | なし | 57 | なし |

 |
| コンテナーの対応 | ISOBMFF, MPEG-TS,
 MP4,
 WebM |
| RTP (en-US) /
 WebRTC 互換
  | あり |
| サポート/管理組織 | Alliance for Open Media |
| 仕様書 | https://aomediacodec.github.io/av1-spec/av1-spec.pdf |
| ライセンス | ロイヤリティフリー、オープン標準 |

### AVC (H.264)

MPEG-4 仕様書群の **Advanced Video Coding** (**AVC**) 標準は、同一の ITU H.264 仕様書と MPEG-4 Part 10 仕様書によって規定されています。動き補償に基づくコーデックで、現在では放送テレビ、 RTP (en-US) テレビ会議、ブルーレイディスクの動画コーデックなど、あらゆるメディアで広く使用されています。

AVC は柔軟性が高く、さまざまな機能を持つプロファイルがあります。例えば、 Constrained Baseline プロファイルは、ビデオ会議やモバイルのシナリオで使用するために設計されており、 Main プロファイル（一部の地域で標準画質のデジタルテレビに使用）や High プロファイル（ブルーレイディスクの動画に使用）より少ない帯域幅で使用します。ほとんどのプロファイルは 8 ビット色成分と 4:2:0 クロマサブサンプリングを使用しています。 High 10 プロファイルは 10 ビット色に対応しており、 High 10 の上級形式では 4:2:2 と 4:4:4 クロマサブサンプリングを追加しています。

AVC はまた、同じシーンの複数のビュー (Multiview Video Coding) に対応するなどの特別な機能を持ち、他にも立体映像の制作を可能にしています。

しかし、 AVC は専有的な形式であり、その技術に関しては複数の当事者によって多数の特許が所有されています。 AVC 形式のメディアを商業的に使用するにはライセンスが必要ですが、 MPEG LA パテントプールでは、エンドユーザーが無料で使用する限り、 AVC 形式のインターネット動画のストリーミングにはライセンス料を要求していません。

ウェブ ブラウザー以外のウェブ RTC の実装（JavaScript API を記載していない実装）は、ウェブ RTC 呼び出しのコーデックとして AVC に対応することが必須です。ウェブブラウザーは必須ではありませんが、一部のブラウザーは対応しています。

ウェブブラウザーの HTML コンテンツでは、AVC は広く互換性があり、多くのプラットフォームが AVC メディアのハードウェアエンコードとデコードに対応しています。しかし、自分のプロジェクトで AVC を使用することを選ぶ前に、そのライセンス要件に注意してください。

|  |  |
| --- | --- |
| 対応しているビットレート | レベルによって異なる |
| 対応しているフレームレート | レベルによって異なる。 300FPS まで可能 |
| 圧縮 |
 非可逆の
 DCT ベースのアルゴリズムですが、画像内に可逆的なマクロブロックを作成することは可能です。
  |
| 対応しているフレームサイズ | 8,192 x 4,320 ピクセルまで |
| 対応しているカラーモード | より一般的な、または興味深いプロファイルをいくつか紹介します。:

| プロファイル | 色深度 | 色のサブサンプリング |
| --- | --- | --- |
| Constrained Baseline (CBP) | 8 | 4:2:0 |
| Baseline (BP) | 8 | 4:2:0 |
| Extended (XP) | 8 | 4:2:0 |
| Main (MP) | 8 | 4:2:0 |
| High (HiP) | 8 | 4:0:0 （グレースケール）および 4:2:0 |
| Progressive High (ProHiP) | 8 | 4:0:0 （グレースケール）および 4:2:0 |
| High 10 (Hi10P) | 8 to 10 | 4:0:0 （グレースケール）および 4:2:0 |
| High 4:2:2 (Hi422P) | 8 to 10 | 4:0:0 （グレースケール）, 4:2:0, 4:2:2 |
| High 4:4:4 Predictive | 8 to 14 | 4:0:0 （グレースケール）, 4:2:0, 4:2:2, 4:4:4 |

 |
| HDR 対応 |
 あり。Hybrid Log-Gamma または
 Advanced HDR/SL-HDR。どちらも ATSC の一部。
  |
| 可変フレームレート (VFR) 対応 | あり |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| AVC/H.264 対応 | 4 | 12 | 35 | 9 | 25 | 3.2 |

Firefox の AVC 対応は、特許の問題を避けるため、オペレーティングシステムに内蔵またはプリインストールされた AVC およびそのコンテナー用のコーデックに依存します。 |
| コンテナーの対応 | 3GP,
 MP4 |
| RTP (en-US) /
 WebRTC 互換
  | あり |
| サポート/管理組織 | MPEG /
 ITU |
| 仕様書 | https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-codinghttps://www.itu.int/rec/T-REC-H.264 |
| ライセンス | 多数の特許を有する独占的なものです。商用利用する場合はライセンスが必要です。複数のパテントプールが適用される場合があるので注意。 |

### H.263

ITU の **H.263** コーデックは、主に低帯域幅の状況で使用するために設計されました。具体的には、PSTN（公衆交換電話網）、RTSP、SIP（IP ベースのビデオ会議）システムでのビデオ会議用に重点が置かれています。低帯域のネットワークに最適化されているとはいえ、かなりCPUに負荷がかかるため、下位のコンピューターでは十分なパフォーマンスが得られない可能性があります。データ形式は MPEG-4 Part 2 と似ています。

H.263 は、ウェブで広く使用されたことはありません。 H.263 の変化形は、 Flash 動画や Sorenson コーデックなど、他の独占的な形式の基礎として使用されています。しかし、主要なブラウザーは、これまで既定値で H.263 に対応していません。特定のメディアプラグインが H.263 メディアの対応を可能にしています。

ほとんどのコーデックとは異なり、 H.263 は、フレーム（画像）あたりの最大ビットレート、または **BPPmaxKb** でエンコードされた動画の基本を定義しています。エンコード中に BPPmaxKb の値が選択され、動画はそれぞれのフレームでこの値を超えることができません。最終的なビットレートは、この値、フレームレート、圧縮、選ばれた解像度とブロック形式によって決まります。

H.263 は H.264 に取って代わられ、したがって、一般的に可能であれば使用を避けるべきであるレガシーメディア形式とみなされています。新しいプロジェクトで H.263 を使用する唯一の現実的な理由は、 H.263 があなたの最良の選択肢である非常に古い機器に対応する必要がある場合です。

H.263 は独占的な形式で、Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm など多くの組織や会社が特許を保有しています。 H.263 を使用するためには、適切なライセンスを取得することが法的に義務付けられています。

|  |  |
| --- | --- |
| 対応しているビットレート | 制約なし、ただしふつうは 64Kbps 未満 |
| 対応しているフレームレート | すべて |
| 圧縮 |
 非可逆の
 DCT ベースのアルゴリズム |
| 対応しているフレームサイズ | 1408 x 1152 ピクセル以下
H.263 のバージョン 1 では、対応している画像サイズの集合を指定しています。それ以降のバージョンでは、さらに多くの解像度に対応している可能性があります。 |
| 対応しているカラーモード | YCbCr; 各画像形式 (サブ QCIF、QCIF、CIF、4CIF、16CIF) は、ピクセル単位のフレームサイズと、各フレームに使用されるルミナンスとクロミナンスの各サンプル列の数を定義します。 |
| HDR 対応 | なし |
| 可変フレームレート (VFR) 対応 | なし |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| H.263 対応 | なし | なし | なし | なし | なし | なし |

 |
| コンテナーの対応 | 3GP,
 MP4,
 QuickTime |
| RTP (en-US) /
 WebRTC 互換
  | なし |
| サポート/管理組織 | ITU |
| 仕様書 | https://www.itu.int/rec/T-REC-H.263/ |
| ライセンス | 独占的であり、適切なライセンスが必要です。複数のパテントプールが適用される場合がありますので、ご注意ください。 |

### HEVC (H.265)

**高効率動画コーデック** (**HEVC**) は、ITU の H.265 と MPEG-H Part 2 (MPEG-4 に続く、まだ開発中のもの) によって定義されています。HEVC は、非常に高い解像度（8K 動画を含む）を含むサイズの動画の効率的なエンコードとデコードに対応するように設計されており、ソフトウェアが現代のプロセッサーの利点を生かすために特別に設計された構造になっています。理論的には、HEVC は AVC の半分の圧縮ファイルサイズで、同等の画像品質を実現することができます。

例えば、以前のコーデックで使用されていたマクロブロックと同様に、それぞれの符号化木単位 (CTU) は、各サンプルのルマ値の木と、同じ符号化木単位で使用される各クロマサンプルのクロマ値の木、および必要な構文要素から構成されています。この構造により、複数のコアで容易に処理できるよう対応されています。

HEVC の興味深い機能は、メインプロファイルが 4:2:0 のクロマサブサンプリングで 8 ビット/成分色のみを対応していることです。また、4:4:4動画が特別に処理される点も興味深い点です。ルマサンプル（画像のピクセルをグレースケールで表現）とCb、Crサンプル（グレーをどのように変化させて色のピクセルを作成するかを示す）を保有する代わりに、3チャンネルを各色ごとに3つのモノクロ画像として扱い、それをレンダリング時に合成してフルカラー画像を作成します。

HEVCは独占的な形式で、多くの特許で保護されています。ライセンスは MPEG LAによって管理され、料金はコンテンツ制作者や配信者ではなく、開発者に請求されます。アプリやウェブサイトで HEVC を使用するかどうかを決める前に、最新のライセンス条項と要件を必ず確認してください。

|  |  |
| --- | --- |
| 対応しているビットレート | 800,000 Kbps まで |
| 対応しているフレームレート | レベルによって異なる。 300FPS まで可能 |
| 圧縮 |
 非可逆の
 DCT ベースのアルゴリズム |
| 対応しているフレームサイズ | 128 x 96 から 8,192 x 4,320 ピクセルまで。プロファイトレベルによって異なります。 |
| 対応しているカラーモード | 下記の情報は、主要なプロファイルについて指定されたものです。ここに記載されていないプロファイルも多数利用できます。

| プロファイル | 色深度 | 色のサブサンプリング |
| --- | --- | --- |
| Main | 8 | 4:2:0 |
| Main 10 | 8 to 10 | 4:2:0 |
| Main 12 | 8 to 12 | 4:0:0 4:2:0 |
| Main 4:2:2 10 | 8 to 10 | 4:0:0, 4:2:0, 4:2:2 |
| Main 4:2:2 12 | 8 to 12 | 4:0:0, 4:2:0, 4:2:2 |
| Main 4:4:4 | 8 | 4:0:0, 4:2:0, 4:2:2, 4:4:4 |
| Main 4:4:4 10 | 8 to 10 | 4:0:0, 4:2:0, 4:2:2, 4:4:4 |
| Main 4:4:4 12 | 8 to 12 | 4:0:0, 4:2:0, 4:2:2, 4:4:4 |
| Main 4:4:4 16 Intra | 8 to 16 | 4:0:0, 4:2:0, 4:2:2, 4:4:4 |

 |
| HDR 対応 | あり |
| 可変フレームレート (VFR) 対応 | あり |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| HEVC / H.265 対応 | 107 | 18 | なし | 11 | 94 | 11 |

Chrome は、ハードウェアコーデックを備えた Windows 8 以降、Linux、ChromeOS デバイス、およびすべての macOS Big Sur+ および Android 5.0 以降のデバイスで HEVC をサポートします。
Edge (Chromium) は、ハードウェアコーデックを備えた Windows 10 1709 以降の端末で、Microsoft Store から HEVC 動画拡張機能をインストールした場合に対応します。他のプラットフォームにおける Chrome と同様の対応状況となります。Edge（レガシー）は、ハードウェアデコーダーのある端末でのみ HEVC に対応しています。
HEVC は特許で保護されているため、Mozilla は HEVC をサポートしません。
Internet Explorer は、ハードウェアデコーダーを備えた端末でのみ HEVC に対応します。
Opera およびその他の Chromium ベースのブラウザーは、Chrome と同じ対応状況です。
Safari は、macOS High Sierra 以降のすべての端末で HEVC に対応しています。 |
| コンテナーの対応 | ISOBMFF、MPEG-TS、MP4、QuickTime |
| RTP (en-US) /
 WebRTC 互換
  | なし |
| サポート/管理組織 | ITU /
 MPEG |
| 仕様書 | http://www.itu.int/rec/T-REC-H.265https://www.iso.org/standard/69668.html |
| ライセンス | 独占的であり、ライセンス要件を満たしていることを確認してください。複数のパテントプールが適用される場合がありますので、ご注意ください。 |

### MP4V-ES

**MPEG-4 Video Elemental Stream** (**MP4V-ES**) 形式は、 MPEG-4 Part 2 Visual 標準の一部です。一般的に、 MPEG-4 パート 2 動画は、他のコーデックと比較して有益な値が示されていないため、誰にも使用されていませんが、 MP4V-ES はモバイルで使用されているものがあります。 MP4V は、基本的に H.263 を MPEG-4 コンテナーでエンコードしたものです。

そのため、 RTP (en-US) セッション上で MPEG-4 音声と動画をストリーミングするために使用されます。しかし、 MP4V-ES は、 3GP を使用してモバイル接続を介して MPEG-4 の音声と映像を送信するために使用されます。

この形式は、主要なブラウザーで意味のある形で対応しておらず、かなり時代遅れなので、ほぼ間違いなく使用しない方がよいでしょう。この種類のファイルは `.mp4v` という拡張子があるはずですが、時には `.mp4` という不正確なラベルが付いていることがあります。

|  |  |
| --- | --- |
| 対応しているビットレート | 5 Kbps to 1 Gbps more |
| 対応しているフレームレート | No specific limit; restricted only by the data rate |
| 圧縮 |
 Lossy
 DCT ベースのアルゴリズム |
| 対応しているフレームサイズ | Up to 4,096 x 4,096 pixels |
| 対応しているカラーモード | YCrCb でクロマサンプリング (4:2:0, 4:2:2, 4:4:4) に対応、コンポーネントごとに 12 ビットまで |
| HDR 対応 | なし |
| 可変フレームレート (VFR) 対応 | あり |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| MP4V-ES 対応 | なし | なし | あり | なし | なし | なし |

 Firefox は MP4V-ES を
 3GP
 コンテナーでのみ対応しています。

Chrome は MP4V-ES に対応していません。ただし、 ChromeOS は対応しています。 |
| コンテナーの対応 | 3GP,
 MP4 |
| RTP (en-US) /
 WebRTC 互換
  | なし |
| サポート/管理組織 | MPEG |
| 仕様書 | RFC 6416 |
| ライセンス |
 独占的。
 ライセンスの取得は、 MPEG LA や AT&T から必要に応じて
  |

### MPEG-1 Part 2 Video

**MPEG-1 Part 2 Video** は 1990 年代の始めに発表されました。後の MPEG 動画規格とは異なり、 MPEG-1 は ITU の関与なく MPEG だけで作成されました。

MPEG-2 デコーダーで MPEG-1 動画も再生できるため、様々なソフトウェアやハードウェア機器と互換性があります。 MPEG-1 動画関連の有効な特許は残っていないため、ライセンスに関わることなく使用することができます。しかし、プラグインのサポートなしで MPEG-1 動画に対応しているブラウザーは少数であり、ウェブブラウザーでプラグインの使用が非推奨であるため、これらは一般的にもはや使用することはできません。これにより、 MPEG-1 はウェブサイトやウェブアプリケーションで使用するために選択される可能性は乏しくなっています。

|  |  |
| --- | --- |
| 対応しているビットレート | Up to 1.5 Mbps |
| 対応しているフレームレート | 23.976 FPS, 24 FPS, 25 FPS, 29.97 FPS, 30 FPS, 50 FPS, 59.94 FPS, 60 FPS |
| 圧縮 |
 非可逆の
 DCT ベースのアルゴリズム |
| 対応しているフレームサイズ | 4,095 x 4,095 ピクセルまで |
| 対応しているカラーモード | Y'CbCr で 4:2:0 玄間サンプリング、成分あたり 12 ビットまで |
| HDR 対応 | なし |
| 可変フレームレート (VFR) 対応 | なし |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| MPEG-1 対応 | なし | なし | なし | なし | なし | あり |

 |
| コンテナーの対応 | MPEG |
| RTP (en-US) /
 WebRTC 互換
  | なし |
| サポート/管理組織 | MPEG |
| 仕様書 | https://www.iso.org/standard/22411.html |
| ライセンス | 独占的であるが、すべての特許が失効しているため、 MPEG-1 を自由に使用することができます。 |

### MPEG-2 Part 2 Video

**MPEG-2 Part 2** は、 MPEG-2 仕様書で定義されている動画形式で、 ITU の呼称である H.262 と呼ばれることもあります。それは MPEG-1 動画にとても似ています。実際、MPEG-2 プレーヤーは、特別な作業をせずに自動的に MPEG-1 を処理することができます。ただし、それはより高いビットレートと拡張エンコーディング技術に対応して拡張されています。

MPEG-2 の目標は、標準画質のテレビを圧縮できるようにすることだったので、インターレース動画にも対応しています。標準画質の圧縮率と得られる動画の品質が十分にニーズを満たしたため、 MPEG-2 は DVD 動画メディアで使用される主要な動画コーデックとなっています。

MPEG-2 には、異なる形で利用できるいくつかのプロファイルがあります。それぞれのプロファイルは、フレームレート、解像度、ビットレートなど、動画の属性を増加させる 4 つのレベルを利用できるようになっています。ほとんどのプロファイルは、 4:2:0 クロマサブサンプリングの Y'CbCr を使用されますが、より高度なプロファイルは 4:2:2 にも対応します。さらに、 4 つのレベルがあり、それぞれがより大きなフレーム寸法とビットレートに対応しています。例えば、北米で使用されているテレビの ATSC 仕様は、高レベルのメインプロファイルを使用して高解像度の MPEG-2 動画に対応しており、 1920 x 1080 (30FPS) および 1280 x 720 (60FPS) の両方で、最大ビットレート 80Mbps、4:2:0 動画を許可しています。

しかし、プラグインのサポートなしに MPEG-2 に対応するウェブブラウザーはわずかであり、ウェブブラウザーにプラグインを使用することが非推奨されているため、一般に利用できなくなりました。このため、 MPEG-2 はウェブサイトやウェブアプリケーションで使用するには不向きです。

|  |  |
| --- | --- |
| 対応しているビットレート | Up to 100 Mbps; レベルによって異なる profile |
| 対応しているフレームレート |

| 略語 | レベル名 | フレームレートの対応 |
| --- | --- | --- |
| LL | Low Level | 23.9, 24, 25, 29.97, 30 |
| ML | Main Level | 23.976, 24, 25, 29.97, 30 |
| H-14 | High 1440 | 23.976, 24, 26, 29.97, 30, 50, 59.94, 60 |
| HL | High Level | 23.976, 24, 26, 29.97, 30, 50, 59.94, 60 |

 |
| 圧縮 |
 非可逆の
 DCT ベースのアルゴリズム |
| 対応しているフレームサイズ |

| 略語 | レベル名 | 最大フレームサイズ |
| --- | --- | --- |
| LL | Low Level | 352 x 288 pixels |
| ML | Main Level | 720 x 576 pixels |
| H-14 | High 1440 | 1440 x 1152 pixels |
| HL | High Level | 1920 x 1152 pixels |

 |
| 対応しているカラーモード |
 多くのプロファイルでは、 Y'CbCr で 4:2:0 クロマサブサンプリング。 "High" および
 "4:2:2" プロファイルでは、同様に 4:2:2 クロマサブサンプリングに対応している。
  |
| HDR 対応 | なし |
| 可変フレームレート (VFR) 対応 | なし |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| MPEG-2 対応 | なし | なし | なし | なし | なし | あり |

 |
| コンテナーの対応 | MPEG,
 MPEG-TS (MPEG Transport Stream),
 MP4,
 QuickTime |
| RTP (en-US) /
 WebRTC 互換
  | なし |
| サポート/管理組織 | MPEG /
 ITU |
| 仕様書 | https://www.itu.int/rec/T-REC-H.262https://www.iso.org/standard/61152.html |
| ライセンス | 独占的。 2019 年 4 月 1 日時点でマレーシアとフィリピンを除く全世界ですべての特許が失効しているため、この 2 カ国以外では MPEG-2 を自由に使用することができます。特許は MPEG LA がライセンスしています。 |

### Theora

**Theora** は、 Xiph.org が開発したもので、ロイヤリティやライセンスなしで使用することができる、オープンで無料な動画コーデックです。 Theora は、MPEG-4 Part 2 Visual や AVC と同等の品質と圧縮率であり、動画エンコーダーの最上位ではないにしろ、とても優れた選択肢です。しかし、ライセンスの心配がないことと、 CPU リソースの必要量が比較的少ないことから、多くのソフトウェアやウェブプロジェクトでよく使われています。 Theora で利用できるハードウェアデコーダーがないため、 CPU への影響が少ないことは特に有益です。

Theora は元々 On2 Technologies の VC3 コーデックをベースにしていました。このコーデックとその仕様は LGPL ライセンスで公開され、 Xiph.org に委託され、 Xiph.org がこれを Theora 標準として開発しました。

Theora の欠点は、色成分あたり 8 ビットしか対応していないことで、カラーバンディングを避けるために 10 ビット以上を使用するオプションはありません。とはいえ、 8 ビット/成分は現在でも最も一般的に使用されている色形式なので、ほとんどの用途で不便に感じることはないでしょう。また、 Theora は Ogg コンテナーでのみ使用することができます。しかし、最大の欠点は、 Safari が対応していないことです。そのため、 Theora は macOS だけでなく、何百万台もの iPhone や iPad でも利用することができません。

Theora Cookbook は、 Theora と、その中で使用される Ogg コンテナー形式について、さらなる詳細を提供しています。

|  |  |
| --- | --- |
| 対応しているビットレート | 2 Gbps まで |
| 対応しているフレームレート | 任意。 0 以外の任意の値に対応しています。フレームレートは、非整数のフレームレートを許容するために、 32 ビットの分子と 32 ビットの分母として指定されます。 |
| 圧縮 |
 非可逆の
 DCT ベースのアルゴリズム |
| 対応しているフレームサイズ | 最大 1,048,560 x 1,048,560 ピクセルまでで、幅と高さの組み合わせは自由です。 |
| 対応しているカラーモード | Y'CbCr with 4:2:0, 4:2:2, 4:4:4 玄間サンプリングで、 8 ビット/成分 |
| HDR 対応 | なし |
| 可変フレームレート (VFR) 対応 | あり
Theora は単一のストリーム内での可変フレームレート (VFR) に対応していませんが、単一のファイル内で複数のストリームを連結することができ、それぞれに独自のフレームレートがあるため、実質的に VFR が可能です。しかし、フレームレートを頻繁に変更する必要がある場合、これは非現実的です。 |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| Theora 対応 | 3 | あり | 3.5 | なし | 10.5 | なし |

 Edge は Theora にオプションの
 Web Media Extensions
 アドオンで対応しています。
  |
| コンテナーの対応 | Ogg |
| RTP (en-US) /
 WebRTC 互換
  | なし |
| サポート/管理組織 | Xiph.org |
| 仕様書 | https://www.theora.org/doc/ |
| ライセンス | ロイヤリティや他にもライセンスが必要なものはなく、オープンでフリーです。 |

### VP8

**Video Processor 8** (**VP8**) コーデックは、当初 On2 Technologies 社によって作成されました。 On2 の購入に従うことで、 Google は関連する特許を行使しないことを約束し、オープンかつロイヤリティフリーの動画形式として VP8 をリリースしました。品質と圧縮率の点で、 VP8 は AVC に匹敵します。

ブラウザーが対応している場合、 VP8 ではアルファチャンネルを持つ動画を再生でき、それぞれのピクセルのアルファ成分で指定した程度まで背景が透けて見えるようにすることができます。

 VP8 のブラウザーの対応は、 HTML コンテンツ、特に WebM ファイル内では良好です。
 このため、 VP8 はコンテンツの有力な候補となりますが、利用できるのであれば VP9 がより望ましい選択となります。
 ウェブブラウザーは、 WebRTC のために VP8 に対応している必要がありますが、対応しているすべてのブラウザーが HTML の audio おｙび video 要素で VP8 に対応しているわけではありません。

|  |  |
| --- | --- |
| 対応しているビットレート | 任意。レベルによる制限を行わない限り、最大値はありません。 |
| 対応しているフレームレート | 任意 |
| 圧縮 |
 非可逆の
 DCT ベースのアルゴリズム |
| 対応しているフレームサイズ | 最大 16,384 x 16,384 ピクセル |
| 対応しているカラーモード | Y'CbCr が 4:2:0 のクロマサブサンプリングで、 8 ビット/成分です。 |
| HDR 対応 | なし |
| 可変フレームレート (VFR) 対応 | あり |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| VP8 対応 | 25 | 14 | 4 | 9 | 16 | 12.1 |
| MSE の互換性 |  |  | あり |  |  |  |

Edge が VP8 に対応するには、 Media Source Extensions のpしようが必要です。
macOS: Safari 14.1 では、WebRTC、MSE、 video 要素で VP8 に対応しています。Safari 12.2 は、 WebRTC 接続の VP8 のみに対応しています。
iOS: Safari 12.1 以降 では、 WebRTC 接続時のみ VP8 に対応しています。
Firefox は H.264 ハードウェアデコーダが利用できない場合のみ、MSE で VP8 に対応します。利用できるかどうかを調べるには `MediaSource.isTypeSupported()` を使用してください。 |
| コンテナーの対応 | 3GP,
 Ogg,
 WebM |
| RTP (en-US) /
 WebRTC 互換
  | はい。 VP8 は WebRTC の仕様に必要なコーデックのひとつです。 |
| サポート/管理組織 | Google |
| 仕様書 | RFC 6386 |
| ライセンス | ロイヤリティや他にもライセンスが必要なものはなく、オープンでフリーです。 |

### VP9

**Video Processor 9** (**VP9**) は、Google が開発した古い VP8 標準の後継規格です。
 VP8 と同様に、 VP9 は完全にオープンでロイヤルティフリーです。
 VP9 のエンコーダーとデコードの性能は、AVC と同等かやや高速ですが、品質はより優れています。
 VP9 でエンコードされた動画の品質は、同程度のビットレートであれば HEVC と同等です。

 VP9 のメインプロファイルは、 4:2:0 のクロマサブサンプリングレベルで 8 ビット色深度のみに対応していますが、そのプロファイルは、より深い色とクロマサブサンプリングモードのフルレンジに対応するために記載されています。
 また、複数の HDR 実装に対応しており、フレームレート、アスペクト比、フレームサイズを自由に選択することができます。

 VP9 はブラウザーで広く対応しており、このコーデックのハードウェア実装はかなり一般的になっています。
 VP9 は WebM で義務づけられている 2 つの動画コーデックのうちの 1 つです（他にも VP8 があります）。
 ただし、 WebM と VP9 の Safari 対応はバージョン 14.1 でしか導入されていないので、 VP9 を使用することを選んだ場合は、iPhone、iPad、Mac ユーザー向けに AVC や HEVC などのフォールバック形式を提供することを検討してください。

 VP9 は、WebM コンテナーを使用することができる（そして、必要なときにフォールバック動画を提供することができる）場合に、良い選択肢となります。
 独占的なコーデックではなく、オープンなコーデックを使用したい場合は、特にそうです。

|  |  |
| --- | --- |
| 対応しているビットレート | 任意。レベルによる制限がない限り、最大値はありません。 |
| 対応しているフレームレート | 任意。 |
| 圧縮 |
 Lossy
 DCT ベースのアルゴリズム |
| 対応しているフレームサイズ | Up to 65,536 x 65,536 pixels |
| 対応しているカラーモード |

| プロファイル | 色深度 | 色のサブサンプリング |
| --- | --- | --- |
| Profile 0 | 8 | 4:2:0 |
| Profile 1 | 8 | 4:2:0, 4:2:2, 4:4:4 |
| Profile 2 | 10 ～ 12 | 4:2:0 |
| Profile 3 | 10 ～ 12 | 4:2:0, 4:2:2, f:4:4 |

 対応している色空間:
 Rec. 601、
 Rec. 709、
 Rec. 2020、
 SMPTE C、 SMPTE-240M
 （廃止、Rec. 709 で置き換え）、
 sRGB
 |
| HDR 対応 |
 あり。 HDR10+, HLG,
 PQ |
| 可変フレームレート (VFR) 対応 | あり |
| ブラウザーの互換性 |

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| VP9 support | 29 | 14 | 28 | なし | 10.6 | 14 (macOS), 15 (iOS) |
| MSE の互換性 |  |  | あり |  |  | 14 (macOS 11.3+), 15 (iOS) |

Firefox は、H.264 ハードウェアデコーダーが利用できない場合にのみ、MSE で VP8 に対応します。`MediaSource.isTypeSupported()` を使用して、利用できるかどうかを調べてください。* Safari 14: (macOS, iOS) は、 WebRTC 用 のW ebM で VP9 に対応しています。
* Safari 14: (macOS) は VP9 に MSE によって MacOS 11.3 から対応しています。
* Safari 14.1: (macOS) は、 VP9 映像トラックを格納した WebM ファイルに「どこでも」対応しています。
* Safari 15: (macOS) は、 VP9 に WebM で MSE によって対応しています。
 |
| コンテナーの対応 | MP4,
 Ogg,
 WebM |
| RTP (en-US) / WebRTC 互換 | あり |
| サポート/管理組織 | Google |
| 仕様書 | https://www.webmproject.org/vp9/ |
| ライセンス | オープンで、ロイヤリティフリーで、他のライセンスも必要ありません。 |

動画コーデックの選び方
-----------

どのコーデックを使用するかは、自分自身で準備をするための一連の質問から始めることになります。

* オープンな形式を使用したいですか、それとも独占的な形式も検討しますか？
* それぞれの動画に複数の形式を作成するためのリソースがありますか？代替オプションが提供できれば、意思決定プロセスが大幅に簡素化されます。
* 互換性を犠牲にしてもよいブラウザーはありますか？
* 対応する必要があるウェブブラウザーの最も古いバージョンは何ですか？例 えば、過去 5 年間に出荷されたすべてのブラウザーで作業する必要があるでしょうか、それとも過去 1 年間のものだけでよいでしょうか。

下記の項では、具体的な用途に応じた推奨コーデックの選択を提示します。それぞれの用途について、最大で 2 つの推奨コーデックを紹介します。使用例に最適と思われるコーデックが独占的であったり、ロイヤリティの支払いが必要な場合は、 2 つの選択肢を示しています。第 1 の選択肢は、オープンでロイヤリティフリーのもので、その後は独占的なものです。

それぞれの動画の単一のバージョンしか提供できない場合は、ニーズに合わせて最適な形式を選べます。第 1 の選択肢は、品質と、パフォーマンスと、互換性の良い組み合わせであるため推奨されます。第 2 の選択肢は、品質や、パフォーマンスや、サイズをある程度犠牲にして、最も広範な互換性のある選択肢となります。

### 普段使いの動画におすすめ

まず、ブログ、情報サイト、動画が製品のデモに使用される（ただし、動画自体が製品であるわけではない）中小企業のウェブサイトなど、一般的なウェブサイトで表示される動画に最適なオプションを見てみましょう。

1. **WebM** コンテナーで、動画には **VP9** コーデック、音声には **Opus (en-US)** コーデックを使用する方法。これらはすべてオープンでロイヤリティフリーの形式で、対応が進んでいますが、かなり最近のブラウザーでしか対応していませんので、フォールバックを使用するといいでしょう。

```html
<video controls src="filename.webm"></video>
```

2. **MP4** コンテナーで、動画には **AVC** (**H.264**) コーデック、音声には **AAC (en-US)** コーデックが理想的です。これは、 MP4 コンテナー、 AVC および AAC コーデックの組み合わせが、すべての主要なブラウザーで広く対応しているためで、その品質は、ほとんどの用途で一般的に良好です。ただし、ライセンス要件に準拠していることを確認してください。

```html
<video controls>
  <source type="video/webm" src="filename.webm" />
  <source type="video/mp4" src="filename.mp4" />
</video>
```

**メモ:** `<video>` 要素は、その中に `<source>` 要素があってもなくても、閉じタグの `</video>` が必要です。

### 高画質な動画表示におすすめ

可能な限り最高の品質で動画を表示することを使命とする場合、できるだけ多くの形式を提供することが好ましいと思われます。最高の品質を実現するコーデックは、最新のものである傾向があり、したがって、ブラウザーの互換性にギャップが生じる可能性が最も高くなるからです。

1. WebM コンテナーで、動画に AV1、音声に Opus を使用したもの。 AV1 をエンコードする際に、 High または Professional プロファイルを使用することができれば、 6.3 などの高いレベルで、 4K または 8K の解像度で、優れた動画品質を維持したまま、非常に高いビットレートを取得することが可能です。 Opus の Fullband プロファイルを使用して音声を 48kHz のサンプルレートでエンコードすると、取り込める音声帯域が最大になり、人間の可聴域であるほぼすべての周波数帯域を取り込むことができます。

```html
<video controls src="filename.webm"></video>
```

2. MP4 コンテナーで、 HEVC コーデックを使用した 10 ビットまたは 12 ビット色深度のメイン 4:2:2、あるいはコンポーネントあたり最大 16 ビットのメイン 4:4:4 プロファイルなど、高度なメインプロファイルのいずれかを使用しているもの。高ビットレートでは、色再現性の高い優れたグラフィック品質を提供します。さらに、オプションで HDR メタデータを記載することで、ハイダイナミックレンジの動画を提供することも可能です。音声については、高いサンプルレート（最低でも 48kHz、理想的には 96kHz）で AAC コーデックを使用し、高速エンコードではなく、複雑なエンコードで使用されます。

```html
<video controls>
  <source type="video/webm" src="filename.webm" />
  <source type="video/mp4" src="filename.mp4" />
</video>
```

### アーカイブ、編集、リミックスにおすすめ

現在、ウェブブラウザーで一般に利用できる可逆圧縮動画コーデック、あるいは可逆圧縮に近い動画コーデックさえありません。その理由は単純で、動画は巨大だからです。可逆圧縮は、非可逆圧縮よりも効果が低いという定義があります。例えば、非圧縮の 1080p 動画（1920 × 1080 ピクセル）で 4:2:0 のクロマサブサンプリングを行う場合、少なくとも 1.5Gbps が必要です。 FFV1 （ウェブブラウザーの対応なし）のような可逆圧縮を使用すると、コンテンツにもよりますが、おそらく 600Mbps 程度に縮小することができます。それでも、 1 秒間に接続するビット数は膨大であり、現在のところ実際の使用には適しません。

たとえ一部の非可逆圧縮コーデックに可逆圧縮モードが利用できても、これは事実です。可逆圧縮モードは、現在のどのウェブブラウザーにも実装されていません。最善なのは、非可逆圧縮を使用する高品質のコーデックを選択し、可能な限り圧縮を行わないように設定することです。これを行う 1 つの方法は、コーデックが「高速」圧縮を使用するように設定することです。これは、本質的に、圧縮がより少なく行われることを意味します。

#### 動画を外部に準備する

ウェブサイトやアプリの外部からアーカイブ用に動画を準備するには、元の非圧縮動画データに対して圧縮を行うユーティリティを使用します。例えば、無料の x264 ユーティリティは、非常に高いビットレートを使用して AVC 形式で動画をエンコードするために使用できます。

```bash
x264 --crf 18 -preset ultrafast --output outfilename.mp4 infile
```

他のコーデックは、動画を大幅に圧縮した場合、最良の品質レベルを持つことができますが、それらのエンコーダーは十分に遅い傾向があり、この圧縮で取得するほぼ無損失のエンコーディングは、ほぼ同じ全体の品質レベルで圧倒的に速くなります。

#### 動画撮影

可逆圧縮にどれだけ近づけることができるかという制約を考えると、AVC や AV1 を使用することを考えることができます。例えば、MediaStream 収録 API を使用して動画を記録する場合、 `MediaRecorder` オブジェクトを作成する際に、以下のようなコードを使用することができます。

```js
const kbps = 1024;
const Mbps = kbps \* kbps;

const options = {
  mimeType: 'video/webm; codecs="av01.2.19H.12.0.000.09.16.09.1, flac"',
  bitsPerSecond: 800 \* Mbps,
};

let recorder = new MediaRecorder(sourceStream, options);
```

この例では `MediaRecorder` を作成し、 BT.2100 HDR を使用した AV1 動画を 12 ビット色で 4:4:4 クロマサブサンプリングで、音声を FLAC (en-US) の可逆圧縮で記録する設定にしています。結果として得られるファイルは、動画と音声のトラックで共有される 800Mbps 以下のビットレートを使用します。ハードウェアの性能、要件、使用する特定のコーデックに応じて、これらの値を調整する必要がある可能性があります。このビットレートは明らかにネットワーク伝送には現実的でなく、ローカルにのみ使用されるでしょう。

`codecs` 引数の値をドットで区切られたプロパティに分解すると、以下のようになります。

| 値 | 説明 |
| --- | --- |
| `av01` | 4 文字のコード (4CC) の指定で、 AV1 コーデックを識別する。 |
| `2` | プロファイルを示します。値 2 は Professional プロファイルを示します。値 1 は High プロファイル、値 0 は Main プロファイルを指定します。 |
| `19H` | レベルと階層です。この値は AV1 仕様書の A.3 節の表からきており、レベル 6.3 の高次の階層を示します。 |
| `12` | 色深度。 1 成分あたり 12 ビットを示します。他に使用可能な値は 8 と 10 ですが、 AV1 では 12 が最も精度の高い色表現となります。 |
| `0` | モノクロモードフラグ。 1 の場合、クロマプレーンは記録されず、すべてのデータは厳密にルマデータとなり、グレイスケールの画像となります。ここでは色をつけたいので 0 を指定します。 |
| `000` | AV1 仕様書の 6.4.2 節からきたクロマサブサンプリングモード。値 000 は、モノクロモード値 0 と組み合わせて、 4:4:4 クロマサブサンプリング、または色データの損失がないことを示します。 |
| `09` | 使用する色のプライマリー。この値は AV1 仕様書の 6.4.2 節で定められています。 9 は、 HDR に使用される BT.2020 色を使用したいことを示します。 |
| `16` | 使用する撮像素子特性。同様に 6.4.2 節で定められています。 16 は、 BT.2100 PQ 色の特性を使用することを示します。 |
| `09` | これも 6.4.2 節にある、使用する行列係数。値 9 は、可変輝度の BT.2020 を使用することを指定します。これは、 BT.2010 YbCbCr としても有益なものです。 |
| `1` | 動画の「フルレンジ」フラグ。 1 の値は、全色範囲を使用することを示す。 |

コーデック選択のための文書は、おそらく `codecs` 引数を作成するときに使用する情報を提供してくれるでしょう。

関連情報
----

* ウェブ音声コーデックガイド (en-US)
* メディアコンテナー形式（ファイル形式）
* ウェブコンテンツにおけるメディア対応に関する問題の扱い (en-US)
* WebRTC で使用されるコーデック (en-US)
* RFC 6381: The "Codecs" and "Profiles" parameters for "Bucket" media types
* RFC 5334: Ogg Media Types
* RFC 3839: MIME Type Registrations for 3GPP Multimedia Files
* RFC 4381: MIME Type Registrations for 3GPP2 Multimedia Files
* RFC 4337: MIME Type Registrations for MPEG-4
* Video codecs in Opera
* Internet Explorer における動画と音声のコーデック
* Video and audio codecs in Chrome