資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 Video.js 播放器中設定不同的語言？
在本教程中，我們將學習如何為使用 video.js 庫建立的影片播放器設定不同的語言。Video.js 是一個非常流行的 JavaScript 包，用於為多種影片格式構建 Web 瀏覽器影片播放器。它支援所有現代影片格式，包括 YouTube、Vimeo 和 Flash，以及所有標準影片播放格式，包括 mp4、WebM、Flv 等。Video.js 還提供了大量選項來根據您的喜好更改和自定義影片播放器。
在本教程中，我們將瞭解如何使用 video.js 更改影片播放器的語言。當母語不是英語的使用者與影片播放器互動時，此用例非常有用。因此，讓我們繼續在教程的下一部分中使用 video.js 更改影片播放器的語言。
如何在 Video.js 播放器中設定不同的語言？
在本教程的這一部分中，我們將嘗試瞭解使用 video.js 將影片播放器的語言更改為“西班牙語”的方法，並藉助示例進行說明。更改影片播放器的語言將修改所有按鈕的控制文字。因此，當您將滑鼠懸停在按鈕上時，顯示的文字將使用不同的語言。
先決條件 - 假設您知道如何使用 video.js 庫建立基本的影片播放器。
現在，更改影片播放器的語言是一個非常簡單的過程。我們只需要遵循以下步驟 -
建立語言對映 JS 檔案
將 JS 檔案傳遞到我們的影片播放器引用
讓我們繼續建立語言 JSON 檔案。
建立語言對映 JS 檔案
要選擇不同的語言檔案，首先我們需要建立一個 JS 檔案，該檔案將 video.js 播放器按鈕文字對映到不同語言中的特定文字。例如，西班牙語中的“播放影片”稱為“Reproducir Vídeo”，或者西班牙語中的“剩餘時間”稱為“Tiempo restante”。
考慮以下程式碼片段以新增語言對映 -
videojs.addLanguage('es', {
"Play": "Reproducir",
"Play Video": "Reproducir Vídeo",
"Pause": "Pausa",
"Current Time": "Tiempo reproducido",
"Duration": "Duración total",
"Remaining Time": "Tiempo restante",
"Fullscreen": "Pantalla completa",
"Non-Fullscreen": "Pantalla no completa",
})
在上面的程式碼片段中，我們使用了 video.js 提供的 addLanguage 方法。在方法內部，我們傳遞了語言名稱“es”，然後我們傳遞了與 video.js 播放器按鈕相對應的所有對映。將此檔案另存為“es.js”，並將其儲存在可訪問的位置。
現在，我們可以使用此檔案將語言更改為影片播放器中的各種按鈕，但是我們只包含了對映翻譯，而 video.js 具有許多按鈕文字。因此，我們不會建立自己的檔案，而是將使用 video.js 提供的對映。
在 video.js 的 node_modules 資料夾中，您可以找到許多此類按鈕到各種流行語言的語言翻譯對映。例如，“es.js”檔案包含西班牙語的對映，其中包含 80 多個翻譯，如下所示。
videojs.addLanguage('es', {
"Play": "Reproducir",
"Play Video": "Reproducir Vídeo",
"Pause": "Pausa",
"Current Time": "Tiempo reproducido",
"Duration": "Duración total",
"Remaining Time": "Tiempo restante",
"Stream Type": "Tipo de secuencia",
"LIVE": "DIRECTO",
"Loaded": "Cargado",
"Progress": "Progreso",
"Fullscreen": "Pantalla completa",
"Non-Fullscreen": "Pantalla no completa",
"Mute": "Silenciar",
"Unmute": "No silenciado",
"Playback Rate": "Velocidad de reproducción",
"Subtitles": "Subtítulos",
"subtitles off": "Subtítulos desactivados",
"Captions": "Subtítulos especiales",
"captions off": "Subtítulos especiales desactivados",
"Chapters": "Capítulos",
// … other items
})
現在我們已經準備好翻譯對映檔案，讓我們繼續下一節，我們將在此節中在本地專案中使用此檔案來更改影片播放器的語言。
將 JS 檔案傳遞到我們的影片播放器引用
一旦我們有了語言對映翻譯檔案，無論是自定義檔案還是 video.js 提供的預設檔案，我們都需要使用以下程式碼片段將其匯入本地專案 -
<!-- Importing the langugage json file from node_modules folder --> <script src="node_modules/video.js/dist/lang/es.js"></script>
在程式碼的 <head> 標記中新增上述程式碼將包含此語言對映檔案。請仔細檢查檔案路徑。
將語言匯入程式碼後，我們可以使用它並使用 video.js 提供的“language”方法將其新增到影片播放器引用中。
// Initializing the video player
var player = videojs('my-video');
// Changing the language of video player to Spanish
player.language('es');
在上面的程式碼片段中，我們初始化了 video.js 播放器，並將匯入的語言（西班牙語）新增到播放器中。
示例 1
在本地專案中組合上述兩個程式碼片段將使示例看起來像這樣 -
<!DOCTYPE html>
<html>
<head>
<title>Setup Languages in Video.js Player</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<!-- Importing the language json file from node_modules folder -->
<script src="node_modules/video.js/dist/lang/es.js"></script>
<script>
videojs.addLanguage('es', {
"Play": "Reproducir",
"Play Video": "Reproducir Vídeo",
"Pause": "Pausa",
"Current Time": "Tiempo reproducido",
"Duration": "Duración total",
"Remaining Time": "Tiempo restante",
"Stream Type": "Tipo de secuencia",
"LIVE": "DIRECTO",
"Loaded": "Cargado",
"Progress": "Progreso",
"Fullscreen": "Pantalla completa",
"Non-Fullscreen": "Pantalla no completa",
"Mute": "Silenciar",
"Unmute": "No silenciado",
"Playback Rate": "Velocidad de reproducción",
"Subtitles": "Subtítulos",
"subtitles off": "Subtítulos desactivados",
"Captions": "Subtítulos especiales",
"captions off": "Subtítulos especiales desactivados",
"Chapters": "Capítulos",
// … other items
})
</script>
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
muted="true"
preload="auto"
poster="assets/sample.png"
width="560"
height="340"
data-setup="{}"
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
var player = videojs('my-video');
// Changing the language of video player to spanish player.language('es');
</script>
</body>
</html>
在上面的示例中，我們執行了以下操作
首先，我們使用 CDN URL 匯入了 video.js CSS 和 JS 檔案，然後從 node_module 資料夾中匯入了語言對映 JSON。
稍後，在 <body> 標記內，我們建立了一個 <video> 元素，其類為“video.js vjs-default-skin vjs-big-play-centered”，並且“id”為“my-video”。此 id 稍後將在 <script> 標記中用於引用播放器。我們還添加了一些標準的 HTML 影片選項，例如控制元件、靜音、自動播放、寬度、高度等。
在 <source> 標記內，包含了 mp4 影片的路徑。請確保正確更新影片路徑到您的影片檔案。
在 <script> 標記中，最初，我們引用了 video.js 為“id”為“my-video”的影片建立播放器，然後使用“language”方法引用添加了我們匯入的語言。
執行上述程式碼將在瀏覽器中建立一個影片播放器，並將語言設定為西班牙語。如果將滑鼠懸停在任何按鈕或任何影片播放器元素上，您會發現控制文字為西班牙語。
我們還可以透過將其作為引數傳遞給影片引用來將語言新增到影片播放器中。考慮以下程式碼片段以更改影片播放器的語言作為選項 -
// Setting the language inside video options
let videoOptions = {
language: 'fr'
}
// Initializing the video player with video options
var player = videojs('my-video', videoOptions);
觀察在上面的程式碼片段中，我們如何透過將其作為選項傳遞來將語言新增到影片播放器中。
示例 2
在整合上述程式碼片段時，請考慮完整的可執行示例。此外，出於本示例的目的，我們將使用法語作為影片播放器的語言。
<!DOCTYPE html>
<html>
<head>
<title>Setup Languages in Video.js Player</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<!-- Importing the language json file from node_modules folder -->
<script src="node_modules/video.js/dist/lang/fr.js"></script>
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
muted="true"
preload="auto"
poster="assets/sample.png"
width="560"
height="340"
data-setup="{}"
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Setting the language inside video options
let videoOptions = {
language: 'fr'
}
// Initializing the video player with video options
var player = videojs('my-video', videoOptions);
</script>
</body>
</html>
結論
在本教程中，我們瞭解瞭如何使用 video.js 在影片播放器中設定不同的語言。我們首先學習了建立按鈕到語言翻譯對映檔案的過程，該檔案可用於自定義語言。然後在教程的後半部分，我們使用對映檔案在本地專案中將影片播放器的語言更改為西班牙語和法語，並提供了兩個完整的可執行示例。
1K+ 瀏覽量
