DOM

HTMLMediaElement.textTracks プロパティ

 編集:2022.11.01 by T.A.

[Edge]。読取専用。→

HTMLMediaElement のテキスト トラックを表すすべての TextTrack オブジェクトを一覧表示する TextTrackList オブジェクトを返します。テキスト トラックのリストと同じ順序です。

mdn: addtrack イベントと removetrack イベントを使用して、トラックが <audio> または <video> 要素に追加および削除されるタイミングを検出できます。しかし、これらのイベントは、メディア要素自体には直接送信されません。その代わり、それらは、要素に追加されたトラックのタイプに対応する HTMLMediaElement のトラック リスト オブジェクトに送信されます。

mdn: 返されたリストはライブです。つまり、トラックがメディア要素に追加および削除されると、リストの内容が動的に変化します。リストへの参照を取得したら、新しいテキストトラックが追加されたとき、または既存のテキスト トラックが削除されたときを検出するために、変更を監視できます。

mdn: メディア要素のトラック リストへの変更を監視する方法の詳細については、TextTrackList のイベント ハンドラーを参照してください。

構文
HTMLMediaElement.textTracks
HTMLMediaElement HTMLMediaElement

メディア要素に含まれるテキスト トラックのリストを表す TextTrackList オブジェクト。

mdn: トラックのリストには、textTracks[n]を使用してアクセスし、オブジェクトのテキスト トラックのリストから n 番目のテキスト トラックを取得できます。または textTracks.getTrackById() メソッドを使用します。

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

mdn

まず、複数の <track> の子を持つ <video> から始めます。

<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 スルーを返します。ここでは、各英語トラックのすべてのプロパティをコンソールに出力します。

var tracks = document.querySelector('video').textTracks;
for (var i = 0, L = tracks.length; i < L; i++) { /* tracks.length == 10 */
   if (tracks[i].language == 'en') {
      console.dir(tracks[i]);
   }
}

HTML:

<VIDEO id=IdTest src="../../Sample/Eizou_M.mp4" type="video/mp4" controls muted>
  <TRACK kind="captions" src="../../Sample/Test.vtt" srclang="en">
</VIDEO><BR>
<SPAN id=IdLog></SPAN>

JavaScript:

D=IdTest.textTracks;  //=[object]:[object TextTrackList]
	//0=[object]:[object TextTrack]
	//length=[number]:1
	//…

¶字幕が出せない。


テスト