数据结构
网络
关系数据库管理系统
操作系统
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
})
现在我们已经准备好翻译映射文件，让我们继续下一节，我们将在此节中在本地项目中使用此文件来更改视频播放器的语言。
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
将 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.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 导入了 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.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 在视频播放器中设置不同的语言。我们首先学习了创建按钮到语言翻译映射文件的过程，该文件可用于自定义语言。然后在教程的后半部分，我们使用映射文件在本地项目中将视频播放器的语言更改为西班牙语和法语，并提供了两个完整的可运行示例。
1K+ 浏览量
