資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用Video.js在影片中新增字幕？
在本教程中，我們將學習如何使用video.js庫向影片新增字幕。字幕，通常稱為隱藏式字幕，是在影片底部顯示的語音或其他文字行。向影片新增字幕可以真正增強聽力障礙或聽力受損觀眾的觀看體驗。
使用video.js新增字幕非常簡單，此外，video.js允許跨瀏覽器實現字幕。
讓我們在影片的下一部分學習如何使用video.js向我們的影片新增字幕。
如何使用Video.js在影片中新增字幕？
字幕，也稱為文字軌道，是HTML5的一項功能，允許使用者檢視時間觸發的文字。
注意 要建立定時文字軌道或字幕檔案，您需要一個WebVTT格式的文字檔案。通常，這些檔案包含帶有特定開始時間和結束時間的文字行。準備好影片的字幕檔案後，您可以將其新增到影片播放器中。
為了向video.js播放器新增時間觸發的文字軌道，我們將使用<track>標籤。此標籤也將成為<video>元素的子元素，就像<source>標籤一樣。
示例
使用以下程式碼向影片播放器新增文字軌道：
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://tutorialspoint.tw/videos/sample1080p.mp4" type="video/mp4" size="1080" > <track kind="subtitles" src="https://tutorialspoint.tw/videos/captions.vtt" srclang="en" label="English" default > </video> <script src="https://tutorialspoint.tw/videos/video1.mp4"></script> </body> </html>
在上面的程式碼片段中，我們使用<video-js>類建立了一個<video>元素。然後，我們在<source>標籤中添加了影片的路徑。
在其下方，<track>標籤的“kind”屬性設定為“subtitles”用於匯入字幕檔案。軌道的源語言（srclang）為英語（en），此字幕或音訊軌道的標籤將為“英語”。最後，將“default”屬性新增到軌道，這將確保如果我們使用多個文字軌道，則預設選擇此字幕。請確保使用字幕檔案的路徑更新“src”屬性。
既然我們已經瞭解瞭如何使用軌道向影片播放器新增字幕，那麼現在讓我們看看<track>標籤的一些重要屬性。
kind − 此標籤指定文字軌道的型別。支援的各種型別包括字幕、隱藏式字幕、章節、描述、元資料等。隱藏式字幕和字幕的區別在於，字幕是影片中顯示的對話的翻譯，而隱藏式字幕是相同對話的轉錄。
label − 此標籤負責指定文字軌道的名稱，該名稱將對終端使用者可見。如果您有多個文字軌道，則可以為每個軌道提供不同的標籤。
default − default屬性用於選擇當有多個字幕可用時顯示給使用者的預設軌道。
現在我們已經瞭解瞭如何將字幕檔案新增到影片播放器中，讓我們看一個如何向影片播放器新增多個字幕軌道的示例。
示例
請考慮以下新增多個字幕軌道的示例：
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://tutorialspoint.tw/videos/sample1080p.mp4" type="video/mp4" size="1080" > <track kind="subtitles" src="https://tutorialspoint.tw/videos/captions.vtt" srclang="en" label="English" default > <track kind="subtitles" src="https://tutorialspoint.tw/videos/captionsSpa.vtt" srclang="es" label="Spanish" > <track kind="subtitles" src="https://tutorialspoint.tw/videos/captionsFre.vtt" srclang="fr" label="French" > </video> <script src="https://tutorialspoint.tw/videos/video1.mp4"></script> </body> </html>
在上面的示例中，您可以看到我們添加了三個字幕檔案：英語、西班牙語和法語。所有三個軌道都有其特定的標籤及其檔案的路徑。每條軌道的語言都已在“srclang”屬性中提及。
執行以上程式碼時，網頁將顯示一個帶有三個字幕軌道的影片播放器，分別標記為英語（預設選中）、西班牙語和法語。
或者，我們也可以透過在<script>標籤中以程式設計方式將它們傳遞到video.js播放器選項中，以程式設計方式新增字幕軌道。
var player = videojs('my-video', { tracks: [{ src: 'https://domain/mysub.vtt', kind:'subtitles', srclang: 'en', label: 'English' }] });
在上面的程式碼片段中，我們在track屬性內的video.js播放器函式中添加了一個字幕軌道。track屬性的屬性（kind、src、srclang、label）與之前完全相同。
多個字幕軌道
您可能已經注意到track屬性是陣列型別，這意味著您可以將多個字幕軌道傳遞給此屬性。每個字幕軌道都是一個具有其特定屬性的JS物件。請考慮以下程式碼，以程式設計方式新增多個文字軌道。
示例
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://tutorialspoint.tw/videos/sample1080p.mp4" type="video/mp4" size="1080" > </video> <script src="https://tutorialspoint.tw/videos/video1.mp4"> </script> <script> var player = videojs('my-video', { tracks: [{ src: 'https://tutorialspoint.tw/videos/captionsEng.vtt', kind:'subtitles', srclang: 'en', label: 'English' },{ src: 'https://tutorialspoint.tw/videos/captionsSpa.vtt', kind:'subtitles', srclang: 'es', label: 'Spanish' }, { src: 'https://tutorialspoint.tw/videos/captionsFre.vtt', kind:'subtitles', srclang: 'fr', label: 'French' }] }); </script> </body> </html>
執行以上程式碼時，將在網頁中建立一個影片播放器，該播放器分別帶有3個標記為英語、西班牙語和法語的字幕軌道。
注意− 請確保使用您的影片和字幕檔案更新影片和字幕軌道的源。
結論
在本教程中，我們學習瞭如何將字幕軌道新增到使用video.js建立的影片中。我們還了解了向影片新增字幕文字軌道的方法：使用<track>標籤和在<script>標籤內以程式設計方式，並結合每個方法的工作HTML程式碼示例。
4K+ 次觀看
