recursal/MDN huggingface dataset:
HTMLMediaElement: loadedmetadata イベント
=====================================

`loadedmetadata` イベントは、メタデータが読み込まれたときに発生します。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

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

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


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

video.addEventListener("loadedmetadata", (event) => {
  console.log("メディアとトラックの長さと寸法は現在わかっています。");
});
```


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


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

video.onloadedmetadata = (event) => {
  console.log("メディアとトラックの長さと寸法は現在わかっています。");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-loadedmetadata |
| HTML Standard # handler-onloadedmetadata |

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

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>`
* このイベントは Gecko の 音声 API 拡張の一部です。
HTMLMediaElement.disableRemotePlayback
======================================

**`HTMLMediaElement.disableRemotePlayback`** プロパティは、メディア要素がリモート再生 UI を持つことを許可するかどうかを決定します。

値
-

メディア要素がリモート再生 UI を持つことができるかどうかを示す論理値。（false は「無効ではない」、すなわち「有効」を意味します）

例
-


```js
const obj = document.createElement("audio");
obj.disableRemotePlayback = true;
```

仕様書
---

| Specification |
| --- |
| Remote Playback API # the-disableremoteplayback-attribute |

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

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

関連情報
----

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

`emptied` イベントは、メディアが空になると発生します。 例えば、このイベントは、メディアがすでに読み込まれている（または部分的に読み込まれている）状態で、それを再読み込みするために `load()` メソッドを呼び出した場合に送信されます。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

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

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


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

video.addEventListener("emptied", (event) => {
  console.log("ええっと。メディアが空です。 load() を呼び出しましたか？");
});
```


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


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

video.onemptied = (event) => {
  console.log("ええっと。メディアが空です。 load() を呼び出しましたか？");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-emptied |
| HTML Standard # handler-onemptied |

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

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.buffered
=========================

**`buffered`** は `HTMLMediaElement` オブジェクトの読み取り専用プロパティで、この `buffered` プロパティがアクセスされた時点でユーザーエージェントがバッファリングしているメディアリソースの範囲があれば，それを表す新しい静的な正規化された `TimeRanges` オブジェクトを返します。

**メモ:** この機能はウェブワーカーでは利用できません。

値
-

`buffered` プロパティがアクセスされた時点で、（存在する場合）ユーザーエージェントがバッファリングしているメディアリソースの範囲を表す、新しい静的な正規化 TimeRanges オブジェクトです。

例
-


```js
const obj = document.createElement("video");
console.log(obj.buffered); // TimeRanges { length: 0 }
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-buffered-dev |
| Media Source Extensions™ # htmlmediaelement-extensions |

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

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

関連情報
----

* これを定義しているインターフェイスである `HTMLMediaElement`
HTMLMediaElement.playbackRate
=============================

**`HTMLMediaElement.playbackRate`** プロパティは、メディアが再生されるレートを設定します。これはユーザーが早送りやスローモーションなどのユーザー制御を実装するために使用されます。通常の再生レートにこの値を掛けて現在のレートが求められるため、 1.0 の値が通常の速度です。

`playbackRate` が負の数であれば、メディアは逆方向に再生されます。

音声は、逆方向の再生であったり、早送りやスロー再生が実用的な範囲を外れていた場合（例えば、 Gecko では `0.25` から `4.0` の範囲であれば）ミュートされます。

既定の設定では、音声のピッチが補正されます。ピッチ補正は `HTMLMediaElement.preservesPitch` プロパティで無効にすることができます。

値
-

`double` 値です。 `1.0` は「通常の速度」で、 `1.0` より小さければ通常より遅く、大きければ通常より早く再生されます。（**既定値:** `1.0`）

例
-


```js
const obj = document.createElement("video");
console.log(obj.playbackRate); // Expected Output: 1
```

仕様書
---

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

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

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

関連情報
----

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

`stalled` イベントは、ユーザーエージェントがメディアデータをフェッチしようとして、データが予期せずに来なかったときに発生します。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

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

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


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

video.addEventListener("stalled", (event) => {
  console.log("データのフェッチに失敗しました。");
});
```


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


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

video.onstalled = (event) => {
  console.log("データのフェッチに失敗しました。");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-stalled |
| HTML Standard # handler-onstalled |

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

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.ended
======================

**`HTMLMediaElement.ended`** は、メディア要素が再生を終了したかどうかを示します。

値
-

論理値で、要素に含まれているメディアの再生が終了した場合に `true` となります。

メディアのソースが `MediaStream` の場合、ストリームの `active` プロパティの値が `false` であれば、この値は `true` です。

例
-


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

仕様書
---

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

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

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

関連情報
----

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

**`progress`** イベントは、ブラウザーがリソースを読み込むときに定期的に発生します。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

### ライブデモ

#### HTML


```html
<div class="example">
  <button type="button">Load video</button>
  <video controls width="250"></video>

  <div class="event-log">
    <label for="eventLog">Event log:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>
```


```
.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
}

.example {
  display: grid;
  grid-template-areas:
    "button log"
    "video log";
}

button {
  grid-area: button;
  width: 10rem;
  margin: 0.5rem 0;
}

video {
  grid-area: video;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}
```


#### JavaScript


```js
const loadVideo = document.querySelector("button");
const video = document.querySelector("video");
const eventLog = document.querySelector(".event-log-contents");
let source = null;

function handleEvent(event) {
  eventLog.textContent += `${event.type}\n`;
}

video.addEventListener("loadstart", handleEvent);
video.addEventListener("progress", handleEvent);
video.addEventListener("canplay", handleEvent);
video.addEventListener("canplaythrough", handleEvent);

loadVideo.addEventListener("click", () => {
  if (source) {
    document.location.reload();
  } else {
    loadVideo.textContent = "Reset example";
    source = document.createElement("source");
    source.setAttribute(
      "src",
      "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4",
    );
    source.setAttribute("type", "video/mp4");

    video.appendChild(source);
  }
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-progress |
| HTML Standard # handler-onprogress |

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

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

関連情報
----

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

**`HTMLMediaElement.volume`** プロパティは、メディアを再生する音量を設定します。

値
-

`double` 値で 0 から 1 の間でなければなりません。 ここで、0 は効果的にミュートされ、1 が最大の可能な値です。

例
-


```js
const obj = document.createElement("audio");
console.log(obj.volume); // 1
obj.volume = 0.75;
```

仕様書
---

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

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

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

関連情報
----

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

`HTMLMediaElement` インターフェイスの **`currentTime`** プロパティは、現在の再生時間を秒単位で示します。

この値を変更すると、メディアは新しい時刻にシークされます。

値
-

現在の再生時刻を秒単位で示す倍精度浮動小数点値です。

メディアがまだ再生されていない場合、 `currentTime` の値は `play()` メソッドが呼ばれたときに再生が開始されるメディア内の時刻位置を示しています。

`currentTime`に新しい値を設定すると、メディアが利用可能であれば、指定された時刻にシークします。

ライブストリーミングされたメディアなど、再生時間が不明なメディアでは、ブラウザーがメディアバッファーから時間切れのメディア部分を取得できない可能性があります。また、タイムラインが 0 秒で始まらないメディアは、そのタイムラインの最も早い時刻より前にシークすることはできません。

秒単位のメディアの長さは、 `duration`プロパティを用いて決定することができます。

例
-


```js
const video = document.createElement("video");
console.log(video.currentTime);
```

使用上の注意
------

### 時間精度の引き下げ

タイミング攻撃や フィンガープリントから保護するために、ブラウザーは `currentTime` が返す値を丸めたり、その他の方法で調整することがあります。

仕様書
---

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

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
* `HTMLMediaElement.fastSeek()`: 時刻をセットする他の方法
* `HTMLMediaElement.duration`: 秒単位のメディアの再生時間
HTMLMediaElement.currentSrc
===========================

**`HTMLMediaElement.currentSrc`** プロパティには、選択されたメディアリソースの絶対 URL が入っています。この選択は、例えば、ウェブサーバーがユーザーのディスプレイの解像度に基づいてメディアファイルを選択した場合に発生する可能性があります。 `networkState` プロパティが `EMPTY` の場合、値は空の文字列です。

値
-

選択されたメディアソースの絶対 URL を含む文字列です。 `networkState` が `EMPTY` の場合、これは空の文字列になります。 それ以外の場合は、メディア要素内に含まれる `HTMLSourceElement` によってリストされたリソースのいずれか、`<source>` 要素が指定されていない場合は値または `src` になります。

例
-


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

仕様書
---

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

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

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

関連情報
----

* これを定義しているインターフェイスである `HTMLMediaElement`
HTMLMediaElement.controlsList
=============================

**`controlsList`** は `HTMLMediaElement` インターフェイスのプロパティで、ユーザーエージェントが自分自身で一連のコントロールを表示するときに、メディア要素上に表示するコントロールを選択することを支援する DOMTokenList を返します。 DOMTokenList は、3 つの使用可能な値 `nodownload`, `nofullscreen`, `noremoteplayback` のうちの 1 つ以上を取ります。

値
-

`DOMTokenList` です。

仕様書
---

| Specification |
| --- |
| Unknown specification # solution-outline |

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

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

関連情報
----

* Chrome HTMLMediaElement controlsList Sample
HTMLMediaElement: timeupdate イベント
=================================

`timeupdate` イベントは、`currentTime` 属性で示される時刻が更新されたときに発生します。

イベントの頻度はシステムの負荷に依存しますが、およそ 4Hz と 66Hz との間で発生します（イベントハンドラーが実行するのに 250ms 以上かかることはないと仮定します）。ユーザーエージェントはシステム負荷とその都度イベントを処理する平均コストに基づいて、イベントの頻度を変えることが推奨されているため、ユーザーエージェントがビデオのデコード中に快適に処理できるよりも頻繁に UI 更新が行われることはありません。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

これらの例は、 HTMLMediaElement の `timeupdate` イベントのイベントリスナーを追加し、イベントが発生してイベントハンドラーが動作するときにメッセージを投稿します。なお、イベントの頻度はシステムの稼働状況に依存します。

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


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

video.addEventListener("timeupdate", (event) => {
  console.log("The currentTime attribute has been updated. Again.");
});
```


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


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

video.ontimeupdate = (event) => {
  console.log("The currentTime attribute has been updated. Again.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-timeupdate |
| HTML Standard # handler-ontimeupdate |

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

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: durationchange イベント
=====================================

`durationchange` イベントは、`duration` 属性が更新されたときに発生します。

構文
--

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


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

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

イベント型
-----

一般の `Event` です。

例
-

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

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


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

video.addEventListener("durationchange", (event) => {
  console.log("理由はわかりませんが、動画の再生時間が変わりました。");
});
```


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


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

video.ondurationchange = (event) => {
  console.log("理由はわかりませんが、動画の再生時間が変わりました。");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-durationchange |
| HTML Standard # handler-ondurationchange |

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

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: playing イベント
==============================

`playing` イベントは再生が最初に開始されたときと、再生が再開されたときに発行されます。例えば、データ不足で一時停止や遅延していた再生が再開されたときに発行されます。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

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

`addEventListener()` を使用した例:


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

video.addEventListener("playing", (event) => {
  console.log("Video is no longer paused");
});
```


`onplaying` イベントハンドラープロパティを使用した例:


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

video.onplaying = (event) => {
  console.log("Video is no longer paused.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-playing |
| HTML Standard # handler-onplaying |

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

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.loop
=====================

**`HTMLMediaElement.loop`** プロパティは、 HTML の `loop` 属性を反映し、メディア要素が最後に到達したときに最初からやり直すかどうかを制御します。

値
-

論理値です。

例
-


```js
const obj = document.createElement("video");
obj.loop = true; // true
```

仕様書
---

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

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

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

関連情報
----

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

`HTMLMediaElement` の **`load()`** メソッドは、メディア要素をその初期状態にリセットし、再生を開始する準備としてメディアソースを選択してメディアを読み込むプロセスを開始します。

先読みされるメディアデータの量は、要素の `preload` 属性の値によって決まります。

このメソッドは通常、要素の `src` 属性を変更するか、メディア要素自体の中にネストされている `<source>` 要素を追加または削除することによって、メディア要素に使用可能な一連のソースを動的に変更した場合にのみ役立ちます。 `load()` は要素をリセットして利用可能なソースを再スキャンし、それによって変更を有効にします。

構文
--


```js
load()
```

### 引数

なし。

### 返値

なし (`undefined`)。

使用上のメモ
------

`load()` を呼び出すと、このメディア要素を含む進行中のすべての操作が中止され、`<audio>` 要素または `<video>` 要素で指定されたオプションとその `src` 属性または子の `<source>` 要素を指定して適切なメディアリソースの選択と読み込みのプロセスが開始されます。 これについては、動画と音声のコンテンツで詳しく説明しています。

進行中のアクティビティを中止するプロセスにより、 `play()` によって返された未処理のプロミス (`Promise`) が、新しいメディアの読み込みが開始される前に、そのステータスに基づいて適切に解決または拒否されます。保留中の再生用のプロミスは、 `"AbortError"` `DOMException` で中止されます。

読み込みプロセスが進むにつれて、次のように適切なイベントがメディア要素自体に送信されます。

* 要素がすでにメディアの読み込み処理中の場合、その読み込み処理は中止され、 **`abort`** イベントが送信されます。
* 要素がすでにメディアで初期化されている場合は、 **`emptied`** イベントが送信されます。
* 再生位置をメディアの先頭にリセットすると、実際に再生位置が変更された場合（つまり、まだ先頭になっていない場合）、 **`timeupdate`** イベントが送信されます。
* メディアが選択され、読み込みの開始準備が整うと、 **`loadstart`** イベントが配信されます。
* これ以降は、メディアの読み込みと同じようにイベントが送信されます。
例
-

この例では、文書内の `<video>` 要素を見つけて、`load()` を呼び出してそれをリセットします。


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

仕様書
---

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

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

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

**`setMediaKeys()`** は `HTMLMediaElement` インターフェイスのメソッドで、このメソッドは、渡された `MediaKeys` (en-US) に解決する `Promise` を返します。これは、再生中にメディアの暗号を解除するために使用されます。

構文
--


```js
setMediaKeys(mediaKeys)
```

### 引数

`mediaKeys`

再生中にメディアデータの復号のために `HTMLMediaElement` が使用できる `MediaKeys` (en-US) オブジェクトへの参照です。

### 返値

`Promise` で、 `MediaKeys` の渡されたインスタンスに解決します。

仕様書
---

| Specification |
| --- |
| Encrypted Media Extensions # dom-htmlmediaelement-setmediakeys |

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

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

`volumechange` イベントは、ボリュームが変更されたときに発生します。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

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

`addEventListener()` を使用した例:


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

video.addEventListener("volumechange", (event) => {
  console.log("The volume changed.");
});
```


`onvolumechange` イベントハンドラープロパティを使用した例:


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

video.onvolumechange = (event) => {
  console.log("The volume changed.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-volumechange |
| HTML Standard # handler-onvolumechange |

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

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>`