Skip to main content

Multiview

What you learn​

You're instantiating DIVA Player in your Android 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 multiview.

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>.

Instantiation​

The Basic instantiation code is sufficient to enable multiview mode.

If at least one of the videolist item inside videoMetadata has as behavior "multiview" or "multistreamMultiview". In that case, the multiview button will appear in the bottom right corner of the player, and the user can add/remove videos from the multiview list. In multiview mode, the user can add up to 4 videos. The videos will be displayed in a grid layout with limited functionalities (e.g., no video controls, no subtitles, no settings), only changing the audio stream will be applicable.

Behaviour​

Activation & Layout​

  • The user can open Multi View mode via a dedicated button, allowing them to select up to four videos for simultaneous viewing.
  • The original video's audio remains audible by default when Side-by-Side View is launched. Additional videos start muted.
  • The user can close videos individually, with the view dynamically adjusting or exiting Multi View if only one video remains.
  • The entry video cannot be closed while in Multi View.
  • The entry video propagates its audio, closed captions, and HDR settings, enabling the user to configure these before opening Multi View.

Audio Control​

  • The user can select which video's audio is active, automatically muting the other videos and marking the selected one as "active."
  • The active video will always show a sound icon, the other videos sound icon will fade out with the rest of the UI

Existing Side-by-Side View​

  • Upon exiting Side-by-Side View, a confirmation dialog ensures the user's intent.
  • If confirmed, the view closes and the primary video returns to the normal DIVA interface.
  • If canceled, the user remains in the current view with no changes.
  • When exiting Multi View mode, the player returns to displaying the primary video.

Video Completion:​

  • If a video ends, its thumbnail (from video metadata) and a label "The stream has ended" appear. This label is customizable via a dictionary.

Video List:​

  • The video list shows selected videos at the front for easier access.
  • The video list is generated from the Entry video, and will not change.

Controls:​

  • -10s, Play/Pause, +10s
  • "Go Live" button
  • Subtitles button (except on smartphones)
  • Audio track button (except on smartphones)
  • Mute/Unmute button
  • The control list ensures that non-active video UI fades out as usual.

Platform-Specific Limitations:​

  • Android: Multi View is forced to landscape mode.
  • Android Mobile: An "Exit Multi View" button is required.

Feature Restrictions:​

  • Goal alerts are paused.
  • "Live Like" is disabled.
  • Skip interval is disabled.
  • The Multi View button is unavailable in Chromecast and Highlights.

Dictionary​

Ensure the dictionary file contains the relevant keys.

Technical details​

The main container is DivaFragment. Inside this container, there are 4 player containers. The first player container contains the main video, while the other 3 containers in multiview mode are used for multiview stream videos(but they can be used also for other features). Adding the players instances to the main container is doing by MultiviewModule. This module is responsible for managing the players instances.Communication between the player instance and main container is managing with MultiviewCallback and MultiviewListListener.