是的,我瞭解 HTML5 的 <track>
標籤。它主要用於為 <video>
和 <audio>
元素新增文字軌道,例如字幕、章節標題、描述等等。
<track>
標籤本身並不會顯示任何內容,它只是指向一個包含軌道資料的外部檔案。你需要使用 kind
屬性來指定軌道的型別,瀏覽器會根據這個型別來解析和使用軌道資料。
以下是 <track>
標籤的一些常見應用場景:
-
字幕和外語翻譯: 這是
<track>
標籤最常見的用途。你可以提供多種語言的字幕檔案,讓使用者根據需要選擇。這對於聽力障礙人士或觀看外語影片的使用者非常有幫助。 -
章節標題: 你可以使用
<track>
標籤來定義影片或音訊的章節,方便使用者快速跳轉到感興趣的部分。例如,一個教學影片可以分成多個章節,每個章節講解一個知識點。 -
描述音訊: 對於視障人士,可以使用
<track>
標籤提供音訊描述,解釋影片中發生的事情,例如場景變化、人物動作等等。 -
卡拉OK字幕: 透過巧妙運用
kind="subtitles"
和 CSS 樣式,可以實現卡拉OK字幕效果,高亮顯示當前正在唱的歌詞部分。 -
後設資料資訊:
<track>
標籤還可以用來儲存一些後設資料資訊,例如作者、版權資訊等等,雖然這些資訊通常不會直接顯示給使用者,但可以被 JavaScript 讀取和使用。
示例:
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
<track kind="subtitles" src="subtitles_zh.vtt" srclang="zh" label="中文">
<track kind="chapters" src="chapters.vtt" label="Chapters">
</video>
在這個例子中,我們為一個影片新增了英文和中文兩種字幕,以及一個章節軌道。srclang
屬性指定了字幕的語言,label
屬性指定了軌道的名稱,使用者可以在播放器介面中選擇不同的軌道。
軌道檔案格式:
<track>
標籤通常使用 WebVTT (Web Video Text Tracks) 格式的檔案,副檔名為 .vtt
。這是一種基於文字的格式,易於建立和編輯。
總而言之,<track>
標籤提供了一種靈活且強大的方式來為影片和音訊新增各種文字軌道,極大地提升了使用者的觀看體驗,尤其對於需要輔助功能的使用者來說更是如此。