html5的video如何附帶字幕？

王铁柱6發表於2024-12-07
HTMLIDE

HTML5 的 <video> 元素可以透過 <track> 元素來新增字幕。<track> 元素允許你指定包含字幕資料的外部檔案，並讓瀏覽器根據使用者的設定或 JavaScript 程式碼來控制字幕的顯示。

以下是幾種新增字幕的方法以及示例：

1. 使用 <track> 元素連結外部字幕檔案:

這是最常用的方法，字幕檔案可以是 WebVTT (.vtt) 或 SRT (.srt) 格式。

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="video.mp4">link to the video</a> instead.</p>
</video>
  • src 屬性: 指向字幕檔案的 URL。
  • kind 屬性: 指定軌道的型別。常用的值為 subtitles (字幕), captions (隱藏式字幕，包含非對話資訊，例如聲音描述) 和 descriptions (音訊描述)。
  • srclang 屬性: 指定字幕的語言，使用兩字母的語言程式碼 (例如 "en" 表示英語, "zh" 表示中文)。
  • label 屬性: 顯示在字幕選擇選單中的名稱。
  • default 屬性: 指定預設顯示的字幕軌道。

2. WebVTT 檔案格式示例 (subtitles_zh.vtt):

WEBVTT

00:00:01.000 --> 00:00:05.000
你好，世界！

00:00:06.000 --> 00:00:10.000
這是 WebVTT 字幕示例。

3. SRT 檔案格式示例 (subtitles_en.srt):

1
00:00:01,000 --> 00:00:05,000
Hello, world!

2
00:00:06,000 --> 00:00:10,000
This is an example of SRT subtitles.

4. 使用 JavaScript 動態新增 <track> 元素:

const video = document.querySelector('video');
const track = document.createElement('track');
track.kind = 'subtitles';
track.label = 'English';
track.srclang = 'en';
track.src = 'subtitles_en.vtt';
track.default = true; // 設定為預設字幕
video.appendChild(track);

// 監聽字幕載入事件
track.addEventListener('load', () => {
  console.log('Subtitles loaded!');
});

關鍵點:

  • 跨域訪問: 如果字幕檔案和 HTML 檔案不在同一個域，需要確保字幕檔案伺服器允許跨域訪問。
  • 編碼: 確保字幕檔案的編碼與 HTML 檔案的編碼一致，通常是 UTF-8。
  • 瀏覽器相容性: 現代瀏覽器對 <track> 元素和 WebVTT 格式都有很好的支援。
  • 樣式: 可以使用 CSS 為字幕設定樣式，例如字型、顏色和大小。 搜尋 "CSS styling for VTT" 可以找到更多資訊.

透過以上方法，你就可以輕鬆地為 HTML5 影片新增字幕，提升使用者體驗，特別是對於聽力障礙使用者或需要不同語言字幕的使用者。

希望這些資訊能幫到你!

相關文章