Multiview

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

Enrich the Basic instantiation code with

• videoId It's a string array of up to 4 videoIds to display in multiview mode.
• multiviewMode optionally added into the config parameter. multiviewMode's value is multiview by default, so even if not set, the videos are shown in side-by-side or in a grid layout, depending on the number of videoIds present in the videoId array. When 'videoIds` contains more than 4 elements, only the first 4 ones are processed. Instead if the multiviewMode's value is pip only two videos are shown in a Picture-in-Picture layout.

This is for starting Diva with more than one video in multiview mode.

The Multiview mode is available also 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.

Working sample code (.tsx)

import React from "react";
import { DivaWebBoAdapter } from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const videoIds = "<videoId1>, <videoId2>, <videoId3>, <videoId4>";

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const config = {
  videoId: videoIds,
  libs: libs,
  multiviewMode: "multiview"
};

const props = {
  settingsUrl: "<Settings URL>",
  languageCode: "en-US",
  languageDictionary: "en-US",
  onDivaBoAdapterError: console.error,
  config: config
}

function App() {
  return (
    <DivaWebBoAdapter
      {
      ...props
      }
    />
  );
}

export default App;

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:

• Web Mobile: Limited to two videos if the screen width is less than 1000px.

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.

Analytics events

Find here the available analytics events for multiview.

danger

Dismissed from version 5.8

Property	Description	Interactive	EventArguments	Platforms
controlbar_collapse_click	Every time a user selects the Collapse button in multiview visualization mode	True	controlbar_type

warning

Renamed from version 5.8.0

Old Property	New Property
sidebyside_multiview_open	multiview_open
sidebyside_multiview_close	multiview_close
sidebyside_goalalert_open	multiview_goalalert_open
sidebyside_goalalert_close	multiview_goalalert_close