Skip to main content

Subtitles, captioning, and audio-tracks

What you learn​

You're instantiating DIVA Player in your web front-end and relying on DIVA Back Office as the video streaming source.

The goal of this article is to build the simplest front-end to stream a video from the DIVA Back Office with subtitles, captioning, and audio tracks.

Before starting​

  • Ensure the DIVA Back Office instance you rely on is up and running.

  • Ask your video engineers team the <video id> and the related <settings URL>.

  • Ensure the settings file contains the audioSelectionMethod and closedCaptionSelectionMethod fields:

    "settings": {
            "general": {
                "audioSelectionMethod": "title",
                "closedCaptionSelectionMethod": "lang"
            }
    }

    Both fields possible values are:

    • title (default in case the settings file doesn't contain the field): When the audio selection depends on the field name (for HLS) or lable (for DASH) within the video manifest.
    • lang: When the audio selection depends on the language within the video manifest.

Note: Subtitles, captioning, and audio tracks come within the video manifest.

Instantiation​

There's no code to add to the Basic instantiation code.

Behaviour​

Accessibility on TV devices​

  • The Caption Style option is accessible within the "Subtitles and Captioning" panel. It appears as a selectable header with the descriptor "Change text size and style" at the bottom of the list of available options.
  • Inside the Caption Style panel, users will find two main customization options:
    • Enlarge Text: This section includes a toggle button that, when enabled, increases the text size of subtitles to a larger setting.
    • Style: This section also contains a toggle button, which adjusts the contrast ratio between subtitle text and background, enhancing readability.
  • Both the Enlarge Text and Style toggle buttons are set to "Off" (disabled) by default.
  • When users enable the Enlarge Text toggle button, the subtitle text size is increased to a larger setting, which takes effect immediately once the video resumes and subtitles are displayed. Disabling the toggle reverts the text size to its default, smaller setting.
  • Activating the Style toggle button increases the contrast between the subtitle text and its background, improving legibility. Specific color codes and contrast levels are applied according to design guidelines. Disabling this toggle returns the subtitle contrast to its original, default state.
  • The Enlarge Text and Style toggle button states are retained throughout the current session. When a new video is loaded within the same session, the previously selected settings remain in effect unless manually adjusted by the user.
  • The Caption Style panel supports multilingual environments. When the UI language is changed, all text elements, including headers, labels, and descriptions within the panel, are automatically translated to the selected language,

Dictionary​

Ensure the dictionary file contains the relevant keys.