HTML5視頻字幕與WebVTT · Web前端-關注HTML5與CSS3

? ? ? 譯自：[http://html5doctor.com/video-subtitling-and-webvtt/](http://html5doctor.com/video-subtitling-and-webvtt/) ? ? ??轉載請標明出處：蔣宇捷的博客([http://blog.csdn.net/hfahe](http://blog.csdn.net/hfahe)) ? ? ? -------- ? ? ? 我們在幾年前就已經可以不需要插件在瀏覽器里播放視頻了。但是在編碼解碼器方面，仍然存在一些困擾。現在問題已經集中在視頻本身上面了：下一步將是添加資源到視頻里，使其更容易訪問并且為觀眾提供更多選擇。 ? ? ? 我們目前還沒有說到下面的內容，這代表視頻還不是非常便利，用戶還不能非常輕松的定位到某一個特定的段落。值得慶幸的是，有一個名為[WebVTT（網絡視頻文本軌道）](http://www.whatwg.org/specs/web-apps/current-work/webvtt.html)的新格式標準正在籌劃中。截止目前，它還只是在WHATWG的規范中，但是最近成立的[W3C網絡媒體文本軌道社區組](http://www.w3.org/community/texttracks/)將會很快在W3C中引入WebVTT規范。 *“你可能還記得一個類似的名為WebSRT的格式，最近正在討論中。WebSRT已經被改名并被WebVTT所替代。”* ? ? ? 一個WebVTT（.vtt）文件是一個簡單的純文本，里面包含了幾種類型的視頻信息： ? ? ??**字幕** ? ? ??關于對話的轉譯或者翻譯。 ? ? ??**標題** ? ? ??類似于標題，但是還包括音響效果和其他音頻信息。 ? ? ??**說明** ? ? ??預期為一個單獨的文本文件，通過屏幕閱讀器描述視頻。 ? ? ??**章節** ? ? ??旨在幫助用戶瀏覽整個視頻。 ? ? ??**元數據** ? ? ??默認不打算展示給觀眾的、和視頻有關的信息和內容。但是你可以使用Javascript來訪問。 ? ? ? 本文主要討論[字幕和標題](http://html5doctor.com/video-subtitling-and-webvtt/#contents)，但是也會簡單的提及[章節](http://html5doctor.com/video-subtitling-and-webvtt/#chapters)。 *“超出本文的范圍但是值得提到的是[文本軌道API](http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#text-track-api)，除其他內容外，表示共有多少文本軌道以及已經載入和準備使用多少軌道。如果你已經使用了這個API，[請告訴我們](http://html5doctor.com/ask-the-doctor/)。”* **如何制作并鏈接到一個WebVTT文件** ? ? ??制作一個WebVTT文件所需的只是一個簡單的文本編輯器。在文件的第一行輸入WEBVTT并且將其保存為一個.vtt格式的文件。未來我們預計現有的字幕工具如[Universal Subtitles](http://www.universalsubtitles.org/)可以導出WebVTT格式。 ------------------------------------------------------------------------------------------------------------------------------------------ WEBVTT 這是一個最簡單有效的WebVTT文件 ------------------------------------------------------------------------------------------------------------------------------------------ ? ? ??這就是所有你需要開始的。下一步，我們要在HTML文檔中鏈接到這個文件。我們通過video元素的子元素[<track>](http://html5doctor.com/video-the-track-element-and-webm-codec/)來實現這一點。<track>元素包括一些可選的屬性： ?源WebVTT文件（src） ?軌道的語言（srclang） ?用戶可讀的標簽（label）以及 ?是什么類型（kind）的軌道。類型屬性的值來自于上面的列表（例如subtitles、captions等）。 ? ? ??在下面的例子里，我們使用一個<track>字幕元素。 ~~~ <video width="640" height="480" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" />  </video> ~~~ ? ? ??關于屬性的一些說明： ?如果沒有指定類型，默認為字幕（subtitles）。 ?如果類型是字幕（subtitles），需要指定srclang。 ?不能有兩個相同類型（king）的軌道有同一個標簽（label）。在上面的例子中，我們為一個`<video>`元素使用了兩個不同的<src>元素（為了美妙的跨瀏覽器）。緊跟視頻源后的是<track>元素，你可以有多個<track>元素來設置不同語言的字幕、標題和說明。 *“<track>并沒有預設成一種特定的文件格式。[微軟](http://html5labs.interoperabilitybridges.com/prototypes/video-captioning/video-captioning/info)支持[TTML格式](http://www.w3.org/TR/ttaf1-dfxp/)，但是這種格式不會被其他瀏覽器廠商所支持”。* **WebVTT內容** ? ? ??現在我們知道如何創建一個WebVTT文件，以及如何在HTML文檔中引用它。但它里面有什么內容？在該文件中，我們列出什么是“索引”。WebVTT文件可能只有一個索引，但它也可以包含任何你想要的個數。每個索引從一個ID開始，緊跟的是時間的設置，然后是文字。每個索引由一個空行分隔。這里有一個標題的示例： ------------------------------------------------------------------------------------------------------------------------------------------ WEBVTT 1 00:00:01.000 --> 00:00:10.000 這是文本的第一行，從第1秒顯示到第10秒。 2 00:00:15.000 --> 00:00:20.000 這是文本的第二行被分割為兩行 WebVTT示例內容 ------------------------------------------------------------------------------------------------------------------------------------------ ? ? ??上面的例子有兩個索引。時間必須寫成hh:mm:ss.mmm格式，所以在這個例子中，時間發生在20秒內。第二個索引會自動的被分成兩行文字。 ? ? ??如果你有一段文本，需要以卡拉OK /彩繪標題的樣式顯示，那么你可以將計時器與文本內聯： ------------------------------------------------------------------------------------------------------------------------------------------ 1 00:00:01.000 --> 00:00:10.000 Never gonna give you up <00:00:01.000> Never gonna let you down <00:00:05.000> Never gonna run around and desert you 卡拉OK風格的標題（譯者注：以上歌詞來自于歌曲《never gonna give you up》） ------------------------------------------------------------------------------------------------------------------------------------------ **樣式選項** ? ? ??前面的例子中指定了字幕和標題所需的最低配置，但你也可以為標題設置樣式。讓我們從索引的設置開始，可以寫在時間設置的同一行： ? ? ??D:vertical / D:vertical-lr ? ? ??垂直的顯示文本而不是水平的。它也指定文本是增長到左邊（ vertical）還是右側（ vertical-lr ）。 ? ? ??L:X / L:X% ? ? ??一個數字或百分比。如果是一個百分點，那么它指從框架頂部開始的位置。如果是一個數字，它表示會是在多少行。 ? ? ??T:X% ? ? ??視頻上的水平文字位置。T:100% 表示文本會放在視頻的右側。 ? ? ??A:start / A:middle / A:end ? ? ??文本在盒子內的對齊方式。start是左對齊， middle是居中對齊， end是右對齊。 ? ? ??S:X% ? ? ??文本盒子的寬度，表示為視頻寬度的百分比。 ? ? ??要使用這些設置，像下面這樣把它們放在時間設置的旁邊： ? ? ??00:00:01.000 --> 00:00:10.000 A:middle T:50% ? ? ??00:00:01.000 --> 00:00:10.000 A:end D:vertical ? ? ??00:00:01.000 --> 00:00:10.000 A:start T:100% L:0% ? ? ??這會表現為以下的效果： ------------------------------------------------------------------------------------------------------------------------------------------ ![](https://box.kancloud.cn/2016-08-09_57a9a29ef2a73.png) 字幕顯示和對齊的例子 ------------------------------------------------------------------------------------------------------------------------------------------ ? ? ??除了上面的索引設置，你還可以為文本使用內聯樣式： ? ? ??**粗體文本** ? ? ??Lorem ipsum ? ? ??**斜體文本** ? ? ??dolor sit amet ? ? ??**帶下劃線的文本** ? ? ??consectetuer adipiscing ? ? ??**Ruby文本**（譯者注：見我的《[談HTML5和CSS3的國際化支持](http://blog.csdn.net/hfahe/article/details/6293021)》一文） ? ? ??<ruby>見<rt>み</rt></ruby> ? ? ??你甚至可以使用<c.myClass></c>來為一段文字應用CSS樣式，給我們更多的樣式選擇。 ? ? ??最后，您可以添加一個聲明，代表聲音命名的<v Tom></v>。本聲明完成了三件事情： 1.標題將在標題文本外展示語音（男聲）。 2.語音的名字可以被一個屏幕閱讀器讀取，為男性或女性使用不同的聲音事件。 3.它為樣式提供了一個勾子，例如，所有男聲的標題可以顯示為藍色的。 **章節** ? ? ??你可以和提供字幕、標題同樣的方式提供一個視頻章節的列表。開始同樣的使用WEBVTT聲明，然后是每個索引、聲明的的章節編號，啟動和停止時間、章節標題： ------------------------------------------------------------------------------------------------------------------------------------------ <tracksrc="chapters.vtt" kind="chapters" srclang="en" /> HTML<track>元素為視頻提供章節設置 ------------------------------------------------------------------------------------------------------------------------------------------ WEBVTT? Chapter 1? 00:00:01.000 --> 00:00:10.000 Introductionto HTML5 WebVTT文件包含視頻章節標記 ------------------------------------------------------------------------------------------------------------------------------------------ **瀏覽器支持** ? ? ??關于WebVTT一個小問題：目前沒有一個單獨的瀏覽器支持它。所有主流瀏覽器實現它的工作已經開始，所以我們應該很快的可以看到一些成果。值得慶幸的是，在此期間，有幾個JavaScript polyfills（譯者注：術語polyfill來源于一種填補裂縫的黏土的英國品牌 Polyfilla-即美國人熟知的填泥料。這里polyfill用來填補瀏覽器功能上的漏洞，模擬HTML5相關功能和技術）可用： ?[js_videosub](http://www.storiesinflight.com/js_videosub/) ?[Playr](http://www.delphiki.com/html5/playr/) ?[MediaElementJS](http://mediaelementjs.com/) ?[LeanBack](http://dev.mennerich.name/showroom/html5_video/)播放器(以及即將到來的[新版本](http://leanbackplayer.com/test/webvtt.html)) ?[Captionator](https://github.com/cgiffard/Captionator) **演示** ? ? ??我們發布了一個使用[Playr](http://www.delphiki.com/html5/playr/) polyfill的[快速演示](http://html5doctor.com/demos/webvtt/)。我們最開始使用[MediaElementJS ](http://mediaelementjs.com/)，但它不像[Playr](http://www.delphiki.com/html5/playr/)那樣支持許多特性，例如文本多行分隔和CSS樣式。在演示中，字幕在2秒到15秒間使用了粗體、下劃線以及自定義樣式。這里是相關聯的[WebVTT文件](http://html5doctor.com/demos/webvtt/subtitles.vtt) 。 **結論** ? ? ??本文介紹了為視頻創建合適的WebVTT文件來添加字幕或者標題的基礎知識。我們知道如何添加索引和章節，以及如何添加樣式和修改視頻上文本出現的方式。雖然還沒有瀏覽器正式支持它，但是未來會有很多為可訪問的視頻而支持，所以敬請[W3C網絡媒體文本軌道社區組](http://www.w3.org/community/texttracks/)。 ? ? ? 最后，讓我們感謝[@silviapfeiffer](http://twitter.com/#!/silviapfeiffer)抽出時間來回答有關WebVTT的一些問題，以及她在這一領域的大量工作。 **閱讀** ?關注[@silviapfeiffer](http://twitter.com/#!/silviapfeiffer) ?[W3C網絡媒體文本軌道社區組](http://www.w3.org/community/texttracks/) ?[最近的開發動態](http://blog.gingertech.net/2011/06/27/recent-developments-around-webvtt/) ?[演示: HTML5可訪問視頻以及WebVTT文件格式](http://html5videoguide.net/presentations/WebVTT/) ?[HTML5可訪問視頻以及WebVTT文件格式–語音描述](http://www.youtube.com/watch?v=gK72pcu3cpk) ?[重溫關于LeanBack播放器的筆記和思考](http://leanbackplayer.com/other/webvtt.html) ?[WebVTT驗證器](http://quuz.org/webvtt/) ?[WebVTT和視頻字幕](http://www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitles) ?[開放視頻聯盟](http://www.openmediadevelopers.org/pmwiki.php/Main/OVC2011VidA11y) ?[了解WebVTT文件格式(草案)](http://www.delphiki.com/webvtt/) ?[創建HTML5視頻的字幕和語音描述](http://scottbw.wordpress.com/2011/06/28/creating-subtitles-and-audio-descriptions-with-html5-video/)