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 属性为视频元素添加字幕

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


<!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 属性为视频添加字幕

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


<!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 属性的描述值向 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 音频元素添加字幕

在此示例中，我们将使用轨道标签的 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>

支持的浏览器

浏览器
是否支持	18.0	10.0	31.0	6.0	15.0

打印本页