在此页

• 句法
• 用法注意事项
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

TextTrack 接口的 mode property is a string specifying and controlling the text track's mode: 被禁用 , hidden ，或 showing . You can read this value to determine the current mode, and you can change this value to switch modes.

Safari additionally requires the default boolean attribute to be set to true when implementing your own video player controls in order for the subtitles cues to be shown.

句法

var mode = textTrack.mode;
textTrack.mode = "disabled" | "hidden" | "showing";
					

值

A DOMString which indicates the track's current mode. The text track mode is one of the values listed below, under Text track mode constants .

Text track mode constants

The text track mode—sometimes identified using the IDL enum TextTrackMode —must be one of the following values:

被禁用

The text track is currently disabled. While the track's presence is exposed in the DOM, the user agent is otherwise ignoring it. No cues are active, no events are being fired, and the user agent won't attempt to obtain the track's cues. This is the default value, unless the text track has the default Boolean attribute is specified, in which case the default is showing .

hidden

The text track is currently active but the cues aren't being displayed. If the user agent hasn't tried to obtain the track's cues yet, it will do so soon (thereby populating the track's TextTrack.cues property). The user agent is keeping a list of the active cues (in the track's activeCues property) and events are being fired at the corresponding times, even though the text isn't being displayed.

showing

The text track is currently enabled and is visible. If the track's cues list hasn't been obtained yet, it will be soon. The activeCues list is being maintained and events are firing at the appropriate times; the track's text is also being drawn appropriately based on the styling and the track's kind . This is the default value if the text track's default Boolean attribute is specified.

用法注意事项

默认 mode is 被禁用 , unless the default Boolean attribute is specified, in which case the default mode is showing . When a text track is loaded in the 被禁用 state, the corresponding WebVTT file is not loaded until the state changes to either showing or hidden . This way, the resource fetch and memory usage are avoided unless the cues are actually needed.

However, that means that if you wish to perform any actions involving the track's cues while handling, for example, the load event—in order to process some aspect of the cues upon page load—and the track mode was initially 被禁用 , you'll have to change the mode 到 hidden or showing in order to trigger loading of the cues.

When the mode is showing , text tracks are performed. The exact appearance and manner of that performance varies depending on each text track's kind . In general:

• Tracks whose kind is "subtitles" or "captions" are rendered with the cues overlaid over the top of the video.
• Tracks whose kind is "descriptions" are presented in a non-visual form (for example, the text might be spoken to describe the action in the video).
• Tracks whose kind is "chapters" are used by the user agent or the Web site or Web app to construct and present an interface for navigating the named chapters, where each cue in the list represents a chapter in the media. The user can then navigate to the desired chapter, which begins at the cue's start position and ends at the cue's end position.

范例

In this example, we configure the text track's cues so that every time a cue is finished, the video automatically pauses playback. This is done by setting the pauseOnExit property on each cue to true . However, to ensure that the track's cues are available, we first set mode to showing .

window.addEventListener("load", event => {
  let trackElem = document.querySelector("track");
  let track = trackElem.track;
  track.mode = "showing";
  for (let index=0; index < track.cues.length; index++) {
    let cue = track.cues[index];
    cue.pauseOnExit = true;
  };
});
					

规范

规范	状态	注释
HTML 实时标准 The definition of 'mode' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
mode	Chrome 18	Edge 12	Firefox 31 注意事项 31 注意事项 Before Firefox 52, using JavaScript to change the mode of a text track that's part of a media element would send one change event to the element's textTracks TextTrackList for each change, even if mutliple changes are made in a single pass through the Firefox event loop. Starting in Firefox 52, these changes are reflected by a single event.	IE 10	Opera 15	Safari 6	WebView Android 4.4	Chrome Android 18	Firefox Android 31	Opera Android 不支持 No	Safari iOS 7	Samsung Internet Android 1.0

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

另请参阅

• WebVTT
• TextTrack
• TextTrackList
• TextTrackCueList
• VTTCue
• <track>
• HTMLTrackElement

元数据

• 最后修改： Jan 30, 2020

相关话题

1. WebVTT API
2. TextTrack
3. 特性

   1. mode
4. 事件

   1. cuechange
5. 继承：

   1. EventTarget
6. Related pages for WebVTT

   1. TextTrackCue
   2. TextTrackCueList
   3. TextTrackList
   4. TrackEvent
   5. VTTCue
   6. VTTRegion