開發(fā)視頻類APP的公司怎樣解決帶字幕的視頻?深圳APP開發(fā)公司本例將給各位介紹的是在HTML5視頻中添加字幕。聽起來這像是一項(xiàng)非常復(fù)雜的工作，不過HTML5已經(jīng)將字幕文件進(jìn)行抽象獨(dú)立，同時(shí)非常簡(jiǎn)單的就能在任意視頻中添加字幕。本節(jié)示例不能直接用瀏覽器打開文件，否則Chrome下會(huì)報(bào)出“Cross-origintexttrackloaddeniedbyCross-OriginResourceSharingpolicy.”的錯(cuò)誤信息，表示字幕文件加載違反了跨域資源共享策略。
所以，需要將文件部署在Web服務(wù)器上，如Apache、Nginx、IIS等。部署完畢后，用Chrome打開對(duì)應(yīng)網(wǎng)址，點(diǎn)擊屏幕中央的三角播放按鈕，視頻的下方出現(xiàn)字幕，效果如圖3.10所示。
點(diǎn)擊播放按鈕，視頻下方出現(xiàn)字幕本例的代碼構(gòu)建在“3-7.處理帶字幕的視頻.html”的基礎(chǔ)上，沒有額外的腳本改動(dòng)。在HTML中增加字幕結(jié)構(gòu)，代碼如下：
< video width=" 480" height=" 320" controls poster="../ images/ BigBuck. png" preload=" none"> < source src="../ res/ BigBuck. webm" type=" video/ mp4"> < track label=" English subtitles" kind=" captions" srclang=" en" src="../ res/ BigBuck. vtt" default> </ vidde>
track標(biāo)簽為視頻規(guī)定外部文本軌道，標(biāo)簽帶有多種新屬性，具體如下：
default：表示該軌道是默認(rèn)的。
kind：表示軌道文本類型，如：captions、chapters、descriptions、metadata、subtitles。
label：軌道的標(biāo)簽或標(biāo)題。
src：軌道的URL。
srclang：軌道的語言，若kind屬性值是“subtitle”，則該屬性是必需的。本例track標(biāo)簽的軌道文件為1個(gè)WebVTT文件。WebVTT文件是一個(gè)簡(jiǎn)單的純文本，打開“../res/BigBuck.vtt”，代碼如下：
WEBVTT // 文本 軌道 文件 開頭， 必 填 00: 00. 000 --> 00: 01. 000 < c> 字幕 出現(xiàn)--- 1</ c> // 表示 可 以帶 CSS 的 文本 00: 01. 000 --> 00: 02. 000 < i> 字幕 出現(xiàn)--- 2</ i> // 斜體 文本 00: 02. 000 --> 00: 03. 000 < b> 字幕 出現(xiàn)--- 3</ b> // 粗體 文本 00: 03. 000 --> 00: 04. 000 < u> 字幕 出現(xiàn)--- 4</ u> // 帶下 劃線 文本 00: 04. 000 --> 00: 05. 000 < v. loud> 字幕 出現(xiàn)--- 5 // 聲音 文本 加 樣式 00: 05. 000 --> 00: 06. 000 < v Man> 字幕 出現(xiàn)--- 6 // 聲音 文本 加 人物 名
在WebVTT文本中，所有c標(biāo)簽都可以帶CSS樣式，比如<c.demoClass>。還有一種v標(biāo)簽，也可以帶樣式，同時(shí)還可以加入人名。本例給v標(biāo)簽加上2種樣式類，如下代碼所示：::cue(. loud) { font- size: 2em; color: Red;} ::cue( v[ voice=" Man"]) { color: green
該類聲音文本樣式需要以字符串“::cue”開頭，cue表示指定文本和視頻文件中字幕的時(shí)間定位。小括號(hào)中間的內(nèi)容如同CSS，表示選擇器的名稱。其中的“.load”如同一般CSS，表示文本中的樣式類。其中，“v[voice="Man"]”表示對(duì)應(yīng)人物音軌文字的樣式類。
深圳APP開發(fā)公司小結(jié)本章主要介紹了使用HTML5多媒體特性，包括音頻與視頻設(shè)計(jì)，并通過多個(gè)實(shí)際范例介紹了如何使用HTML5多媒體特性。本章需要APP開發(fā)公司的程序員了解的雖然僅僅只有兩個(gè)標(biāo)簽audio和video，但它們延伸出來的技術(shù)卻不是新手可以輕松掌握的，希望讀者能多多練習(xí)，直到理解了每種方法背后的含義。博納網(wǎng)絡(luò)編輯整理。
