Translations

By default, only English translations are included in the player's user interface (UI). However, all text strings in the player UI can be translated to adapt Wowza Flowplayer to non-English speaking audiences. You can also configure the player to add translations for specific languages or all available languages.

Install translations

This section describes two methods of installing the translations package so you can customize the player UI with available languages.

The easiest way to install translations for the player UI is to use the player code hosted on the Wowza Flowplayer CDN. However, if you use Node Package Manager (npm) to embed the player in your site, you also have to use npm to add the Wowza Flowplayer translation files.

Using Wowza Flowplayer CDN

If using the Flowplayer CDN, you can include translation files for your preferred languages with the following:

<!-- Include the Finnish translations -->
<script src="//cdn.flowplayer.com/releases/native/translations/flowplayer.lang.fi.js"></script>

<!-- Include all languages for translations -->
<script src="//cdn.flowplayer.com/releases/native/translations/flowplayer.lang.all.js"></script>

The localization changes the language display for various player UI elements as shown in these images:

Here's another screenshot example from a German setup with subtitles:

Using npm

The @flowplayer/translations package is available for download via npm. If you added the standalone player to your site with npm and you plan to incorporate different languages, you must also install the translations package via npm.

npm install @flowplayer/translations

The npm package provides IDE support for autocompletion of all available language options. To add a language to your project, import the @flowplayer/translations npm package and assign the language to the i18n object:

import flowplayer from "@flowplayer/player"
import Hls from "@flowplayer/player/plugins/hls"
import Qsel from "@flowplayer/player/plugins/qsel"
import {fr} from "@flowplayer/translations"

flowplayer(Hls, Qsel)
Object.assign(flowplayer.i18n, {fr})

flowplayer("#player", {
    src: "https://link.to.a.video.file",
    autoplay: false,
    lang: "fr",
    token: "[your-token]",
  }
)

You can load all available languages or a set of selected languages at once. When you omit the lang configuration property, the language is selected based on the browser's preferred language settings. To learn more, see Configure translations.

                    
    // Import all available languages
    import flowplayer from "@flowplayer/player"
    import Hls from "@flowplayer/player/plugins/hls"
    import Qsel from "@flowplayer/player/plugins/qsel"
    import * as languages from "@flowplayer/translations"
    

    flowplayer(Hls, Qsel)
    Object.assign(flowplayer.i18n, languages)
    

    flowplayer("#player", {
            src: "https://link.to.a.video.file",
            autoplay: false,
            token: "[your-token]",
        }
    )
                    
                

                    
    // Import French, German, and Greek only
    import flowplayer from "@flowplayer/player"
    import Hls from "@flowplayer/player/plugins/hls"
    import Qsel from "@flowplayer/player/plugins/qsel"
    import {fr, de, gr} from "@flowplayer/translations"
    

    flowplayer(Hls, Qsel)
    Object.assign(flowplayer.i18n, {fr, de, gr})
    

    flowplayer("#player", {
            src: "https://link.to.a.video.file",
            autoplay: false,
            token: "[your-token]",
        }
    )
                    
                

flowplayer("#player", {
  src: "https://link.to.a.video.file",
  token: "[your-token]",
  lang: "fi" // Finnish language [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)
})