給HTML5 Video 設置多語言字幕文件


現在各種支持HTML5的瀏覽器都能夠播放html5視頻了,但是對於字幕的支持卻很少,我們期待像DVD那樣強大的字幕。

往往我們還不得不通過js來做,着實是一件痛苦的事情。

現在IE10率先對HTML5 Video 字幕給與內置的支持,而且還支持多語言,可任意切換,真是太給力了。

示例代碼如下:

 

[html]  view plain  copy
 
  1. <video id="mainvideo" controls autoplay loop>  
  2.   <track src="en_track.vtt" srclang="en" label="English" kind="caption" default>  
  3.   <track src="cn_track.vtt" srclang="zh-cn" label="簡體中文" kind="caption">  
  4. </video>  

通過兩個<track>標簽分別指定了一個英文字幕文件、一個中文字幕文件,默認為中文字幕,用戶可以切換,也可以由程序腳本切換。
IE10支持2種字幕文件格式:

 

 

  • WebVTT : Web Video Text Track  (Web視頻文本軌道)
  • TTML : Timed Text Markup Language (時序文本標記語言)

 

WebVTT

WebVTT是UTF-8編碼格式的文本文件,內容示例如下:

 

[plain]  view plain  copy
 
  1. WEBVTT  
  2.   
  3. 00:00:01.878 --> 00:00:05.334  
  4. 曾經有一份真誠的愛情放在我面前,  
  5.   
  6. 00:00:08.608 --> 00:00:15.296  
  7. 我沒有珍惜,等我失去的時候我才后悔莫及,   
  8. 人世間最痛苦的事莫過於此。  

 

第一行必需是WEBVTT,接着空行,接下來是一行時間范圍+一行或多行字幕內容+空行,一行時間范圍+一行或多行字幕內容+空行,……

 

時間格式是HH:MM:SS.sss,時:分:秒.毫秒, 開始時間 --> 結束時間,-->的兩邊各有一個空格,這兩個時間必需寫在同一行。

時間都是相對於視頻開始的時間間隔。

時間之后是字幕文本,時間和字幕文本之間不能有空行,字幕文本可以是一行或多行,字幕文本中不能有空行。WebVTT字幕文件的MIME類型約定是"text/vtt",需要在IIS或者Apache等Web服務器中配置.

TTML

TTML是xml格式的文件,內容示例如下:

 

[html]  view plain  copy
 
  1. <?xml version='1.0' encoding='UTF-8'?>  
  2. <tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en' >  
  3. <body>  
  4. <div>  
  5.   
  6. <begin="00:00:01.878" end="00:00:05.334" >曾經有一份真誠的愛情放在我面前,</p>  
  7. <begin="00:00:08.608" end="00:00:15.296" >我沒有珍惜,等我失去的時候我才后悔莫及,<br/>人世間最痛苦的事莫過於此。</p>  
  8. </div>  
  9.   
  10. </body>  
  11. </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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM