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

列印頁面