Side-by-side view

Prev Next

Mobile

Tablet

Web

android_watermark.svg

iOS.svg

android_watermark.svg

iPadOS.svg

HTML5.svg

This article introduces Side-by-side view in DIVA.

Note:

Multiview replaces Side-by-side view from DIVA Player version 5.8 onwards.

What is Side-by-side view?

Side-by-side view enables audiences to view up to two different live or video-on-demand (VOD) events simultaneously on a single screen.

From within the integrated application, selecting the side-by-side button displays the available streams for side-by-side mode and an optional description of how the feature works.

Select an option below to see an example of this feature:

Note: Responsive desktop supports two simultaneous video streams. The second video may also be consumed in PiP (Picture-in-Picture) view.

Activate side-by-side mode

Side-by-side mode example (Responsive desktop):

Side-by-side

  1. Select the side-by-side menu button  Side-by-side from the primary menu.

  2. Select a second video to enter side-by-side view.

Upon launch of the second video, the second video displays on the right of the screen, the primary video is muted, and both videos display playback controls.

Side-by-side mode (active playback controls) example:

Side-by-side

Video controls automatically disappear after a period of inactivity and become available again on hover. The video with volume displays more prominently, with a bold video title and enlarged video window.

The muted video displays a smaller video title, reduced video window, and the muted volume button.

The muted volume button acts as a toggle to switch the active and secondary video.

Side-by side mode (inactive playback controls) example:

Side-by-side

Swap video

The swap video button design is configurable.

Select the swap video button Side-by-side found above both videos to change the respective video, e.g., the left swap video button substitutes the left video, and the right swap video button substitutes the right video.

Selecting the swap video button opens the side-by-side row. The video being replaced has a white border.

Side-by-side

Upon selecting a video substitution, a patch displays on the video thumbnail to indicate a switch will occur.

Side-by-side

Picture-in-Picture (PiP) mode

Select the PiP button Side-by-side (found in the bottom-right of the playback controls) of the video you want to shrink and view as a floating window on top of the primary video. The PiP window displays in the top-right corner of the primary full-screen video window.

For further information on PiP mode, see our Picture-in-Picture article.

Full-screen toggle

Select the full-screen button Side-by-side to toggle between the constrained video proportions and the full-screen view for both videos.

Close side-by-side mode

Select the close button close.png in the top-left corner of either video to end the side-by-side view. The video that is not closed displays in full-screen mode with active volume.

Note: Responsive mobile and tablet support two simultaneous video streams. The second video may also be consumed in PiP (Picture-in-Picture) view.

Activate side-by-side view

Side-by-side mode example (Responsive tablet):

Side-by-side

Side-by-side mode example (Responsive mobile):

Side-by-side

  1. Select the side-by-side menu button  Side-by-side from the primary menu.

  2. Select a second video to enter side-by-side view.

Upon launch of the second video, the second video displays on the right of the screen, the primary video is muted, and both videos display playback controls.

Side-by-side mode active playback controls example (Responsive mobile):

Active

Side-by-side mode active playback controls example (Responsive tablet):

Active

Video controls automatically disappear after a period of inactivity and become available again when the screen is interacted with. The video with volume displays more prominently, with a bold video title and enlarged video window.

The muted video displays a smaller video title, reduced video window, and the muted volume button.

The muted volume button acts as a toggle to switch the active and secondary video.

Side-by side mode inactive playback controls example (Responsive mobile):

Hidden

Side-by-side mode inactive playback controls (Responsive tablet):

Side-by-side

Swap video

The swap video button design is configurable.

Select the swap video button Side-by-side found above both videos to change the respective video e.g., the left swap video button substitutes the left video, and the right swap video button substitutes the right video.

Selecting the swap video button opens the side-by-side row. The video being replaced has a white border.

Side-by-side mode swap video (Responsive mobile):

Side-by-side

Side-by-side mode swap video example (Responsive tablet):

Side-by-side

Upon selecting a video substitution, a patch displays on the video thumbnail to indicate a switch will occur.

Side-by-side

Picture-in-Picture mode

Select the PiP button Side-by-side (found in the bottom-right of the playback controls) of the video you want to shrink and view as a floating window ontop of the primary video. The PiP window displays in the top-right corner of the primary full-screen video window.

For further information on PiP mode, see our Picture-in-Picture article.

Full-screen toggle

Select the full-screen button Side-by-side to toggle between the constrained video proportions and the full-screen view for both videos.

Close side-by-side mode

Select the close button close.png in the top-left corner of either video to end the side-by-side view. The video that is not closed displays in full-screen mode with active volume.

Note: Tablet and mobile devices support up to four simultaneous video streams.

Side-by-side_view_tablet.png

Viewing Side-by-side view

Side-by-side view displays in landscape view. Tap anywhere on the screen to mute/unmute streams via the Mute_button.png icon.