MediaElement.js i18n - how to implement?

Question

So you can support multiple languages in the captions and subtitles, and I can see that there is code for i18n. However, I've trawled around the internet trying to find a tutorial on how to implement this and can't find anything.

Theres nothing on the mediaelementjs.com webpage or github wiki and its not obvious.

Also there's only German and Chinese available. I'd like to be able to completely override all the strings required when the player is initialised.

I'm used to implementing i18n in MVC, & jquery ui datepickers etc but this has baffled me.

Thanks in advance

Answer 1

This took me today some hours too.

The captions and subtitles from the 'mediaelementplayer.js' file are loaded while the javascript loads. (And not (as I expected) when the document is ready or when initializing a new player)

You have to choose between:

• manually set the translations to the 'window.mejs.MepDefaults' object

Example:

mejs.MepDefaults.fullscreenText = 'Vollbild'

• or to put a line at the top of mediaelementplayer.js (or any place between the loading of mediaElement.js and mediaelementplayer.js with e.g. async. loading)

Example:

// Set mejs translation to German
mejs.i18n.getLanguage = function() { return 'de' };

Answer 2

Similar to Matt Scott's reply on the answer above, I had to overwrite the initial text values when extending from mediaElements like this:

    $.extend(mejs.MepDefaults, {
        playText: 'Afspelen',
        pauseText: 'Pauzeren',
        muteText: 'Geluid uit',
        unmuteText: 'Geluid aan'
    });

More configuration elements can be found here: https://github.com/mediaelement/mediaelement/blob/master/docs/api.md#mediaelementplayer

Answer 3

I know this is not the answer to your question and sorry about that but it is related to your subject. If you set up the mejs properly, running the command mejs.i18n in your browser's console shall show you your chosen language and a list of all languages that you imported earlier as js files. If you could not see them then you did not set up properly, especially make sure that you did import mediaelement-and-player.js before all of your languages. Then you can set up your player like this :

(function() {
  mejs.i18n.language("fa"); //select your prefered language here
  var mediaElements = document.querySelectorAll('video, audio');
  for (var i = 0, total = mediaElements.length; i < total; i++) {
    var features = ['prevtrack', 'playpause', 'nexttrack', 'current', 'progress', 'duration', 'volume', 'shuffle', 'loop', 'skipback', 'jumpforward', 'speed', 'contextmenu', 'playlist', 'fullscreen'];
    new MediaElementPlayer(mediaElements[i], {
      autoRewind: false,
      features: features,
      startLanguage: 'fa' // this is not actually needed, I just wanted to show you that it is also possible to set this parameter, you can set it to mejs.i18n.lang too
    });
  }
})(); //this syntax is equivalent to document ready