Localizing Plugins

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Localization
Plugin Development
Plugins

In this topic you will learn how a plugin developer can localize a Brightcove Player plugin. Note that this is NOT the same as using the built-in localization for the player itself.

As is suggested in the Quick Start to Plugin Development, the application will be developed locally then converted into a plugin.

Add language(s)

You can choose the languages to support in a plugin. For each language you wish to support you must have a set of key-value pairs with the English language as the key and the corresponding localized language as a value. You do this by using Videojs' addLanguage() method. The following code shows adding German translations to a page:

videojs.addLanguage('de', {
  "Hello": "Guten Tag",
  "Goodbye": "Auf Wiedersehen",
});

Localize content

Once you have added the languages and vocabulary you wish to use in the localization process you can use the player's localize() method to perform the actual localization. The following shows a string being injected into an HTML <span>, then appended to the end of the video tag:

  textSpan = document.createElement('span');
  textSpan.className = "localizeStyle"
  textSpan.innerHTML = myPlayer.localize("Hello") + "/" + myPlayer.localize("Goodbye");
  myPlayer.el().appendChild(textSpan);

The localize() method takes the English key word as a string argument, myPlayer.localize("Hello"), and displays that string unless the browser's preferred language is available, in which case the localized word will be substituted.

Set display language

To display the localized text, the user must set the preferred language in the browser. The exact steps vary depending on browser and OS.

If the browser's preferred language is English, or a language not available, you will see the default, or English, text.

localize english

If the browser's preferred language is set to an available language, you will see the localized version, as shown here:

localize german

Plugin code

As documented in the Quick Start to Plugin Development, you put the code into a file that contains the plugin.

  • Lines 27,37: Standard syntax to define a Brightcove Player plugin. Notice for later reference the name of the plugin is pluginLocalize.
  • Lines 28-31: Adds German language localization.
  • Lines 32-36: Dynamically creates an HTML span element, populates it and appends it to the player code.
videojs.registerPlugin('pluginLocalize', function() {
  videojs.addLanguage('de', {
      "Hello": "Guten Tag",
      "Goodbye": "Auf Wiedersehen",
  });
  var myPlayer = this,
  textSpan = document.createElement('span');
  textSpan.className = "localizeStyle"
  textSpan.innerHTML = myPlayer.localize("Hello") + "/" + myPlayer.localize("Goodbye");
  myPlayer.el().appendChild(textSpan);
});

For testing purposes, use the plugin locally in a page that utilizes the embed_in_page player implementation.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Localize Plugin Example</title>
  <link href="localize-plugin.css" rel="stylesheet">
</head>

<body>
  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="9a2e3f23-d63b-43c3-aae9-21f11548e812"
    data-embed="default"
    data-video-id="3851389913001"
    class="video-js" controls></video-js>
  <script src="https://players.brightcove.net/1752604059001/9a2e3f23-d63b-43c3-aae9-21f11548e812_default/index.min.js"></script>

  <script type="text/javascript" src="localize-plugin.js"></script>
  <script>videojs.getPlayer('myPlayerID').pluginLocalize();</script>
</body>

</html>

Add plugin to player

Once you have confirmed the plugin is functioning correctly, you will want to add the plugin to the player. To do this, follow these steps:

  1. Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
  2. Click the link for the player to open the player's properties.
  3. Click Plugins in the left navigation menu.
  4. Next, click Add a Plugin.
  5. For the Plugin Name enter pluginLocalize.
  6. For the JavaScript URL, enter:
    http://solutions.brightcove.com/bcls/brightcove-player/localization/localize-plugin.js
  7. For the CSS URL, enter:
    http://solutions.brightcove.com/bcls/brightcove-player/localization/localize-plugin.css
  8. You do not have to enter any options for this plugin.
  9. Check to be sure your form appears similar to the following:
    add localize plugin
  10. Click Save.
  11. To publish the player, click Publish & Embed > Publish Changes.
  12. To close the open dialog, click Close.

Once you have saved and published, you can alter the configuration by click on the plugin name in the Plugins list.

add localize plugin done

The plugin is now part of the player. This permits you to use the iframe player implementation with no other supporting code and have the plugin's functionality available.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Localize Plugin - iframe</title>
</head>

<body>

  <iframe src='https://players.brightcove.net/1752604059001/9a2e3f23-d63b-43c3-aae9-21f11548e812_default/index.html'
    allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

</body>
</html>