首頁 > web前端 > H5教程 > html5 track標籤是什麼意思? html5 track標籤的使用方法介紹

html5 track標籤是什麼意思? html5 track標籤的使用方法介紹

寻∝梦
發布: 2018-08-23 17:40:51
原創
5729 人瀏覽過

這篇文章為大家介紹了關於html5 track標籤的定義及其使用方法,還有關於html5 track標籤的可選屬性的一些描述,希望大家能都認真讀完這篇文章。

html5 track標籤的定義和用法:

標籤為諸如 video 元素之類的媒介規定外部文字軌道。

用於規定字幕檔案或其他包含文字的文件,當媒介播放時,這些檔案是可見的。

html5標籤可選的屬性:

  • default:預設軌道。 (值:default)。 default屬性用來通知瀏覽器在使用者沒有選擇使用其他字幕檔案的時候可以使用目前track檔案

  • kind:文字軌道的文字類型(值:captions、chapters、descriptions、 metadata、subtitles)。 kind屬性用於指定字幕檔(即用於存放字幕、章節標題、說明文字或元資料的檔案) 的種類。可以對kind屬性指定的屬性值為subtitles、captions、descriptions、chapters與metadata

  • label:文字軌道的標籤和標題(值:text)。

  • src:軌道檔案的URL,必選屬性(值:URL)。 src屬性用於指定字幕檔案的存放路徑,該屬性是必須使用的屬性。 src屬性的屬性值可以是絕對URL路徑,也可以是相對URL路徑。

  • srclang:軌道文字資料的語言。 (值:language_code )。 srclang屬性用於指定字幕檔的語言。例如,srclang="en" 和srclang="zh-cn"分別表示字幕檔為英語和漢語。

標籤支援html全域屬性與html事件屬性

html5 track標籤的格式:##

<track src="URL">
登入後複製

HTML5 標籤實例

帶有兩個字幕軌道的影片:

<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>
登入後複製

html5中的Track 物件

Track 物件是HTML5新增的。

Track 物件表示 HTML5 元素。

存取html5中的Track 物件

你可以透過使用getElementById() 來存取 元素:

var x = document.getElementById("myTrack");
登入後複製

建立html5中的Track 物件

你可以使用document.createElement() 方法來建立 元素:

var x = document.createElement("TRACK");
登入後複製

html5 track標籤的使用方法介紹:

#track元素可以為使用video元素播放的影片或使用audio元素播放的音訊添加字幕、標題或章節等文字訊息。 track元素為影片添加字幕的過程和為音訊添加字幕的過程是相同的。 track元素是video元素的子元素,標記必須被書寫在 video元素的開始標記與結束標記之間。如果使用標記描述媒體文件,則標記必須被書寫在標記之後。 track元素是一個空元素,其開始標記與結束標記之間不包含任何內容。

瀏覽器支援

Internet Explorer 10, Chrome 以及 Opera 支援 標籤。

HTML 4.01 與 HTML 5 之間的差異

標籤是 HTML 5 中的新標籤。

【小編的相關建議】

##html include標籤的用法詳解(附使用實例)


html5 table標籤的樣式介紹(另附html5 table css居中的實例)

以上是html5 track標籤是什麼意思? html5 track標籤的使用方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板