HTML - kind 属性

HTML 的 kind 属性与 <track> 元素一起使用，用于指定音频/视频文本轨道的类型。

<track> 元素用于 <audio> 和 <video> 元素内，以指定字幕、隐藏式字幕文件或任何其他将在媒体播放时可见的文本文件。

<track> 元素指定音频和视频元素的时间文本轨道。如果没有 <track> 元素，则在媒体播放时，您将无法看到视频或音频媒体的隐藏式字幕、字幕或其他文本。

语法

<track kind = "value">

以下是 kind 属性的可能值

subtitles: 对话的翻译，适用于声音可用但无法理解的情况（例如，外语字幕）。
captions: 对话、音效和其他相关音频信息的转录，适用于声音不可用的情况（例如，听力障碍者）。
descriptions: 视频内容的文字描述，供视障用户使用。
chapters: 用于浏览媒体的章节标题或标记。
metadata: 用于存储元数据（例如，脚本）的轨道。此值不会由浏览器显示。

应用于

下面列出的元素允许使用 HTML kind 属性

元素	描述
<track>	HTML <track> 标签用于定义媒体文件的基于时间的文本轨道。

HTML kind 属性示例

以下示例将说明 HTML kind 属性，以及我们应该在哪里以及如何使用此属性！

使用 kind 属性为视频元素添加字幕

在以下示例中，我们将使用 track 元素的 HTML kind 属性为视频添加字幕。

<!DOCTYPE html>
<html lang="en">

<body>
   <h3>Example of the HTML 'kind' attribute</h3>
   <video width="350" height="200" controls>
   <track src=
"https://www.dropbox.com/s/xvjem6er1pp1usy/MicrosoftInclusiveHiring.mp?raw=1" 
           id="myTrack1" 
           kind="subtitles" 
           srclang="en">
   <source src=
"https://www.dropbox.com/s/xvjem6er1pp1usy/MicrosoftInclusiveHiring.mp4?raw=1" 
           type="video/mp4">
</video>
</body>

</html>

使用 kind 属性为视频添加隐藏式字幕

考虑另一种情况，我们将使用视频的 track 元素的 kind 属性添加隐藏式字幕。

<!DOCTYPE html>
<html lang="en">;

<body>
   <h3>Example of HTML 'kind' attribute</h3>
   <video width="350" height="200" controls>
   <track src=
"https://www.dropbox.com/s/xvjem6er1pp1usy/MicrosoftInclusiveHiring.mp?raw=1" 
           id="myTrack1" 
           kind="captions" 
           srclang="en">
   <source src=
"https://www.dropbox.com/s/xvjem6er1pp1usy/MicrosoftInclusiveHiring.mp4?raw=1" 
           type="video/mp4">
</video>
</body>

</html>

为 HTML 视频添加描述

在这种情况下，我们使用 kind 属性的 description 值为 HTML 视频元素添加描述。这有助于为视频内容添加文本描述

<!DOCTYPE html>
<html lang="en">

<body>
   <h3>Example of HTML 'kind' attribute</h3>
   <video width="350" height="200" controls>
   <track src=
"https://www.dropbox.com/s/xvjem6er1pp1usy/MicrosoftInclusiveHiring.mp?raw=1" 
           id="myTrack1" 
           kind="description" 
           srclang="en">
   <source src=
"https://www.dropbox.com/s/xvjem6er1pp1usy/MicrosoftInclusiveHiring.mp4?raw=1" 
           type="video/mp4">
</video>
</body>

</html>

为 HTML 音频元素添加字幕

在此示例中，我们将使用 track 标签的 kind 属性为音频标签添加字幕。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'kind' attribute</title>
</head>

<body>
   <h3>Example of the HTML 'kind' attribute</h3>
   <audio controls>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-15s.mp3" 
             type="audio/mpeg">
      <track kind="subtitles" 
               srclang="en" 
               label="English">
   </audio>
</body>

</html>

支持的浏览器

属性
kind	是 18.0	是 10.0	是 31.0	是 6.0	是 15.0

html_attributes_reference.htm

打印页面