首先先看一下原生HTML5 video對字幕的支持顯示狀況:css
HTML5容許咱們使用<track>元素爲視頻指定字幕。這個元素的各類屬性容許咱們指定這樣的東西,好比咱們添加的內容的類型,它所在的語言,固然還有對包含實際字幕信息的文本文件的引用。html
<video id="video" controls> <source src="./step.mp4" type="video/mp4"> <track label="中文字幕" kind="subtitles" chapters metadata srclang="zh" src="./caption.vtt" default> <track label="ABC" kind="subtitles" srclang="de" src="./caption1.vtt"> <track label="Number" kind="subtitles" srclang="es" src="./caption2.vtt"> </video>
track的屬性介紹:
包含實際字幕數據的文件是遵循指定格式的簡單文本文件,在這種狀況下是Web視頻文本軌道(WebVTT)格式。該WebVTT插入規範仍在開發中,但它的主要部分是穩定的,因此咱們今天可使用它。html5
視頻提供商(如Blender Foundation)以其視頻的文本格式提供字幕和副標題,但一般採用SubRip Text(SRT)格式。可使用在線轉換器(如srt2vtt)將這些轉換爲WebVTT。git
文件格式規範:github
文件的後綴名爲 .vttweb
.vtt文件的MIME type是text/vtt瀏覽器
在Chrome和Firefox瀏覽器下,.vtt字幕是能夠無障礙加載顯示的,可是對於IE10+瀏覽器,雖然也支持.vtt字幕,可是卻須要定義MIME type,不然會無視WebVTT格式。比較簡單方式就是在字幕所在文件夾下面添加個.htaccess文件,裏面寫上AddType text/vtt .vtt。ruby
//文件開頭下必須先聲明 **WEBVTT** WEBVTT // 起始時間 --> 結束時間,單位爲毫秒 00:00:00.001 --> 00:00:03.000 // 對應上面的時間顯示字幕,能夠單獨設置樣式,aa相似class類名 <v aa>九幽陰靈1111</v> 00:00:03.001 --> 00:00:06.000 <v bb>諸天神魔2222</v> 00:00:06.001 --> 00:00:09.000 以我血軀3333 00:00:09.001 --> 00:00:12.000 奉爲犧牲4444 00:00:12.001 --> 00:00:15.000 三生七世5555
這個文件規範很簡單,能夠本身手寫,也可使用張鑫旭老師開發的webvtt.vtt文件生成器生成ide
字幕css樣式設置
::cue僞元件的關鍵是靶向個別文本軌道線索用於定型的,由於它的任何限定球杆匹配。只有少數CSS屬性能夠應用於文本提示:wordpress
注意::: cue的線索樣式目前適用於Chrome,Opera和Safari,但還沒有在Firefox上使用。
WebVTT還支持一些HTML標籤進行樣式控制,常見的有聲音 v 標籤,顏色 c 標籤,加粗b標籤,傾斜i標籤,下劃線u標籤,還有ruby和lang標籤等。
//設置字幕的樣式 video::cue{ background-color:transparent; color:white; font-size:20px; line-height: 100px; } // 設置單行字幕的樣式 video::cue(v[voice=aa]){ color:green; } video::cue(v[voice=bb]){ color:rgb(0, 26, 128); }
瀏覽器兼容
默認狀況下,Internet Explorer 10+字幕是啓用的,而且默認控件包含一個按鈕和一個菜單,該菜單提供與咱們剛剛構建的菜單相同的功能。該default屬性也受支持。
注意:除非您定義MIME類型,不然IE將徹底忽略WebVTT文件。這能夠經過將.htaccess文件添加到包含的相應目錄輕鬆完成AddType text/vtt .vtt
Safari 6.1+對Internet Explorer 10+具備相似支持,顯示帶有不一樣可用選項的菜單,並增長了一個「自動」選項,容許瀏覽器進行選擇。
這些瀏覽器也有相似的實現:默認狀況下,字幕是啓用的,默認控制集包含一個'cc'按鈕,能夠打開和關閉字幕。Chrome和Opera忽略元素default上的屬性,<track>而是嘗試將瀏覽器的語言與字幕的語言相匹配
若是以爲還不錯,還請給我一個贊鼓勵一下!