HTML - <track> 標籤

HTML 的<track>標籤用於定義媒體檔案的基於時間的文字軌道。<audio> 和 <video> 元素必須使用 <track> 標籤作為子元素。可以使用 <track> 標籤新增字幕、隱藏式字幕和其他型別的文字，並在播放媒體檔案時顯示。此標籤是 HTML5 中新引入的。軌道的格式為 WebVTT（.vtt 檔案）。在媒體元素中不能包含具有相同標籤、srclang 和 kind 的多個軌道。

語法

<track src=" " kind=" " srclang=" " label=" ">

屬性

HTML track 標籤支援 HTML 的全域性和事件屬性。以及一些特定的屬性，如下所示。

屬性	值	描述
default	default	指定如果使用者想要更改軌道，則啟用該軌道。
kind	captions chapters descriptions metadata subtitles	指定要使用的軌道型別。
label	text	顯示文字軌道的標題。
src	URL	指定軌道 URL。
srclang	language_code	指定軌道文字資料語言（如果 kind="subtitles" 則需要）。

HTML track 標籤示例

以下示例將說明 track 標籤的使用方法。何時何地以及如何使用 track 標籤。

建立英語影片軌道

讓我們看一下下面的示例，我們將使用 <track> 並獲得英文字幕。

<!DOCTYPE html>
<html>
<head>
    <title>Video Player</title>
    <style>
       video {
          width: 30%;
          height: 40%;
       }
    </style>
</head>
<body>
    <video controls>
       <source src=
"https://cdn.pixabay.com/vimeo/830461265/fogging-164360.mp4?width=1280&hash=f05a9cb58caeefbe7afe937ce7f9a00784d5f219" 
      type="video/mp4">
       <track src="ex1.vtt" kind="captions" label="English" srclang="en">
    </video>
</body>
</html>

字幕檔案

將以下字幕檔案儲存為“ex1.vtt”

WEBVTT

00:00:00.000 --> 00:00:10.000
Tuotorialspoint

00:00:10.000 --> 00:00:20.000
Simply Easy Learning

00:00:20.000 --> 00:00:30.000
Tutorialspoint.com is a dedicated website to provide quality online education

00:00:30.000 --> 00:00:35.000
Global headquarters for Tutorials Point is located in Hyderabad,Telangana,India.

00:00:35.000 --> 00:00:41.000
Mohtashim M. is the Founder & Managing Director at Tutorials Point .

要執行上述程式，請將“ex1.vtt”（字幕）和“index1.html”（HTML 文件）放在同一個資料夾中以檢視預期的輸出。並且要檢視輸出，使用者需要在播放器中開啟字幕。

建立韓語影片軌道

考慮另一種情況，我們將新增韓語字幕。

<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3 ">
    <video width="300" height="150" controls autoplay>
       <source src=
"https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" 
      type="video/mp4">
       <track src="ex2.vtt" kind="captions" label="Korean" srclang="ko">
    </video>
</body>
</html>

字幕檔案

將以下字幕檔案儲存為“ex2.vtt”−

WEBVTT

00:00:00.000 --> 00:00:02.000
환영

00:00:02.000 --> 00:00:05.000
아름다운 세상으로.!

00:00:05.000 --> 00:00:07.000
많은 생물을 찾을 수 있는 곳

00:00:07.000 --> 00:00:10.000
많은 전통과 많은 종교s

要執行上述程式，請將“ex2.vtt”（字幕）和“index2.html”（HTML 文件）放在同一個資料夾中以檢視預期的輸出。並且要檢視輸出，使用者需要在播放器中開啟字幕。

支援的瀏覽器

標籤
track	是 23.0	是 10.0	是 31.0	是 6.0	是 12.1

html_tags_reference.htm

列印頁面