Localization of user interface elements

Last update: November 3, 2023

CREATED FOR:

  • Developer
  • User

Certain content that the Interactive Video Viewer displays is subject to localization. Such content includes user interface element tool tips and an error message that is displayed when the video is unable to play.

Every textual content in the viewer that can be localized is represented by the special Viewer SDK identifier called SYMBOL. Any SYMBOL has a default-associated text value for an English locale ( "en") supplied with the out-of-the-box viewer. It may also have user-defined values set for as many locales as needed.

When the viewer starts, it checks the current locale to see if there is a user-defined value for each supported SYMBOL for such locale. If there is, it uses the user-defined value; otherwise, it falls back to the out-of-the-box default text.

User-defined localization data can be passed to the viewer as a localization JSON object. Such object contains the list of supported locales, SYMBOL text values for each locale, and the default locale.

An example of such a localization object is the following:

{
"en":{
"VideoPlayer.ERROR":"Your Browser does not support HTML5 Video tag or the video cannot be played.",
"PlayPauseButton.TOOLTIP_SELECTED":"Play"
 },
 "fr":{
"VideoPlayer.ERROR":"Votre navigateur ne prend pas en charge la vidéo HTML5 tag ou la vidéo ne peuvent pas être lus.",
"PlayPauseButton.TOOLTIP_SELECTED":"Jouer"
},
defaultLocale:"en"
}

In the example above, the localization object defines two locales ( "en" and "fr") and provides localization for two user interface elements in each locale.

The web page code should pass the localization object to the viewer constructor, as a value of localizedTexts field of the configuration object. An alternative option is to pass the localization object by calling setLocalizedTexts(localizationInfo) method.

The following SYMBOLs are supported:

SYMBOLTool tip for...
Container.LABELARIA label for top-level viewer element.
PlayPauseButton.TOOLTIP_SELECTEDSelected play pause button state.
PlayPauseButton.TOOLTIP_UNSELECTEDDeselected play pause button state.
PlayPauseButton.TOOLTIP_REPLAYReplay play pause button state.
VideoScrubber.TOOLTIPVideo scrubber.
VideoTime.TOOLTIPVideo time on control bar.
MutableVolume.TOOLTIP_SELECTEDSelected mutable volume.
MutableVolume.TOOLTIP_UNSELECTEDDeselected mutable volume.
MutableVolume.TOOLTIP_VOLUMEVolume slider knob label exposed by way of the ARIA aria-valuetext attribute.
FullScreenButton.TOOLTIP_SELECTEDfull-screen button in normal state.
FullScreenButton.TOOLTIP_UNSELECTEDfull-screen button in full-screen state.
ClosedCaptionButton.TOOLTIP_SELECTEDSelected closed caption button state.
ClosedCaptionButton.TOOLTIP_UNSELECTEDDeselected closed caption button state.
InteractiveSwatches.BANNERCaption for the banner.
ScrollUpButton.TOOLTIPScroll up button.
ScrollDownButton.TOOLTIPScroll down button.
SocialShare.TOOLTIPSocial share tool.
LinkShare.TOOLTIPLink share button.
LinkShare.HEADERLink dialog box header.
LinkShare.TOOLTIP_HEADER_CLOSELink dialog box upper-right close button.
LinkShare.DESCRIPTIONDescription of the share link.
LinkShare.CANCELCaption for the Cancel button.
LinkShare.TOOLTIP_CANCELCancel button.
LinkShare.ACTIONCaption for the Select All button.
LinkShare.TOOLTIP_ACTIONSelect All button.
FacebookShare.TOOLTIPFacebook share button.
TwitterShare.TOOLTIPTwitter share button.
CloseButton.TOOLTIPCall to action panel Close button.
VideoPlayer.ERRORError message that appears when no video playback is possible.

Experience Manager