-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
82 lines (61 loc) · 4.59 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
---
title: HTMLMediaElement.textTracks
slug: Web/API/HTMLMediaElement/textTracks
l10n:
sourceCommit: e60194342c9666ad8a2e6e5e6c25705fe818bcde
---
{{APIRef("HTML DOM")}}
**`textTracks`** は {{DOMxRef("HTMLMediaElement")}} オブジェクトの読み取り専用プロパティで、メディア要素のテキストトラックを表す {{DOMxRef("TextTrackList")}} オブジェクトをすべて、テキストトラックのリストと同じ順序で掲載しているオブジェクトを返します。
`addtrack` と `removetrack` イベントを使用すると、[`<audio>`](/ja/docs/Web/HTML/Element/audio) や [`<video>`](/ja/docs/Web/HTML/Element/video) 要素へのトラックの追加や削除を検出することができます。しかし、これらのイベントはメディア要素自体に直接送られるわけではありません。代わりに、要素に追加されたトラックの種類に対応する [`HTMLMediaElement`](/ja/docs/Web/API/HTMLMediaElement) のトラックリストオブジェクトに送られます。
返されたリストは生きています。つまり、メディア要素にトラックが追加されたり削除されたりすると、リストのコンテンツは動的に変更されます。一度リストへの参照を保有すると、新しいテキストトラックが追加されたり、既存のものが削除されたりしたときにそれを検出するために、変更を監視することができます。
メディア要素のトラックリストの変更を監視する方法については、[TextTrackList のイベント](/ja/docs/Web/API/TextTrackList#イベント)を参照してください。
## 値
メディア要素に含まれるテキストトラックのリストを表す {{DOMxRef("TextTrackList")}} オブジェクトです。トラックのリストは、`textTracks[n]` を使用してこのオブジェクトのテキストトラックのリストから n 番目のテキストトラックを取得したり、 `textTracks`.[`getTrackById()`](/ja/docs/Web/API/TextTrackList/getTrackById) メソッドを使用してアクセスしたりすることができます。
それぞれのトラックは {{DOMxRef("TextTrack")}} オブジェクトで表され、トラックに関する情報を提供します。
## 例
[`<video>`](/ja/docs/Web/HTML/Element/video) に子要素としていくつかの [`<track>`](/ja/docs/Web/HTML/Element/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);
}
}
```
{{EmbedLiveSample("Examples", "100%", 155)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- 定義している {{DOMxRef("HTMLMediaElement")}} インターフェイス
- {{HTMLElement("video")}} および {{HTMLElement("audio")}}
- {{DOMxRef("VideoTrack")}} および {{DOMxRef("VideoTrackList")}}
- {{DOMxRef("AudioTrack")}} および {{DOMxRef("AudioTrackList")}}
- VideoTrackList の
[`change`](/ja/docs/Web/API/VideoTrackList/change_event)、
[`addtrack`](/ja/docs/Web/API/VideoTrackList/addtrack_event)、
[`removetrack`](/ja/docs/Web/API/VideoTrackList/removetrack_event)
イベント
- AudioTrackList の
[`change`](/ja/docs/Web/API/AudioTrackList/change_event)、
[`addtrack`](/ja/docs/Web/API/AudioTrackList/addtrack_event)、
[`removetrack`](/ja/docs/Web/API/AudioTrackList/removetrack_event)
イベント