就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. HTML
  3. HTML 元素参考
  4. <track>: The Embed Text Track element

在此页

HTML <track> element is used as a child of the media elements, <audio> and <video> . It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format ( .vtt files) — Web Video Text Tracks.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

内容类别 None
准许内容 None, it is an empty element .
Tag omission As it is a void element, the start tag must be present and the end tag must not be present.
Permitted parents A media element, <audio> or <video> .
Implicit ARIA role 无对应角色
Permitted ARIA roles No role permitted
DOM 接口 HTMLTrackElement

属性

此元素包括 全局属性 .

default
This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one track element per media element.
kind
How the text track is meant to be used. If omitted the default kind is subtitles . If the attribute contains an invalid value, it will use metadata (Versions of Chrome earlier than 52 treated an invalid value as subtitles ). The following keywords are allowed:
  • subtitles
    • Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film.
    • Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.
  • captions
    • Closed captions provide a transcription and possibly a translation of audio.
    • It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character).
    • Suitable for users who are deaf or when the sound is muted.
  • descriptions
    • Textual description of the video content.
    • Suitable for users who are blind or where the video cannot be seen.
  • chapters
    • Chapter titles are intended to be used when the user is navigating the media resource.
  • metadata
    • Tracks used by scripts. Not visible to the user.
label

A user-readable title of the text track which is used by the browser when listing available text tracks.

src
Address of the track ( .vtt file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the <audio> or <video> parent element of the track element has a crossorigin 属性。
srclang
Language of the track text data. It must be a valid BCP 47 language tag. If the kind attribute is set to subtitles ，那么 srclang 必须有定义。

用法注意事项

Track data types

The type of data that track adds to the media is set in the kind attribute, which can take values of subtitles , captions , descriptions , chapters or metadata . The element points to a source file containing timed text that the browser exposes when the user requests additional data.

A media element cannot have more than one track with the same kind , srclang ，和 label .

Detecting cue changes

The underlying TextTrack , indicated by the track property, receives a cuechange event every time the currently-presented cue is changed. This happens even if the track isn't associated with a media element.

If the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the HTMLTrackElement . 

let textTrackElem = document.getElementById("texttrack");
textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});

In addition, you can use the oncuechange event handler: 

let textTrackElem = document.getElementById("texttrack");
textTrackElem.oncuechange = (event) => {
  let cues = event.target.track.activeCues;
});

范例 

<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">
   <!-- Fallback -->
   ...
</video>

规范

规范 状态 注释
HTML 实时标准
The definition of 'track element' in that specification. 		实时标准
HTML5
The definition of 'track element' in that specification. 		推荐 初始定义

浏览器兼容性

The compatibility table in 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
track Chrome 完整支持 23 Edge 完整支持 12 Firefox 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
IE 完整支持 10 Opera 完整支持 12.1 Safari 完整支持 6 WebView Android 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 Doesn't work for fullscreen video.
Chrome Android 完整支持 25 注意事项
完整支持 25 注意事项
注意事项 Doesn't work for fullscreen video.
Firefox Android 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
Opera Android ? Safari iOS 完整支持 6 Samsung Internet Android 完整支持 1.5 注意事项
完整支持 1.5 注意事项
注意事项 Doesn't work for fullscreen video.
default Chrome 完整支持 23 Edge 完整支持 12 Firefox 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
IE 完整支持 10 Opera 完整支持 12.1 Safari 完整支持 6 WebView Android 完整支持 4.4 Chrome Android 完整支持 25 Firefox Android 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
Opera Android ? Safari iOS ? Samsung Internet Android 完整支持 1.5
kind Chrome 完整支持 23 Edge 完整支持 12 Firefox 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
IE 完整支持 10 Opera 完整支持 12.1 Safari 完整支持 6 WebView Android 完整支持 4.4 Chrome Android 完整支持 25 Firefox Android 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
Opera Android ? Safari iOS ? Samsung Internet Android 完整支持 1.5
label Chrome 完整支持 23 Edge 完整支持 12 Firefox 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
IE 完整支持 10 Opera 完整支持 12.1 Safari 完整支持 6 WebView Android 完整支持 4.4 Chrome Android 完整支持 25 Firefox Android 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
Opera Android ? Safari iOS ? Samsung Internet Android 完整支持 1.5
src Chrome 完整支持 23 Edge 完整支持 12 Firefox 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
IE 完整支持 10 Opera 完整支持 12.1 Safari 完整支持 6 WebView Android 完整支持 4.4 Chrome Android 完整支持 25 Firefox Android 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
Opera Android ? Safari iOS ? Samsung Internet Android 完整支持 1.5
srclang Chrome 完整支持 23 Edge 完整支持 12 Firefox 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
IE 完整支持 10 Opera 完整支持 12.1 Safari 完整支持 6 WebView Android 完整支持 4.4 Chrome Android 完整支持 25 Firefox Android 完整支持 31
完整支持 31
不支持 24 — 50 Disabled
Disabled ). To change preferences in Firefox, visit
Opera Android ? Safari iOS ? Samsung Internet Android 完整支持 1.5

图例

完整支持

完整支持

兼容性未知 ?

兼容性未知

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

元数据

  • 最后修改：
  1. <audio>
  2. <embed>
  3. <iframe>
  4. <img>
  5. <map>
  6. <object>
  7. <param>
  8. <picture>
  9. <source>
  10. <track>
  11. <video>
  12. HTML 元素
    1. A
      1. <a>
      2. <abbr>
      3. <acronym>
      4. <address>
      5. <applet>
      6. <area>
      7. <article>
      8. <aside>
      9. <audio>
    2. B
      1. <b>
      2. <base>
      3. <basefont>
      4. <bdi>
      5. <bdo>
      6. <bgsound>
      7. <big>
      8. <blink>
      9. <blockquote>
      10. <body>
      11. <br>
      12. <button>
    3. C
      1. <canvas>
      2. <caption>
      3. <center>
      4. <cite>
      5. <code>
      6. <col>
      7. <colgroup>
      8. <content>
    4. D
      1. <data>
      2. <datalist>
      3. <dd>
      4. <del>
      5. <details>
      6. <dfn>
      7. <dialog>
      8. <dir>
      9. <div>
      10. <dl>
      11. <dt>
    5. E
      1. <em>
      2. <embed>
    6. F
      1. <fieldset>
      2. <figcaption>
      3. <figure>
      4. <font>
      5. <footer>
      6. <form>
      7. <frame>
      8. <frameset>
    7. G H
      1. <h1>
      2. <h2>
      3. <h3>
      4. <h4>
      5. <h5>
      6. <h6>
      7. <head>
      8. <header>
      9. <hgroup>
      10. <hr>
      11. <html>
    8. I
      1. <i>
      2. <iframe>
      3. <img>
      4. <input>
      5. <ins>
      6. <isindex>
    9. J K
      1. <kbd>
      2. <keygen>
    10. L
      1. <label>
      2. <legend>
      3. <li>
      4. <link>
      5. <listing>
    11. M
      1. <main>
      2. <map>
      3. <mark>
      4. <marquee>
      5. <menu>
      6. <menuitem>
      7. <meta>
      8. <meter>
    12. N
      1. <nav>
      2. <nobr>
      3. <noframes>
      4. <noscript>
    13. O
      1. <object>
      2. <ol>
      3. <optgroup>
      4. <option>
      5. <output>
    14. P
      1. <p>
      2. <param>
      3. <picture>
      4. <plaintext>
      5. <pre>
      6. <progress>
    15. Q
      1. <q>
    16. R
      1. <rp>
      2. <rt>
      3. <rtc>
      4. <ruby>
    17. S
      1. <s>
      2. <samp>
      3. <script>
      4. <section>
      5. <select>
      6. <shadow>
      7. <slot>
      8. <small>
      9. <source>
      10. <spacer>
      11. <span>
      12. <strike>
      13. <strong>
      14. <style>
      15. <sub>
      16. <summary>
      17. <sup>
    18. T
      1. <table>
      2. <tbody>
      3. <td>
      4. <template>
      5. <textarea>
      6. <tfoot>
      7. <th>
      8. <thead>
      9. <time>
      10. <title>
      11. <tr>
      12. <track>
      13. <tt>
    19. U
      1. <u>
      2. <ul>
    20. V
      1. <var>
      2. <video>
    21. W
      1. <wbr>
    22. X Y Z
      1. <xmp>

版权所有  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1