如何在 Video.js 播放器中设置不同的语言?
在本教程中，我们将学习如何为使用 video.js 库创建的视频播放器设置不同的语言。Video.js 是一个非常流行的 JavaScript 包，用于构建支持多种视频格式的网络浏览器视频播放器。它支持所有现代视频格式，包括 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 提供的默认文件)，我们都需要使用以下代码片段将该文件导入本地项目 -
<!-- 从 node_modules 文件夹导入语言 json 文件 -> <script src="node_modules/video.js/dist/lang/es.js"></script>
将上述代码添加到代码的 <head> 标签中，即可包含此语言映射文件。请仔细检查文件路径。
在代码中导入语言后，我们可以使用 video.js 提供的"language"方法将其添加到视频播放器引用中。
// 初始化视频播放器
var player = videojs('my-video');
// 将视频播放器的语言更改为西班牙语
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://www.cainiaomax.com/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 和 node_module 文件夹中的语言映射 JSON 导入了 video.js CSS 和 JS 文件。
之后，在 <body> 标签内，我们创建了一个 <video> 元素，其 class="video.js vjs-default-skin vjs-big-play-centered" 属性，id 为 'my-video'。此 id 稍后将在 <script> 标签中用于引用播放器。我们还添加了一些标准的 HTML 视频选项，例如控件、静音、自动播放、宽度、高度等。
在 <source> 标签内，包含了 mp4 视频的路径。请确保正确更新视频文件的视频路径。
在 <script> 标签中，我们首先引用 video.js 来为视频创建一个播放器，其 id 为"my-video"，然后使用"language"方法引用添加了我们导入的语言。
执行上述代码将在浏览器中创建一个视频播放器，其语言设置为西班牙语。如果您将鼠标悬停在任何按钮或任何视频播放器元素上，您将看到控件文本是西班牙语。
我们还可以通过将语言作为参数传递给视频引用来将语言添加到视频播放器中。请参考以下代码片段，该代码片段将视频播放器的语言更改为选项 -
// 在视频选项中设置语言
let videoOptions = {
language: 'fr'
}
// 使用视频选项初始化视频播放器
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://www.cainiaomax.com/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 在视频播放器中设置不同的语言。我们首先学习了如何创建按钮到语言翻译映射文件，该文件可用于自定义语言。然后，在本教程的后半部分，我们结合两个完整示例，在本地项目中使用该映射文件，将视频播放器的语言更改为西班牙语和法语。
