How to set up different languages in Video.js player?

In this tutorial, we'll learn how to set up different languages for our video player created using the video.js library. Video.js is a very popular JavaScript package used to build web browser video players for a number of video formats. It supports all modern video formats, including YouTube, Vimeo, and Flash, along with all standard video playback formats, including mp4, WebM, Flv, and others. Video.js also provides a plethora of options to change and customize the video players as per your liking.

In this tutorial, we're going to have a look at how to change the language of our video player using video.js. This use case can be really beneficial when a user whose native language is not English interacts with the video player. So, let's get on to changing the language of video player using video.js in the following section of the tutorial.

How to set up different languages in the Video.js player?

In this part of the tutorial, we're try to understand the method to change the language of our video player to 'Spanish' using video.js, with the help of an example. Changing the language of video player is going to modify the control texts of all the buttons. So, when you will hover your mouse over a button, the text being displayed will be in a different language.

Prerequisite − Assuming that you know how to create a basic video player using the video.js library.

Now, changing the language of the video player is a very straight forward process. We just need to follow these steps −

• Creating a Language Mapping JS File

• Passing the JS file to our video player reference

Let's move ahead with creating a language JSON file.

Creating a Language Mapping JS File

For choosing a different language file, first we need to create a JS file which is going to map the video.js player button texts to the specific text in different language. For example, "Play Video" in Spanish is called "Reproducir Vídeo" or the phrase "Remaining Time" in Spanish is called "Tiempo restante".

Consider the below code snippet for adding a language mapping −

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",
})

In the above code snippet, we've used the addLanguage Method provided by video.js. Inside the method, we've passed the name of the language as 'es' and then we've passed all the mappings corresponding to the video.js player buttons. Save this file as 'es.js' at an accessible location.

Now, we can use this file for changing the language to various buttons in our video player, however we've only included mapping translations and video.js have a lot of button texts. So, instead of creating our own file, we're going to use the mapping provided by video.js.

Within the video.js node_modules folder, you can find a plethora of such button to language translation mapping for various popular languages. For example, the 'es.js' file, which contains the mapping for Spanish language contains more than 80+ translations and looks something like this.

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
})

Now that we've the translation mapping file ready, let's move on to the next section where we're going to use this file in our local project to change the language of our video player.

Passing the JS file to our video player reference

Once we've the language mapping translation file, while custom or the default one's provided by video.js, we need to import the file in our local project using the following code snipped −

<!-- Importing the langugage json file from node_modules folder -->
<script src="node_modules/video.js/dist/lang/es.js"></script>

Adding the above code in the <head> tag of our code is going to include this language mapping file. Please double-checl the path to the file.

Once we've imported the language in our code, we can use it and add it our video player reference using the 'language' method provided by video.js.

// Initializing the video player
var player = videojs('my-video');

// Changing the language of video player to Spanish
player.language('es');

In the above snippet, we've initialized the video.js player and adding the language imported language (spanish) to the player.

Example 1

Combining the above two snippets in our local project will make the example look something like this −

<!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.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>

In the above example, we've done the following things

• First, we've imported video.js CSS and JS file using the CDN URL followed by the language mapping JSON from the node_module folder.

• Later, inside the <body> tag we've create a <video> element with class="video.js vjs-default-skin vjs-big-play-centered" and 'id' as 'my-video'. This id will be later used in the <script> tag to reference the player. We've also added some standard HTML video options like controls, muted, autoplay, width, height, etc.

• Inside the <source> tag, the path to an mp4 video has been included. Please make sure to update the video path to your video file properly.

• In the <script> tag, initially, we've referenced video.js to create a player for the video which has 'id' as 'my-video' and then added our imported language using the 'language' method reference.

The execution of the above code will create a video player in the browser with the language set to as Spanish. If you'll hover over any button or any video player element, you'll observe that the control text is in Spanish language.

We can also add the language to our video player by passing it as parameter to video reference. Consider the below code snippet for the changing the language of video player as options −

// Setting the language inside video options
let videoOptions = {
   language: 'fr'
}

// Initializing the video player with video options
var player = videojs('my-video', videoOptions);

Observe how in the above snippet, we've added the language to the video player by passing it as options.

Example 2

Consider the fully working example while incorporating the above snippet will look something like this. Also, for the sake of this example, we are going to use the French language for our video player.

<!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.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>

Conclusion

In this tutorial, we understood how to setup different languages in the video player using video.js. We first learned the procedure to create a button to language translation mapping file, which can be used for a custom language. Then in the later half of the tutorial, we used the mapping file in our local project to change the language of our video player to Spanish and French with the help of two fully working examples.