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

`play` メソッドは `autoplay` 属性の結果として、`paused` プロパティが `true` から `false` に変更されたときに発生します。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

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

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


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

video.addEventListener("play", (event) => {
  console.log(
    "Boolean の paused プロパティは false になりました。 " +
      "play() メソッドが呼び出されたか、autoplay 属性が切り替えられました。",
  );
});
```


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


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

video.onplay = (event) => {
  console.log(
    "Boolean の paused プロパティは false になりました。 " +
      "play() メソッドが呼び出されたか、autoplay 属性が切り替えられました。",
  );
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-play |
| HTML Standard # handler-onplay |

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

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

**`textTracks`** は `HTMLMediaElement` オブジェクトの読み取り専用プロパティで、メディア要素のテキストトラックを表す `TextTrackList` (en-US) オブジェクトをすべて、テキストトラックのリストと同じ順序で掲載しているオブジェクトを返します。

`addtrack` と `removetrack` イベントを使用すると、`<audio>` や `<video>` 要素へのトラックの追加や削除を検出することができます。しかし、これらのイベントはメディア要素自体に直接送られるわけではありません。代わりに、要素に追加されたトラックの種類に対応する `HTMLMediaElement` のトラックリストオブジェクトに送られます。

返されたリストは生きています。つまり、メディア要素にトラックが追加されたり削除されたりすると、リストのコンテンツは動的に変更されます。一度リストへの参照を保有すると、新しいテキストトラックが追加されたり、既存のものが削除されたりしたときにそれを検出するために、変更を監視することができます。

メディア要素のトラックリストの変更を監視する方法については、TextTrackList のイベント (en-US)を参照してください。

値
-

メディア要素に含まれるテキストトラックのリストを表す `TextTrackList` (en-US) オブジェクトです。トラックのリストは、`textTracks[n]` を使用してこのオブジェクトのテキストトラックのリストから n 番目のテキストトラックを取得したり、 `textTracks`.`getTrackById()` (en-US) メソッドを使用してアクセスしたりすることができます。

それぞれのトラックは `TextTrack` オブジェクトで表され、トラックに関する情報を提供します。

例
-

`<video>` に子要素としていくつかの `<track>` が含まれているものから始めましょう。


```html
<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles\_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles\_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
</video>
```


`HTMLMediaElement.textTracks` は `textTracksList` を返すので、それを反復処理することができます。ここでは、それぞれの英語トラックのすべてのプロパティをコンソールに表示しています。


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

for (const track of tracks) {
  if (track.language === "en") {
    console.dir(track);
  }
}
```

仕様書
---

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

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
* `<video>` および `<audio>`
* `VideoTrack` および `VideoTrackList`
* `AudioTrack` および `AudioTrackList`
* VideoTrackList の
 `change`、
 `addtrack`、
 `removetrack`
 イベント
* AudioTrackList の
 `change`、
 `addtrack`、
 `removetrack`
 イベント
HTMLMediaElement.controller
===========================

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

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

**`HTMLMediaElement.controller`** プロパティは、要素に割り当てられたメディアコントローラーを表します。

値
-

`MediaController` オブジェクトまたは、要素にメディアコントローラーが割り当てられていない場合は `null`。既定値は `null` です。

仕様書
---

2016 年に、 Media Controller の全機能が HTML 仕様書から削除されました。標準化する予定がなくなりました。

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

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

`ratechange` イベントは、再生レートが変更されたときに発生します。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

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

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


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

video.addEventListener("ratechange", (event) => {
  console.log("再生レートが変わりました。");
});
```


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


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

video.onratechange = (event) => {
  console.log("再生レートが変わりました。");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-ratechange |
| HTML Standard # handler-onratechange |

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

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

`seeking` イベントは、シーク操作が開始されると発生します。つまり、論理属性の `seeking` を `true` に変更し、メディアが新しい位置をシークしている状態になります。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

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

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


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

video.addEventListener("seeking", (event) => {
  console.log("動画は新しい位置をシーク中です。");
});
```


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


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

video.onseeking = (event) => {
  console.log("動画は新しい位置をシーク中です。");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-seeking |
| HTML Standard # handler-onseeking |

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

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.pause()
========================

**`HTMLMediaElement.pause()`** メソッドはメディアの再生を一時停止します。 メディアがすでに一時停止状態にある場合、このメソッドは効果がありません。

構文
--


```js
pause()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

なし。

仕様書
---

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

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

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

**`error`** イベントは、リソースがエラーのために読み込めなかったときに発生します（例えば、ネットワーク接続の問題など）。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-


```js
const video = document.querySelector("video");
const videoSrc = "https://path/to/video.webm";

video.addEventListener("error", () => {
  console.error(`Error loading: ${videoSrc}`);
});

video.setAttribute("src", videoSrc);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-error |
| HTML Standard # handler-window-onmessageerror |

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

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

関連情報
----

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

**`HTMLMediaElement.defaultPlaybackRate`** プロパティは、メディアの既定の再生速度を示します。

値
-

double 型です。 `1.0` が「標準速度」で、 `1.0` より小さい値はメディアの再生速度が標準より遅くなり、値を大きくすると再生速度が速くなります。

### 例外

`NotSupportedError` `DOMException`

指定された値に対応していない場合に発生します。

例
-


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

仕様書
---

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

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

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

関連情報
----

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

`HTMLMediaElement` の **`play()`** メソッドは、メディアの再生を開始しようとします。
 再生が正常に開始されると解決するプロミス (`Promise`) を返します。

パーミッションの問題など、何らかの理由で再生を開始しなかった場合、そのプロミスは拒否されます。

構文
--


```js
play()
```

### 引数

なし。

### 返値

再生が開始されたときに解決される、または何らかの理由で再生を開始できない場合は拒否されるプロミス (`Promise`) です。

**メモ:** 古いブラウザーは `play()` から値を返さない可能性があります。

### 例外

プロミスの**拒否ハンドラー**は、 `DOMException` オブジェクトと唯一の引数として渡された例外名で呼び出されます（従来の例外が投げられるのとは対照的です）。想定されるエラーは以下の通りです。

`NotAllowedError` `DOMException`

 ユーザーエージェント（ブラウザー）またはオペレーティングシステムが、現在のコンテキストまたは状況においてメディアの再生を許可しない場合に提供されます。
 ブラウザーは、例えば許可ポリシー のため、ユーザーが明示的に "play" ボタンをクリックしてメディア再生を始めるように要求することがあります。


`NotSupportedError` `DOMException`

メディアソース（例えば `MediaStream`, `MediaSource`, `Blob`, または `File` として指定可能）が、対応しているメディア形式を表していない場合に提供されます。

ブラウザーの実装の詳細、メディアプレーヤーの実装などによっては、他の例外が報告されることがあります。

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

「自動再生 (autoplay)」という用語は通常、読み込まれるとすぐにメディアの再生を開始するページを指すと考えられていますが、ウェブブラウザーの自動再生ポリシーは、`play()` の呼び出しを含むスクリプト起動によるメディアの再生にも適用されます。

ユーザーエージェントが自動またはスクリプト起動によるメディアの再生を許可しないように設定されている場合、`play()` を呼び出すと返されたプロミスが直ちに `NotAllowedError` で拒否されます。 ウェブサイトはこの状況に対処する準備をしておくべきです。 例えば、サイトには再生が自動的に開始されたことを前提としたユーザーインターフェイスを表示するのではなく、返されたプロミスが解決されたか拒否されたかに基づいて UI を更新する必要があります。 詳しくは、以下の例を参照してください。

**メモ:** `play()` メソッドを使用すると、ユーザーはメディアの再生を許可するように要求され、返されたプロミスが解決されるまでに遅延が生じる可能性があります。 コードが即座の応答を期待していないことを確認してください。

自動再生および自動再生のブロックの詳細については、メディアおよびウェブオーディオ API の自動再生ガイドを参照してください。

例
-

この例では、再生が開始されたことを確認する方法と、ブロックされた自動再生を適切に処理する方法を示します。


```js
let videoElem = document.getElementById("video");
let playButton = document.getElementById("playbutton");

playButton.addEventListener("click", handlePlayButton, false);
playVideo();

async function playVideo() {
  try {
    await videoElem.play();
    playButton.classList.add("playing");
  } catch (err) {
    playButton.classList.remove("playing");
  }
}

function handlePlayButton() {
  if (videoElem.paused) {
    playVideo();
  } else {
    videoElem.pause();
    playButton.classList.remove("playing");
  }
}
```


この例では、動画の再生は非同期 (`async`) 関数によってオンとオフをトグル切り替えします。動画を再生しようとし、成功した場合は `playButton` 要素のクラス名を `"playing"`（再生中）に設定します。 再生が開始されない場合、`playButton` 要素のクラスはクリアされ、既定の外観に戻ります。 これは、`play()` によって返されたプロミス (`Promise`) の解決または拒否を監視することによって、再生ボタンが実際の再生状態と一致することを保証します。

この例が実行されると、再生のオンとオフを切り替えるために使用する `<video>` 要素への参照を `<button>` と同様に収集することから始めます。 次に、再生トグルボタンの `click` イベントのイベントハンドラーを設定し、`playVideo()` を呼び出して自動的に再生を開始しようとします。

この例を Glitch でリアルタイムで試したり、リミックスしたりすることができます。

仕様書
---

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

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

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

関連情報
----

* ウェブメディア技術
* 学習: 動画と音声のコンテンツ
* メディアおよびウェブオーディオ API の自動再生ガイド
* ウェブオーディオ API の利用
HTMLMediaElement: loadstart イベント
================================

**`loadstart`** イベントは、ブラウザーがリソースの読み込みを開始したときに発生します。

構文
--

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


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

onloadstart = (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://interactive-examples.mdn.mozilla.net/media/examples/flower.webm",
    );
    source.setAttribute("type", "video/webm");

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


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-loadstart |
| HTML Standard # handler-onloadstart |

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

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

関連情報
----

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

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

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

**`HTMLMediaElement.mediaGroup`** プロパティは HTML の `mediaGroup` 属性を反映し、所属する要素のグループの名前を示します。メディア要素のグループは、共通の `controller` を共有します。

値
-

文字列です。

仕様書
---

2016年、 Media Controller の全機能が HTML 仕様書から削除されました。標準化する予定がなくなりました。

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

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

関連情報
----

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

`canplaythrough` イベントは、ユーザーエージェントがメディアを再生可能なときに発生し、コンテンツをさらにバッファリングするために再生を停止することなく、メディアを最後まで再生するのに十分なデータが読み込まれたと推定します。

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

構文
--

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


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

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

イベント型
-----

一般の `Event` です。

例
-

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

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


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

video.addEventListener('canplaythrough', (event) =&gt; {
  console.log('バッファリングを止めることなく、' +
      '動画全体を再生できると思います。');
});
```


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


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

video.oncanplaythrough = (event) =&gt; {
  console.log('バッファリングを止めることなく、' +
      '動画全体を再生できると思います。');
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-canplaythrough |
| HTML Standard # handler-oncanplaythrough |

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

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.fastSeek()
===========================

**`HTMLMediaElement.fastSeek()`** メソッドは、精度と引き換えにで新しい時間へのメディアを迅速にシークします。

**メモ:** 正確にシークする必要がある場合は、代わりに `HTMLMediaElement.currentTime` を設定してください。

構文
--


```js
fastSeek(time)
```

### 引数

`time`

倍精度浮動小数点値です。

### 返値

なし (`undefined`)。

例
-

この例では、 video 要素の 20 秒の位置に素早くシークします。


```js
let myVideo = document.getElementById("myVideoElement");

myVideo.fastSeek(20);
```

仕様書
---

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

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

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

関連情報
----

* HTMLMediaElement.currentTime:
 精度を犠牲にすることなくシークを行う
HTMLMediaElement.muted
======================

**`HTMLMediaElement.muted`** プロパティは、メディア要素がミュートされているかどうかを示します。

値
-

論理値です。 `true` はミュートされていることを意味し、`false` はミュートされていないことを意味します。

例
-


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

仕様書
---

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

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

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

関連情報
----

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

**`captureStream()`** は `HTMLMediaElement` インターフェイスのプロパティで、このメディア要素でレンダリングされているコンテンツのリアルタイムキャプチャをストリーミングしている `MediaStream` オブジェクトを返します。

これは、例えば WebRTC の `RTCPeerConnection` のソースとして使用できます。

構文
--


```js
captureStream()
```

### 引数

なし。

### 返値

他のメディア処理コードによる音声データおよび/または動画データのソースとして、または WebRTC のソースとして使用できる `MediaStream` オブジェクトです。

例
-

この例では、イベントハンドラーが確立されているため、ボタンをクリックすると、ID が `"playback"` のメディア要素のコンテンツの `MediaStream` へのキャプチャを開始します。 これにより、WebRTC を介したストリーミングのソースなど、他の目的にストリームを使用して、動画通話中に録画済みの動画を他の人と共有できるようになります。


```js
document.querySelector(".playAndRecord").addEventListener("click", () => {
  const playbackElement = document.getElementById("playback");
  const captureStream = playbackElement.captureStream();
  playbackElement.play();
});
```


より長くより複雑な例と説明については、メディア要素の記録を参照してください。

仕様書
---

| Specification |
| --- |
| Media Capture from DOM Elements # dom-htmlmediaelement-capturestream |

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

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

### Firefox 特有のメモ

Firefox 51 より前のバージョンでは、 `captureStream()` はソースそれ自体が `MediaStream` であるメディア要素では使用できませんでした（`RTCPeerConnection` を介して受信されるストリームを表示している `<video>` 要素など）。 Firefox 51 以降では機能します。これは、動画要素からストリームをキャプチャし、それを記録するために `MediaRecorder` を使用できることを意味します。 詳細は Firefox バグ 1259788 をご覧ください。

ただし、明確な理由から、Firefox では `captureStream()` に接頭辞が付いて `mozCaptureStream()` となっています。現在の実装には、次のような注目に値するいくつかの奇妙な点があるからです。

* Firefox の実装は現在、メディア要素のソース自体が `MediaStream` である場合にのみ、仕様書での説明通りに動作します。
* メディア要素のソースが `MediaStream` ではない場合、このメソッドからの出力は仕様書と互換性がありません。 そして、キャプチャの開始後にソースを変更した場合、その非互換性のために出力キャプチャストリームは新しいソースデータを受け入れることができません。したがって、新しいソースの `MediaStream` からの `MediaStreamTrack` はキャプチャしたストリームに追加されず、更新されたソースをキャプチャしない出力になります。
* ソースを `MediaStream` に戻すと、トラックをストリームに戻して追加し、期待どおりに機能します。
* `mozCaptureMediaStream()` を `MediaStream` のソースを使用して要素に対して呼び出すと、要素が `MediaStream` を再生している間はトラックのみを含むストリームを返します。
* ソースメディアのないメディア要素で `mozCaptureMediaStream()` を呼び出すと、その互換モードは最初に追加されたソースに基づきます。 例えば、`MediaStream` の場合、キャプチャストリームはそれ以降 MediaStream のソースでのみ機能します。
* `MediaStream` 以外のソースのサポートが仕様に達した時点で、接頭辞なしのメソッドの場合、この特別なふるまいは取り除かれます。 詳細は Firefox バグ 1259788#160 をご覧ください。
関連情報
----

* メディア要素の記録
* MediaStream 収録 API
* `HTMLCanvasElement.captureStream()`
* `MediaStream`
* WebRTC API
HTMLMediaElement.controls
=========================

**`HTMLMediaElement.controls`** プロパティは、 HTML の `controls` 属性を反映し、メディア項目を再生するためのユーザーインターフェイスのコントロールを表示するかどうかを制御します。

値
-

論理値です。値が `true` の場合、コントロールが表示されます。

例
-


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

仕様書
---

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

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

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

関連情報
----

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

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

値
-

新しい静的な正規化された `TimeRanges` オブジェクトを返します。これは `seekable` プロパティがアクセスされた時点でユーザーエージェントがシーク可能なメディアリソースがあれば、その範囲を表します。

例
-


```js
const video = document.querySelector("video");
const timeRangesObject = video.seekable;
const timeRanges = [];
// オブジェクトを走査し、配列へ出力
for (let count = 0; count < timeRangesObject.length; count++) {
  timeRanges.push([timeRangesObject.start(count), timeRangesObject.end(count)]);
}
```

仕様書
---

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

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
* メディアソース拡張 API
* メディアのバッファリング、シーク、時間の範囲 (en-US)