HTML5 video視訊字幕的使用和製作

Z不懂發表於2019-02-16
HTMLIDE

首先先看一下原生HTML5 video對字幕的支援顯示情況:

字幕截圖

元素<track>

HTML5允許我們使用元素為視訊指定字幕。這個元素的各種屬性允許我們指定這樣的東西，比如我們新增的內容的型別，它所在的語言，當然還有對包含實際字幕資訊的文字檔案的引用。<track>

<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的屬性介紹：

  • kind被賦予一個值subtitles，表示檔案包含的內容的型別

  • label被賦予一個值，指示該字幕集所用的語言 - 例如English或Deutsch- 這些標籤將出現在使用者介面中，以允許使用者容易地選擇他們想要看到的字幕語言。

  • src 在每種情況下都會分配一個指向相關WebVTT字幕檔案的有效URL。

  • srclang 指示每個字幕檔案的內容所在的語言。

  • 該default屬性在英語元素上設定，向瀏覽器表明這是預設的字幕檔案定義，當字幕開啟並且使用者沒有做出特定選擇時使用。<track>

WebVTT 字幕檔案

包含實際字幕資料的檔案是遵循指定格式的簡單文字檔案，在這種情況下是Web視訊文字軌道（WebVTT）格式。該WebVTT插入規範仍在開發中，但它的主要部分是穩定的，所以我們今天可以使用它。

視訊提供商（如Blender Foundation）以其視訊的文字格式提供字幕和副標題，但通常採用SubRip Text（SRT）格式。可以使用線上轉換器（如srt2vtt）將這些轉換為WebVTT。

檔案格式規範：

檔案的字尾名為 .vtt

.vtt檔案的MIME type是text/vtt

在Chrome和Firefox瀏覽器下，.vtt字幕是可以無障礙載入顯示的，但是對於IE10+瀏覽器，雖然也支援.vtt字幕，但是卻需要定義MIME type，否則會無視WebVTT格式。比較簡單方式就是在字幕所在資料夾下面新增個.htaccess檔案，裡面寫上AddType text/vtt .vtt。

//檔案開頭下必須先宣告 **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檔案生成器生成

字幕css樣式設定

::cue偽元件是用於在VTT軌道的媒體中使用字幕和其他線索。只有少數CSS屬性可以應用於文字提示：

  • color
  • opacity
  • visibility
  • text-decoration
  • text-shadow
  • background
  • outline
  • font
  • line-height
  • white-space

注意：:: 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);
}
複製程式碼

瀏覽器相容

  • IE

預設情況下，Internet Explorer 10+字幕是啟用的，並且預設控制元件包含一個按鈕和一個選單，該選單提供與我們剛剛構建的選單相同的功能。該default屬性也受支援。

注意：除非您定義MIME型別，否則IE將完全忽略WebVTT檔案。這可以通過將.htaccess檔案新增到包含的相應目錄輕鬆完成AddType text/vtt .vtt

  • 蘋果瀏覽器

Safari 6.1+對Internet Explorer 10+具有類似支援，顯示帶有不同可用選項的選單，並增加了一個“自動”選項，允許瀏覽器進行選擇。

  • Chrome和Opera

這些瀏覽器也有類似的實現：預設情況下，字幕是啟用的，預設控制集包含一個'cc'按鈕，可以開啟和關閉字幕。Chrome和Opera忽略元素default上的屬性，而是嘗試將瀏覽器的語言與字幕的語言相匹配<track>

案例展示:demo

參考資料

如果覺得還不錯，還請給我一個贊鼓勵一下！

相關文章