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

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

html5 track標籤的定義和用法:

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

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

html5<track>標籤可選的屬性:

  • 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"分別表示字幕檔案為英語和漢語。

<track>標籤支援html全域屬性和html事件屬性

html5 track標籤的格式:

<track src="URL">

HTML5 <track> 標籤執行個體

帶有兩個字幕軌道的視頻:

<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 <track> 元素。

訪問 html5中的Track 對象

你可以通過使用 getElementById() 來訪問 <track> 元素:

var x = document.getElementById("myTrack");

建立html5中的Track 對象

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

var x = document.createElement("TRACK");

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

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

瀏覽器支援

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

HTML 4.01 與 HTML 5 之間的差異

<track> 標籤是 HTML 5 中的新標籤。

【小編的相關推薦】

html include標籤的用法詳解(附使用執行個體)

html5 table標籤的樣式介紹(另附html5 table css置中的執行個體)

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.