iT邦幫忙

DAY 11
1

HTML5 & CSS3系列 第 11

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

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.

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


上一篇
30天分享(12) - HTML5 viewport <meta> 標籤
下一篇
30天分享(14) - HTML5 fieldset 標籤
系列文
HTML5 & CSS328
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言