---
title: TextTrack.mode
slug: Web/API/TextTrack/mode
tags:
  - Accessibility
  - NeedsExample
  - Property
  - TextTrack
  - Web
  - WebVTT
  - mode
translation_of: Web/API/TextTrack/mode
---
<div>{{APIRef("WebVTT")}}</div>

<p><span class="seoSummary">{{domxref("TextTrack")}} インターフェイスの <strong><code>mode</code></strong> プロパティは、テキストトラックのモードを指定して制御する <code>disabled</code>, <code>hidden</code>, <code>showing</code> のいずれかの文字列です。</span>この値を読み取って現在のモードを決定したり、この値を変更してモードを切り替えることができます。</p>

<p class="note">さらに、 Safari でサブタイトルのキューを表示するには、独自のビデオプレーヤーコントロールを実装する際に、 <code><strong>default</strong></code> 論理値属性を true に設定する必要があります。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox notranslate">var <var>mode</var> = <var>textTrack</var>.mode;

<var>textTrack</var>.mode = "disabled" | "hidden" | "showing";</pre>

<h3 id="Value" name="Value">値</h3>

<p>トラックの現在のモードを示す {{domxref("DOMString")}}。 テキストトラックモードは、{{anch("Text track mode constants","テキストトラックモード定数")}}にリストされている値の1つです。</p>

<h4 id="Text_track_mode_constants" name="Text_track_mode_constants">テキストトラックモード定数</h4>

<p>テキストトラックモードは IDL 列挙型 <code>TextTrackMode</code> を使用して識別されることもあり、次のいずれかの値にする必要があります。</p>

<dl>
 <dt><code>disabled</code></dt>
 <dd>テキストトラックは現在無効になっています。トラックの存在は DOM で公開されていますが、ユーザーエージェントはそれ以外の場合は無視しています。キューはアクティブではなく、イベントは発行されておらず、ユーザーエージェントはトラックのキューを取得しようとしません。テキストトラックが {{htmlattrxref("default", "track")}} 論理値属性を持っている場合の既定値は <code>showing</code> です。</dd>
 <dt><code>hidden</code></dt>
 <dd>テキストトラックは現在アクティブですが、キューを表示しません。 ユーザーエージェントがまだトラックのキューを取得しようとしていない場合は、すぐに取得します（それにより、トラックの {{domxref("TextTrack.cues")}} プロパティが設定されます）。 テキストが表示されていなくても、ユーザーエージェントはアクティブなキューのリストを（トラックの {{domxref("TextTrack.activeCues", "activeCues")}} プロパティに）保持しており、イベントは対応する時間に発生します。</dd>
 <dt><code>showing</code></dt>
 <dd>テキストトラックは現在有効になっており、表示しています。トラックのキューリストをまだ取得していない場合は、すぐに取得します。 {{domxref("TextTrack.activeCues", "activeCues")}} リストは維持されており、イベントは適切なタイミングで発生します。 トラックのテキストも、スタイリングとトラックの {{domxref("TextTrack.kind", "kind")}} に基づいて適切に描画します。</dd>
</dl>

<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>

<p><code>mode</code> の既定値は、 {{htmlattrxref("default", "track")}} 論理値属性が指定されていない場合は <code>disabled</code> で、指定されている場合の <code>mode</code> の既定値は <code>showing</code> です。テキストトラックが <code>disabled</code> の状態で読み込まれると、対応する WebVTT ファイルは、状態が <code>showing</code> または <code>hidden</code> のいずれかに変わるまで読み込まれません。このようにして、キューが実際に必要とされない限り、リソースの取得とメモリの使用は回避されます。</p>

<p>しかし、これは、例えば、ページ読み込み時にキューのいくつかの側面を処理するために {{event("load")}} イベントを処理している間にトラックのキューに関係するアクションを実行したい場合、トラックモードが最初に <code>disabled</code> になっていた場合、キューの読み込みを起動するために <code>mode</code> を <code>hidden</code> または <code>showing</code> のいずれかに変更しなければならないことを意味しています。</p>

<p>モードが <code>showing</code> の場合、テキストトラックはその {{domxref("TextTrack.kind", "kind")}} によって異なる方法で実行されます。 一般に次のとおりです。</p>

<ul>
 <li><code>kind</code> が <code>subtitles</code> (字幕) または <code>captions</code> (キャプション) のトラックは、動画の上にキューを重ねてレンダリングされます。</li>
 <li><code>kind</code> が <code>descriptions</code> (説明) であるトラックは、視覚的ではない形式で表示されます (例えば、動画においてテキストはアクションを声で説明することがあります)。</li>
 <li><code>kind</code> が <code>chapters</code>（チャプター、章）のトラックは、ユーザーエージェントまたはウェブサイトまたはウェブアプリによって、名前付きチャプターをナビゲートするためのインターフェイスを構築して表示するために使用されます。 ここで、リスト内の各キューはメディア内のチャプターを表します。 その後、ユーザーは、キューの開始位置で開始し、キューの終了位置で終了する目的のチャプターに移動できます。</li>
</ul>

<h2 id="Example" name="Example">例</h2>

<p>この例では、キューが終了するたびに動画が自動的に再生を一時停止するように、テキストトラックのキューを設定します。これは、各キューの {{domxref("TextTrackCue.pauseonExit", "pauseOnExit")}} プロパティを <code>true</code> に設定することで実現します。ただし、トラックのキューを確実に利用できるようにするために、まず <code>mode</code> を <code>showing</code>に設定します。</p>

<pre class="brush: js notranslate">window.addEventListener("load", event =&gt; {
  let trackElem = document.querySelector("track");
  let track = trackElem.track;

  track.mode = "showing";

  for (let index=0; index &lt; track.cues.length; index++) {
    let cue = track.cues[index];
    cue.pauseOnExit = true;
  };
});</pre>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('HTML WHATWG', '#dom-texttrack-mode', 'mode') }}</td>
   <td>{{ Spec2('HTML WHATWG') }}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div>
<p>{{Compat("api.TextTrack.mode")}}</p>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/API/WebVTT_API">WebVTT</a></li>
 <li>{{domxref("TextTrack")}}</li>
 <li>{{domxref("TextTrackList")}}</li>
 <li>{{domxref("TextTrackCueList")}}</li>
 <li>{{domxref("VTTCue")}}</li>
 <li>{{HTMLElement("track")}}</li>
 <li>{{domxref("HTMLTrackElement")}}</li>
</ul>