• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <track>

    版本:HTML5

    HTML<track>元素被当作媒体元素—<audio>和<video>的子元素来使用。它允许指定时序文本字幕(或者基于时间的数据),例如自动处理字幕。字幕格式有WebVTT格式(.vtt格式文件)—Web视频文本字幕格式,以及指时序文本标记语言(TTML)格式。

    浏览器支持

    IE 10、Opera 和 Chrome 浏览器支持<track>标签。

    示例

    <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>
    

    标签定义及使用说明

    <track>标签为媒体元素(比如<audio> and <video>)规定外部文本轨道。

    这个元素用于规定字幕文件或其他包含文本的文件,当媒体播放时,这些文件是可见的。

    <track>给媒体元素添加的数据的类型在kind属性中设置,属性值可以是subtitles,captions,descriptions,chaptersmetadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

    一个<media>元素的任意两个<track>子元素不能有相同的kind,srclang,和label属性。

    使用上下文

    内容分类
    允许的内容无,它是一个空元素。
    标签省略允许省略,因为他是一个空元素,所以开始标签必须存在,结束标记可以省略。
    允许的父元素媒体元素,流内容之前。
    允许的ARIA角色
    DOM接口HTMLTrackElement

    属性

    该元素包含全局属性。

    default
    该属性定义了该track应该启用,除非用户首选项指定了更合适一个track。每个媒体元素里面只有一个<track>元素可以有这个属性。
    kind
    定义了 text track 应该如何使用。如果省略了该属性,默认的 kind 值就是subtitles。下面是允许的关键字:
    • subtitles
      • 字幕给观影者看不懂的内容提供了翻译。比如英文电影里非英文的对话框或者文字。
      • 字幕可能包含额外的内容,通常有附加的背景信息。比如在电影星球大战开头的文字,或者某个场景的日期,时间,还有地点。
    • captions
      • 隐藏式字幕提供了音频的转录甚至是翻译。
      • 可能包含重要的非言语的信息,比如音乐提示或者音效。可以指定提示音的源文件(e.g. music, text, character).
      • 适用于耳聋的用户或者当调成静音的时候。
    • descriptions
      • 视频内容的文本描述。
      • 适用于失明用户或者当视频不可见的场景。
    • chapters
      • 章节标题用于用户浏览媒体资源的时候。
    • metadata
      • 脚本使用的track。对用户不可见。
    label
    当列出可用的text tracks时,给浏览器使用的text track的标题,这种标题是用户可读的。
    src
    track的地址。必须是合法的URL。该属性必须定义。
    srclang
    track文本数据的语言。它必须是合法的 BCP 47 语言标签。如果kind属性被设为subtitles,那么srclang必须定义。

    可选的属性

    HTML5新增:HTML5 中的新属性。

    属性描述
    default HTML5新增default规定该轨道是默认的。如果用户没有选择任何轨道,则使用默认轨道。
    kind HTML5新增captions
    chapters
    descriptions
    metadata
    subtitles
    规定文本轨道的文本类型。
    label HTML5新增text规定文本轨道的标签和标题。
    src HTML5新增URL必需的。规定轨道文件的 URL。
    srclang HTML5新增language_code规定轨道文本数据的语言。如果 kind 属性值是"subtitles",则该属性是必需的。

    HTML 4.01 与 HTML5之间的差异

    <track>标签是 HTML5 中的新标签。

    全局属性

    <track>标签支持HTML 的全局属性。

    事件属性

    <track>标签支持HTML 的事件属性。

    实例

    带有两个字幕轨道的视频:

    <video width="320" height="240" controls>
    <source src="forrest_gump.mp4" type="video/mp4">
    <source src="forrest_gump.ogg" type="video/ogg">
    <track src="subtitles_en.vtt" kind="subtitles" src
    label="English">
    <track src="subtitles_no.vtt" kind="subtitles" src
    label="Norwegian">
    </video>
    

    上篇:<video>