幫你的 HTML5 影片添加字幕

在了解 HTML5 的 <video> 與 <audio> 元素之後,現在我們終於可透過原生方式,為自己的網站添加視訊與音訊了。同時也能透過 JavaScript API 撰寫控制方式,或隨著視訊檔案的長度,自行決定要如何和媒體內容互動。有責任感的開發者,就會隨時考量自己網站的親和力,讓大家更能輕鬆觀看網站內容,而不致受到視訊與音訊內容的影響。為避免觀眾聽不清楚,或是無法了解內容原文的意思,提供簡單易懂的內容當然更為重要。

多虧 HTML5 的 <track> 元素,讓我們能用原生方式加上字幕,讓媒體內容更簡單易懂。大多數的瀏覽器雖原生即支援此功能,但其支援程度仍有所差異。但 <track> 元素仍提供 JavaScript API,可存取並使用文字軌 (即如字幕)。本文亦將透過此 API 偵測到已加入至 HTML5 影片的字幕,也將說明該如何使用相關資料,為目前的文字軌建構出選擇清單。最後能跨多款瀏覽器,提供更一致的介面。

另置於 MDN 上的本篇文章,將進一步透過 HTMLMediaElementWindow.fullScreen API 而建構跨瀏覽器的影片播放器,並說明該如何自訂播放器的風格。本文則是透過 Web Video Text Tracks (WebVTT) 格式<track> 元素,為同一播放器添增字幕。

加上字幕的影片範例

文中範例即是具備字幕的影片播放器。此範例引用自 Blender 基金會所提供的《Sintel open movie》。

video-player-with-captions

注意:另可至 Github 找到原始碼,或可即時檢視範例

HTML5 與影片字幕

在解說該如何為影片播放器添加字幕之前,必須先讓你知道幾件事情。

「Caption」與「Subtitle」兩種字幕的不同

英文的「Caption」與「Subtitle」是不同的東西。因其目標觀眾不同,所要傳達的訊息也不同。如果你還不知道此兩者之間的差異,則建議你應該先行了解。但就技術上來說,這兩者卻是以相同方式建構而來的,所以本文所提到的要素都能套用到這兩者。

本文提到的文字軌均一律做為「caption」,其目標仍是讓「較難以了解影片原文意思」的觀眾能進一步享受影片樂趣;而非聽力有所障礙的觀眾。其定義與上述文章所提略有不同,特此說明。

<track> 元素

HTML5 可透過 Web Video Text Tracks (WebVTT) 格式而指定影片的字幕。WebVTT 規格目前仍在完善中,但其中絕大部分已經穩定並正式採用。

影片供應者 (如 Blender 基金會) 一般均提供 SubRip Text (SRT) 格式的字幕,且只要透過線上轉換器 (如 srt2vtt) 即可輕鬆將之轉換為 WebVTT。

對 HTML 與 CSS 的修正

針對為了添加字幕而修改的程式碼,本章節將提供相關摘要。如果你對此不感興趣,只想直接進入 JavaScript 與 CSS 的部份,可直接觀看原文中的〈Caption implementation〉章節。

我們在此範例中使用另一支不同的影片《Sintel》,透過其中的對話而進一步展現字幕的運作情形!

 

如果你正想用 HTML5 開發高親和力的網站,並為豐富的多媒體影片添加字幕,提高網站的瀏覽量,則可繼續閱讀原文《Adding captions and subtitles to HTML5 video》所提到的相關程式碼。期待各位開發者儘早提供更多元、更本地化的影片!

 

 

原文連結:Adding captions and subtitles to HTML5 video

 

 

您可能也會喜歡

目前找不到相關文章

共 1 則讀者回應

  1. 參照: 建構互動的 HTML5 影片 | 部落格 | Mozilla Taiwan

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *