| Web |
|---|
This article introduces video player navigation within DIVA 5 on Responsive web (including desktop, mobile, and tablet).
Note: Player UX/UI improvements are available on web as part of the DIVA 5.2 release. Similar developments are coming soon on Android and iOS.
What is video player navigation?
We've improved the player user experience to make the DIVA feature set more discoverable.
DIVA Player navigation on web consists of two side menus: the main and secondary. Each menu contains key DIVA features that open out into collapsible panels alongside video playback.
Once selected, DIVA menu items open out into panels that sit alongside the video player. DIVA player navigation differs depending on the platform.
Select an option below for examples and further information.
Video player navigation on Responsive mobile
The main menu displays the primary menu button (1), which indicates menu functionality. The main menu also contains secondary buttons (2) representing features, including Commentary, Team Stats, Lineups, Top Players, etc. Menu button ordering is configurable to suit project needs.
Menu overview on Responsive web (landscape mobile):
The secondary menu (3) is hidden on mobile until users activate the primary menu (1). The secondary menu displays available custom integrations, such as Sceenic's Watch Together, LiveLike's Influencer chat and Interactive widgets, and special features such as a Shop. Selecting a secondary menu item displays the feature in a panel.
Active main menu and Commentary panel on Responsive web (landscape mobile):
On mobile, only one panel can remain open at a time. With the secondary menu open, when a user selects a button from the main menu, the secondary menu collapses to its minimized state. With the main menu open, choosing a button from the secondary menu collapses the main menu.
Active secondary menu and Watch Together panel (landscape mobile):
Menu order and states
Default: The primary menu button displays when video playback controls are visible.
Hover: If the screen is reduced in size to the mobile breakpoint, hovering over the primary menu button displays two secondary menu buttons and an opaque background.
Active: The primary button state changes from a hamburger to a close icon, and additional available secondary menu buttons display, with the selected button highlighted.
Video player navigation on Responsive web (desktop and tablet)
The main menu displays the primary menu button (1), which indicates menu functionality. The main menu also contains secondary buttons (2) representing features, including Commentary, Team Stats, Lineups, Top Players, etc. Menu button ordering is configurable to suit project needs.
Side menu overview (default) on Responsive web (desktop):
The secondary menu (3) displays available custom integrations, such as Sceenic's Watch Together, LiveLike's Influencer chat and Interactive widgets, and special features such as a Shop. Selecting a secondary menu item displays the feature in a panel.
Primary menu (hover) on Responsive web (desktop):
Active main menu and Commentary panel on Responsive web (desktop):
DIVA's Responsive web player on desktop supports multiple simultaneous panels alongside video playback.
Active main menu, Commentary panel, and secondary menu Watch Together panel (desktop):
On tablet, only one panel is shown in the maximized view. With the secondary menu open, when a user selects a button from the main menu, the secondary menu collapses to its minimized state. With the main menu open, choosing a button from the secondary menu collapses the main menu.
Active main menu, Commentary panel, and minimized secondary menu Watch Together panel (tablet):
Menu order and states
Default: The primary menu button and the first four secondary buttons display when video playback controls are visible.
Hover: Hovering over any of the four secondary menu buttons displays an opaque background and button labels, e.g., Commentary.
Active: The primary button state changes from a hamburger to a close icon, additional available secondary menu buttons and labels display, and the currently selected secondary menu button is highlighted.