recursal/MDN huggingface dataset:
おわりに
====

* « 前のページ

おめでとうございます。キャンバスのチュートリアルは終了です。この知識は、ウェブ上で素晴らしい二次元グラフィックを作るのに役立ちます。

他の例とチュートリアル
-----------

ここでは様々なデモや、更なるキャンバスについての例を紹介します。

Codepen.io

ブラウザー上のフロントエンド開発者向けのプレイグラウンドとコードエディターです。

HTML5 Canvas Tutorials

キャンバス API の例です。

Game development

ゲームは最も人気な活動の一つです。標準に準拠したウェブブラウザーで実行できる、より良くより強力なゲームを開発するための新しい技術が定期的に登場しています。

その他の Web API
------------

これらの API は、キャンバスやグラフィックをさらに扱う際に役立つかもしれません。

WebGL

複雑なグラフィックや三次元を含んだレンダリングのための高度な API です。

SVG

Scalable Vector Graphics は、画像をベクター（線）と図形の集合で表現することで、描画サイズに関わらず滑らかに拡大縮小できるようにしたものです。

Web Audio

Web Audio API は、ウェブ上の音声を制御するための強力で多用途なシステムを提供し、開発者は音声ソースの選択、音声へのエフェクトの追加、音声視覚化の作成、空間効果（パンニングなど）の適用などを行うことができるようになります。

質問
--

Stack Overflow

"html5-canvas" とタグ付けされた質問です。

Comments about this tutorial – the MDN documentation community

このチュートリアルについて何かコメントや感謝の言葉がありましたら、お気軽にご連絡ください。

* « 前のページ
合成とクリッピング
=========

* « 前のページ
* 次のページ »

これまでの例ではすべて、図形は、常に 1 つずつ重ねて描かれていました。これはほとんどの状況において十分すぎるほど適切ですが、複合図形の構築順序が制限されます。しかし、 `globalCompositeOperation` プロパティを設定することで、この動作を変更することができます。さらに、 `clip` プロパティによって、シェイプの不要な部分を隠すことができます。

`globalCompositeOperation`
--------------------------

既存の図形の背後に新しい図形を描画できるだけでなく、特定の領域をマスクしたり、キャンバスの一部を消去したり（`clearRect()` メソッドのように矩形に限定しない）、その他にも使用することが可能です。

`globalCompositeOperation = type`

これは、新しい図形を描くときに適用する合成処理の種類を設定します。 type は、 12 種類の合成処理から使用するものを特定する文字列です。

以下の例のコードについては、合成の例をご覧ください。

クリッピングパス
--------

クリッピングパスは通常のキャンバスの図形に似ていますが、図形の不要な部分を隠すマスクとして作用します。これを以下の画像で視覚化しました。赤い星型の図形は、クリッピングパスです。このパスの外側にあるものはすべて、キャンバスで描画されません。

![](/ja/docs/Web/API/Canvas_API/Tutorial/Compositing/canvas_clipping_path.png)

クリッピングパスと先ほどの `globalCompositeOperation` プロパティを比較すると、おおむね同じ効果をもたらす合成モードとして `source-in` と `source-atop` の 2 つがあることがわかります。これら 2 つとのもっとも重要な違いは、クリッピングパスは実際にキャンバスに描かれるものではないことと、クリッピングパスは新しい図形による影響を受けないことです。これは制限された領域に複数の図形を描くという、クリッピングパスの目標を表しています。

図形の描画の章では `stroke()` および `fill()` メソッドのみに言及しましたが、パスを扱う第 3 のメソッドとして `clip()` があります。

`clip()` (en-US)

現在構築しているパスを、現在のクリッピングパスに変換します。

`closePath()` の代わりに `clip()` を使用すると、パスの輪郭を描いたり塗りつぶすのではなく、パスを閉じてクリッピングパスに変換します。

既定で `<canvas>` 要素には、キャンバス自体とまったく同じ大きさのクリッピングパスが存在します。言い換えると、クリッピングは行われません。

### `clip` の例

この例では、ランダムな星の集団の描画先を特定の領域に制限するために、円形のクリッピングパスを使用しています。


```js
function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.fillRect(0, 0, 150, 150);
  ctx.translate(75, 75);

  // 円形のクリッピングパスを作成
  ctx.beginPath();
  ctx.arc(0, 0, 60, 0, Math.PI \* 2, true);
  ctx.clip();

  // 背景を描く
  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
  lingrad.addColorStop(0, "#232256");
  lingrad.addColorStop(1, "#143778");

  ctx.fillStyle = lingrad;
  ctx.fillRect(-75, -75, 150, 150);

  // 星を描く
  for (var j = 1; j < 50; j++) {
    ctx.save();
    ctx.fillStyle = "#fff";
    ctx.translate(
      75 - Math.floor(Math.random() \* 150),
      75 - Math.floor(Math.random() \* 150),
    );
    drawStar(ctx, Math.floor(Math.random() \* 4) + 2);
    ctx.restore();
  }
}

function drawStar(ctx, r) {
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(r, 0);
  for (var i = 0; i < 9; i++) {
    ctx.rotate(Math.PI / 5);
    if (i % 2 === 0) {
      ctx.lineTo((r / 0.525731) \* 0.200811, 0);
    } else {
      ctx.lineTo(r, 0);
    }
  }
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}
```


```
<canvas id="canvas" width="150" height="150"></canvas>
```


```
draw();
```


コードの始めの数行で、背景としてキャンバスと同サイズの黒い背景を描いて、原点を中央に移動します。次に、円弧を描いて `clip()` を呼び出すことで、円形のクリッピングパスを作成します。クリッピングパスは、キャンバスの状態として保存されるもののひとつでもあります。元のクリッピングパスを維持したい場合は、新しいクリッピングパスを作成する前に保存したキャンバスの状態があるとよいでしょう。

クリッピングパスを作成した後に描いたものはすべて、パスの内部にあるものだけが見える状態になります。これは、次に描いている線形グラデーションで明らかです。この後に独自の `drawStar()` 関数を使用して、位置や大きさがランダムな星を 50 個描きます。星もまた、クリッピングパスの内部で定義されたものしか見えません。

| Screenshot | Live sample |
| --- | --- |
|  |  |

* « 前のページ
* 次のページ »
ExtendableEvent.waitUntil()
===========================

**`ExtendableEvent.waitUntil()`** メソッドは、作業が進行中であることをイベントディスパッチャーに通知します。 また、その作業が成功したかどうかを検出するためにも使用できます。 サービスワーカーの場合、 `waitUntil()` は、プロミスが決定するまで作業が進行中であることをブラウザーに通知し、サービスワーカーがその作業を完了させたい場合にサービスワーカーを終了させません。

サービスワーカーの `install` イベントは、 `waitUntil()` を使用して、タスクが完了するまでサービスワーカーをインストール中 (`installing`) の段階に保持します。 `waitUntil()` に渡されたプロミスが拒否された場合、インストールは失敗と見なされ、インストール中のサービスワーカーは破棄されます。 これは主に、依存するすべてのコアキャッシュが正常に読み込まれるまで、サービスワーカーがインストール済み (installed) と見なされないようにするために使用します。

サービスワーカーの `activate` イベントは、`waitUntil()` を使用して、`waitUntil()` に渡されたプロミスが解決するまで、`fetch` や `push` などの機能イベントをバッファリングします。 これにより、サービスワーカーはデータベーススキーマを更新し、古いキャッシュを削除する時間を確保できるため、他のイベントは完全にアップグレードされた状態に依存できます。

`waitUntil()` メソッドは、最初はイベントコールバック内で呼び出す必要がありますが、その後、すべてのプロミスが解決するまで、複数回呼び出すことができます。

**メモ:** 上記の段落で説明した動作は、 Firefox 43 で修正されました（Firefox バグ 1180274 を参照）。

構文
--


```js
waitUntil(promise)
```

### 引数

`Promise` です。

### 返値

なし (`undefined`)。

例
-

サービスワーカーの `install` イベント内で `waitUntil()` を使用します。


```js
addEventListener("install", (event) => {
  const preCache = async () => {
    const cache = await caches.open("static-v1");
    return cache.addAll(["/", "/about/", "/static/styles.css"]);
  };
  event.waitUntil(preCache());
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-extendableevent-waituntil |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカーの使用
* ServiceWorker の準備はできていますか？（英語）
* `Promise`
ExtendableEvent()
=================

**`ExtendableEvent()`** コンストラクターは、新しい `ExtendableEvent` オブジェクトを作成します。

構文
--


```js
new ExtendableEvent(type)
new ExtendableEvent(type, options)
```

### 引数

`type`

文字列で、このイベントの名前を指定します。大文字小文字を区別します。

`options` 省略可

*`Event()` で定義されるプロパティに加え*、イベントオブジェクトに適用したい任意のカスタム設定を含むことができるオブジェクトです。
 現在、使用可能なオプションは必須ではありませんが、これは異なる形の派生イベント間で前方互換性を保つために定義されています。


### 返値

新しい `ExtendableEvent` オブジェクト。

仕様書
---

| Specification |
| --- |
| Service Workers # dom-extendableevent-extendableevent |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* ServiceWorker の準備はできていますか？（英語）
* `Promise`
* ウェブワーカーの使用
SyncEvent.SyncEvent()
=====================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`SyncEvent()`** コンストラクタは、新規の `SyncEvent` オブジェクトを作成します。

構文
--
```

var mySyncEvent = new SyncEvent(type, init)
```

### パラメータ

*type*

イベントの型。.

*init* 省略可

イベントオブジェクトに適用するカスタム設定を含むオプションオブジェクト。オプションは次の通りです:

* `tag`: この `SyncEvent` の開発者が定義した一意の識別子。
* `lastChance`: `Boolean` は、現在の試行後にユーザーエージェントが同期の試行をこれ以上行わないことを示しています。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SyncEvent.lastChance
====================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`SyncEvent` インターフェイスの **`SyncEvent.lastChance`** 読み取り専用プロパティは、現在の試行後にユーザーエージェントが同期を試行しない場合に `true` を返します。 これは、 `SyncEvent()` コンストラクタの `lastChance` パラメータに渡される値です。

構文
--
```

var lastChance = SyncEvent.lastChance
```

### 値

`Boolean` は、現在の試行の後にユーザーエージェントがこれ以上同期を試行しないかどうかを示します。

仕様
--

| 仕様 |
| --- |
| Web Background Synchronization |

ブラウザー実装状況
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SyncEvent.tag
=============

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`SyncEvent` インターフェイスの **`SyncEvent.tag`** 読み取り専用プロパティは、この `SyncEvent` の開発者定義の識別子を返します。これは、 `SyncEvent()` コンストラクタの `tag` パラメータで渡される値です。

構文
--
```

var tag = SyncEvent.tag
```

### 値

この `SyncEvent` の開発者定義の識別子。

仕様
--

| Specification |
| --- |
| Web Background Synchronization # ref-for-dom-syncevent-tag |

ブラウザー実装状況
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FileSystemFileEntry.createWriter()
==================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

`FileSystemFileEntry` インターフェイスの **`createWriter()`** メソッドは、ディレクトリー項目によって表現されるファイルにデータを書き込むために使用します。

構文
--


```js
createWriter(successCallback);
createWriter(successCallback, errorCallback);
```

### 引数

`successCallback`

`FileWriter` が正常に作成されたときに呼び出されるコールバック関数です。 `FileWriter` はコールバック関数の唯一の引数として渡されます。

`errorCallback` 省略可

指定する場合は `FileWriter` を作成しようとしたときにエラーが発生したときに呼び出されるメソッドでなければなりません。このコールバック関数は、エラーを記述した `FileError` オブジェクトを入力として受け取ります。

### 返値

なし (`undefined`)。

例
-

この例では、渡されたディレクトリー項目に対応するファイルに文字列を出力する `writeToFileEntry()` メソッドを用意しています。


```js
function writeToFileEntry(entry, text) {
  entry.createWriter(
    function (fileWriter) {
      let data = Blob([text], { type: "text/plain" });

      fileWriter.write(data);
    },
    function (fileError) {
      /\* do whatever to handle the error \*/
    },
  );
}
```


`createWriter()` の呼び出しの成功コールバック関数は、渡されたテキストを受け取り、渡されたテキストを含む新しい `Blob` オブジェクトを `text/plain` 型で作成します。この Blob は、ファイルに書き込むために `FileWriter` オブジェクトに出力されます。

仕様書
---

この機能はもうどの仕様にも含まれていません。標準化される予定もありません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ファイルとディレクトリー項目 API
* ファイルとディレクトリー項目 API の紹介
FileSystemFileEntry.file()
==========================

`FileSystemFileEntry` インターフェイスの **`file()`** メソッドは、子のディレクトリー項目が表現しているファイルからデータを読むために使用できる `File` オブジェクトを返します。

構文
--


```js
file(successCallback);
file(successCallback, errorCallback);
```

### 引数

`successCallback`

コールバック関数で、 `File` が正常に作成されたときに呼び出されます。コールバックには、唯一の引数として `File` が渡されます。

`errorCallback` 省略可

指定された場合、 `File` を作成しようとしてエラーが発生したときに呼び出されるメソッドである必要があります。このコールバックは、エラーを記述した `DOMException` オブジェクトを入力として受け取ります。

### 返値

なし (`undefined`)。

例
-

この例ではメソッド `readFile()` を作成し、テキストファイルを読み込み、読み込みが完了すると、指定されたコールバック関数を受け取ったテキスト（文字列）つきで呼び出します。エラーが発生した場合は、指定された（オプションの）エラーコールバック関数が呼び出されます。


```js
function readFile(entry, successCallback, errorCallback) {
  entry.file(function (file) {
    let reader = new FileReader();

    reader.onload = function () {
      successCallback(reader.result);
    };

    reader.onerror = function () {
      errorCallback(reader.error);
    };

    reader.readAsText(file);
  }, errorCallback);
}
```


この関数は `file()` を呼び出し、その成功コールバックとして `FileReader` を使ってファイルをテキストとして読み込むメソッドを指定します。 FileReader の `load` イベントハンドラーは、読み込んだ文字列を `readFile()` メソッドが呼ばれたときに指定した `successCallback` に渡すようにセットアップされています。同様に、`error` ハンドラーは、指定された `errorCallback` を呼び出すようにセットアップされます。

仕様書
---

| Specification |
| --- |
| File and Directory Entries API # dom-filesystemfileentry-file |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ファイルとディレクトリー項目 API
* ファイルとディレクトリー項目 API の紹介
HTMLMediaElement.paused
=======================

**`HTMLMediaElement.paused`** プロパティは読み取り専用で、メディア要素が一時停止しているかどうかを示します。

値
-

論理値です。 `true` は一時停止中で、`false` は一時停止していません。

例
-


```js
const obj = document.createElement("video");
console.log(obj.paused); // true
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-paused-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
HTMLMediaElement.src
====================

**`HTMLMediaElement.src`** プロパティは、 HTML のメディア要素の `src` 属性の値を反映します。これは、要素で使用するメディアリソースの URL を示します。

**メモ:** この要素が現在実際に使用しているメディアリソースの URL を知る最善の方法は、`currentSrc` 属性の値を調べることです。 これは、（`<source>` 要素を表す）`HTMLSourceElement` で提供されるリストからの最良または優先メディアリソースの選択も考慮されます。

値
-

文字列で、要素で使用するメディアリソースの URL を表します。このプロパティは HTML 要素の `src` 属性の値を反映します。

例
-


```js
const obj = document.createElement("video");
console.log(obj.src); // ""
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-src |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
HTMLMediaElement: loadeddata イベント
=================================

**`loadeddata`** イベントは、メディアの現在の再生位置のフレームの読み込みが完了したときに発生します。ふつうは最初のフレームです。

**メモ:** なお、このイベントはモバイルやタブレットにおいて、ブラウザーの設定でデータセーバーがオンになっていると発生しません。

構文
--

このイベントを `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("loadeddata", (event) => {});

onloadeddata = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

これらの例では、 HTMLMediaElement の `loadeddata` イベントにイベントリスナーを追加し、イベントが発生してイベントハンドラーが動作したときにメッセージを投稿します。

`addEventListener()` を使用する場合:


```js
const video = document.querySelector("video");

video.addEventListener("loadeddata", (event) => {
  console.log(
    "Yay! The readyState just increased to " +
      "HAVE\_CURRENT\_DATA or greater for the first time.",
  );
});
```


`onloadeddata` イベントハンドラープロパティを使用する場合:


```js
const video = document.querySelector("video");

video.onloadeddata = (event) => {
  console.log(
    "Yay! The readyState just increased to " +
      "HAVE\_CURRENT\_DATA or greater for the first time.",
  );
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-loadeddata |
| HTML Standard # handler-onloadeddata |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
HTMLMediaElement.duration
=========================

`HTMLMediaElement` の読み取り専用プロパティ **`duration`** は、この要素のメディアの長さを秒単位で表します。

値
-

メディアの再生時間を秒単位で示す倍精度浮動小数点値。メディアデータがない場合、値 `NaN` を返します。ライブメディアストリームのように、要素のメディアの再生時間が不明な場合、 `duration` の値は `+Infinity` となります。

例
-


```js
const obj = document.createElement("video");
console.log(obj.duration); // NaN
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-duration-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブメディア技術
* `HTMLMediaElement.currentTime`: メディアの現在の再生位置
* `<audio>` および `<video>` 要素
HTMLMediaElement: ended イベント
============================

`ended` イベントは、メディアの終わりに達したため、またはそれ以上利用できるデータがないために再生またはストリーミングが停止したときに発生します。

このイベントは、 `HTMLMediaElement`（`<audio>` および `<video>`）においてメディアの再生がメディアの最後に到達して終了した時に、 `ended` が発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベントを `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("ended", (event) => {});

onended = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

これらの例では、`HTMLMediaElement` の `ended` イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

`addEventListener()` を使用する場合:


```js
const video = document.querySelector("video");

video.addEventListener("ended", (event) => {
  console.log(
    "1）動画が終了した、または 2）それ以上データがない" +
      "ため、動画が停止しました。",
  );
});
```


`onended` イベントハンドラープロパティを使用する場合:


```js
const video = document.querySelector("video");

video.onended = (event) => {
  console.log(
    "1）動画が終了した、または 2）それ以上データがない" +
      "ため、動画が停止しました。",
  );
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-ended |
| HTML Standard # handler-onended |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
* メディアキャプチャとストリーム
    + メディアキャプチャとストリーム: ended イベント
* ウェブオーディオ API
    + ウェブオーディオ API: ended イベント
HTMLMediaElement.sinkId
=======================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`HTMLMediaElement.sinkId`** は読み取り専用プロパティで、出力を配信する音声機器の固有の ID である文字列を返します。ユーザーエージェントの既定で使用されている場合は、空文字列を返します。この ID は `MediaDevices.enumerateDevices()`、`id-multimedia`、`id-communications` から返される値のいずれかである必要があります。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| Audio Output Devices API # dom-htmlmediaelement-sinkid |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLMediaElement: suspend イベント
==============================

`suspend` イベントは、メディアデータの読み込みが中断されたときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベントを `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("suspend", (event) => {});

onsuspend = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

これらの例では、`HTMLMediaElement` の `suspend` イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

`addEventListener()` を使用する場合:


```js
const video = document.querySelector("video");

video.addEventListener("suspend", (event) => {
  console.log("データの読み込みが中断されました。");
});
```


`onsuspend` イベントハンドラープロパティを使用する場合:


```js
const video = document.querySelector("video");

video.onsuspend = (event) => {
  console.log("データの読み込みが中断されました。");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-suspend |
| HTML Standard # handler-onsuspend |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
* ウェブオーディオ API
HTMLMediaElement.videoTracks
============================

**`videoTracks`** は `HTMLMediaElement` オブジェクトの読み取り専用プロパティで、メディア要素の動画トラックを表すすべての `VideoTrack` オブジェクトを列挙した `VideoTrackList` オブジェクトを返します。

返されたリストは*生きて*います。つまり、トラックがメディア要素に追加されたり取り除かれたりすると、リストの内容は動的に変化します。 リストへの参照を取得したら、新しい動画トラックが追加されたのか既存のトラックが取り除かれたのかを検出するために変更を監視できます。 メディア要素のトラックリストへの変更を監視する方法の詳細については、VideoTrackList のイベントを参照してください。

値
-

メディア要素に含まれる動画トラックのリストを表す `VideoTrackList` オブジェクト。 トラックのリストは、配列記法や、オブジェクトの `getTrackById()` メソッドを使ってアクセスできます。

各トラックは、トラックに関する情報を提供する `VideoTrack` オブジェクトによって表されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-videotracks-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
* `<video>`
* `VideoTrack` および `VideoTrackList`
HTMLMediaElement.setSinkId()
============================

**`HTMLMediaElement.setSinkId()`** メソッドは、出力に使用するオーディオ機器の ID を設定し、 `Promise` を返します。
 これは、アプリケーションが指定された機器を使用することを許可されている場合にのみ動作します。

構文
--


```js
setSinkId(sinkId)
```

### 引数

`sinkId`

オーディオ出力機器の `MediaDeviceInfo.deviceId` です。

### 返値

`Promise` で、 `undefined` に解決します。

### 例外

`NotAllowedError` `DOMException`

`speaker-selection` 許可ポリシーが音声出力の使用をブロックするために使用された場合に返されます。

`NotFoundError` `DOMException`

`deviceId` がどの音声機器にも一致しない場合に返されます。

`AbortError` `DOMException`

音声出力機器から新しい音声機器への切り替えに失敗した場合に返されます。

例
-


```js
const devices = await navigator.mediaDevices.enumerateDevices();
const audioDevice = devices.find((device) => device.kind === "audiooutput");
const audio = document.createElement("audio");
await audio.setSinkId(audioDevice.deviceId);
console.log(`Audio is being played on ${audio.sinkId}`);
```

仕様書
---

| Specification |
| --- |
| Audio Output Devices API # dom-htmlmediaelement-setsinkid |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLMediaElement: waiting イベント
==============================

`waiting` イベントは、一時的にデータが欠落したために再生が停止したときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベントを `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("waiting", (event) => {});

onwaiting = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

これらの例は、 HTMLMediaElement の `waiting` イベントのイベントリスナーを追加し、イベントの発生によりイベントハンドラーが動作したときにメッセージを登録します。

`addEventListener()` を使用する場合


```js
const video = document.querySelector("video");

video.addEventListener("waiting", (event) => {
  console.log("Video is waiting for more data.");
});
```


`onwaiting` イベントハンドラープロパティを使用する場合


```js
const video = document.querySelector("video");

video.onwaiting = (event) => {
  console.log("Video is waiting for more data.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-waiting |
| HTML Standard # handler-onwaiting |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`