30天分享(13) - HTML5 <track> 標籤

<track> 是用來顯示 video 裡的字幕 ，支援 vtt 檔 ，

使用方式 :

<video width="320" height="240" controls>

<source src="forrest_gump.mp4" type="video/mp4">

<source src="forrest_gump.ogg" type="video/ogg">

<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">

<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">

</video>

只須貼在 source 下方即可，kind 為指定類型，一般字幕都設為 subtitles ，

srclang 為語系，如果有指定 kind 為 subtitles ，一定要設定 srclang ，

label 是這個字幕的標題 ，可以自訂，要注意的是這些屬性，

火狐跟 Safari 都不支援。

src 支援的 vtt 檔內容如下 :

WEBVTT

00:00:01.878 --> 00:00:05.334
Good day everyone, my name is John Smith

00:00:08.608 --> 00:00:15.296
This video teaches you how to
build a sand castle on any beach.

將這個檔案儲存匯入，字幕就會隨著時間顯示。