如今各類支持HTML5的瀏覽器都可以播放html5視頻了，可是對於字幕的支持卻不多，咱們期待像DVD那樣強大的字幕。javascript
每每咱們還不得不經過js來作，着實是一件痛苦的事情。html
如今IE10率先對HTML5 Video 字幕給與內置的支持，並且還支持多語言，可任意切換，真是太給力了。html5
示例代碼以下：java
- <video id="mainvideo" controls autoplay loop>
- <track src="en_track.vtt" srclang="en" label="English" kind="caption" default>
- <track src="cn_track.vtt" srclang="zh-cn" label="簡體中文" kind="caption">
- </video>
經過兩個<track>標籤分別指定了一個英文字幕文件、一箇中文字幕文件，默認爲中文字幕，用戶能夠切換，也能夠由程序腳本切換。
IE10支持2種字幕文件格式：瀏覽器
- WebVTT : Web Video Text Track (Web視頻文本軌道)
- TTML : Timed Text Markup Language (時序文本標記語言)
WebVTT
WebVTT是UTF-8編碼格式的文本文件，內容示例以下：服務器
- WEBVTT
- 00:00:01.878 --> 00:00:05.334
- 曾經有一份真誠的愛情放在我面前，
- 00:00:08.608 --> 00:00:15.296
- 我沒有珍惜，等我失去的時候我才後悔莫及，
- 人世間最痛苦的事莫過於此。
第一行必需是WEBVTT，接着空行，接下來是一行時間範圍＋一行或多行字幕內容＋空行，一行時間範圍＋一行或多行字幕內容＋空行，……app
時間格式是HH:MM:SS.sss，時:分:秒.毫秒， 開始時間 --> 結束時間，-->的兩邊各有一個空格，這兩個時間必需寫在同一行。ide
時間都是相對於視頻開始的時間間隔。oop
時間以後是字幕文本，時間和字幕文本之間不能有空行，字幕文本能夠是一行或多行，字幕文本中不能有空行。WebVTT字幕文件的MIME類型約定是"text/vtt"，須要在IIS或者Apache等Web服務器中配置.ui
TTML
TTML是xml格式的文件，內容示例以下：
- <?xml version='1.0' encoding='UTF-8'?>
- <tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en' >
- <body>
- <div>
- <p begin="00:00:01.878" end="00:00:05.334" >曾經有一份真誠的愛情放在我面前，</p>
- <p begin="00:00:08.608" end="00:00:15.296" >我沒有珍惜，等我失去的時候我才後悔莫及，<br/>人世間最痛苦的事莫過於此。</p>
- </div>
- </body>
- </tt>
結構很明確了，分別是tt標籤，body標籤，div標籤，p標籤，br標籤，和HTML很像啊！p元素的begin/end屬性指定了字幕的起止時間。
TTML文件的MIME類型約定爲application/ttml+xml
經過在video標籤內使用1個或多個track標籤來指定1個或多個語言的字幕文件，每一個track元素對應一個字幕文件。
track標籤的屬性主要有4個，以下表：
| 屬性 | 描述 |
|---|---|
| kind |
定義字幕內容類型，只能是這五種之一: subtitles, captions, descriptions, chapters, metadata. |
| src |
字幕文件的URL地址 |
| srclang |
字幕文件的語言類型，標識信息的做用，播放器不使用這個屬性。 |
| label |
字幕標籤，每一個字幕元素必需設置一個惟一不重複的標籤，切換字幕時顯示的名稱。 |
| default |
指定是不是默認字幕。若是每一個都不指定，將不會自動顯示字幕. |
能夠經過javascript方式訪問每個字幕元素，甚至其中的每一句臺詞。這一部分代碼比較多，我就不展開了，有興趣的能夠本身看原文。
參考連接： http://msdn.microsoft.com/en-us/library/ie/hh673566(v=vs.85).aspx