Skip to main content

Video quality selector

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 enabled video quality selector.

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>.
  • To enable this feature, ask your video engineers to set videoQuality=true in the node capabilities within the VideoMetadata.

Instantiation​

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

Behaviour​

The Video Quality Selector feature enables users to control the video playback quality based on available renditions and device capabilities.

  • When multiple video quality renditions are available, the Video Quality Selector button is visible, allowing users to select their preferred quality.
  • If only one rendition is available, the button will be hidden to avoid unnecessary interaction.
  • Users can choose from a list of available qualities, including an 'Automatic' option that adjusts quality based on network conditions.
  • If bitrate limitations are applied, only the available quality levels within those limits will be displayed.
  • (Android-specific) The UI is optimized to handle any potential collision with HDR settings, ensuring seamless operation on Android devices.
  • The player remembers the user’s quality selection, applying it across different videos, ensuring a consistent viewing experience

Dictionary​

Ensure the dictionary file contains the relevant keys.

Analytics events​

Find here the available analytics events for Video quality selector.

Accessibility​

  • The feature is designed to support text-to-speech (TTS) functionality, ensuring compatibility with devices that use TTS for accessibility.
  • The Video Quality Selector is fully operable using alternate input devices for users who require non-standard remote control units (RCUs).
  • For users with visual impairments, there is an option to toggle UI transparency, providing a clearer interface.
  • All UI elements within the Video Quality Selector meet the WCAG 2.0 AA contrast ratio standards, ensuring readability and usability for those with vision impairments.-

Was this page helpful?