| Mobile | Tablet | Web | TV | |||||
|---|---|---|---|---|---|---|---|---|
|
|
|
|
||||||
This article introduces video lists within DIVA.
Topics included here:
- What are video lists?
- Video list components
- Video badges
- Video card backgrounds
- Content recommendations
What are video lists?
Note: If video lists are enabled, DIVA Player requires an MRSS file input.
Video lists present additional video assets in dynamic scrollable rows, helping to increase video consumption and app engagement. Video lists allow users to choose another video stream that is then loaded into the player. Use video lists to display an alternate live or video-on-demand (VOD) video stream, for example, related or recommended content, highlight reels, or other multiple streams of the same event.
Video lists are visible when they contain at least one item (empty video lists are automatically hidden from the UI).
Video list thumbnail on-click behavior
Compatibility information: Available from from DIVA 5.9 onwards.
Integrators can configure the on-click behavior when selecting a video asset thumbnail from within a video list. For example, on thumbnail selection, integrators can specify that users are directed to the content item detail page for further information, or alternatively, users can be presented with a subscription page, or an advertisement within the host application, depending on the desired user experience.
Video list components
Video lists are made up of video cards, each representing a video stream - selecting a card initiates video playback. All video lists have configurable (within the video metadata) titles, card titles, and secondary taglines. Video cards also support badges and allow operators to supply video card backgrounds that update in line with event scores.
Video list items are dynamically added and removed by operators. DIVA TV supports the ability to display multiple video lists using shared assets. For information on switching between multiple streams of the same event, see our alternate streams article.
Video list example:
- Video list titles are positioned above the video list, containing a description of the list purpose of the type of content within the list, e.g., "Today's matches" or "New releases."
- Card titles represent a specific video stream within the video list, e.g., "Newcastle vs. Watford."
- Secondary taglines display under the video list card and the video card title in a smaller font, e.g., "Group 1." Please note secondary taglines are not supported on tvOS.
Video badges
Badges are icons that display on video list items/cards and are shown by default. The video currently being played displays a badge in the top-left corner of the video card. Selecting this video takes you back to the video playback mode (exiting video list mode). Identify live content currently broadcasting by the
badge. It's important to note that only one badge displays at a time, meaning if a video is currently being watched and is being broadcast live, only the
badge displays.
From DIVA 5.2 on big screens, DIVA Player also supports badges to indicate further accessibility support on content, e.g., "AD" for Audio Descriptions and "CC" for Closed Captions. Badges are recognized by Text-to-Speech and are read aloud if enabled. For further information, read our accessibility article.
Video card backgrounds
Configure thumbnails, specific images, or a generic image, known as a fallback image, to consistently display for all cards in a video list. DIVA supports fallback background images where an image has not been specified for live and VOD video types.
| Operator supplied image example | Live fallback image example | VOD fallback image example |
|---|---|---|
Content recommendations
DIVA supports the display of recommended content (populated in video lists or by related content) on big and small screens; however, user experience and functionality differ depending on the device. For more information, read our content recommendations article.
Select an option below to view video list examples:
On Native mobile in landscape mode, video playback resumes and available video lists display over the top of the bottom portion of the screen. Select a video from the video list to initiate video playback.
Video lists example on Native mobile (landscape):
On Native mobile in portrait mode, video playback resumes at the top of the screen, displaying the available video list beneath. Select a video from the video list to initiate video playback.
Video lists example on Native mobile (portrait):
On Native tablet in portrait mode, video playback resumes on the right side of the screen (reduced in size), while displaying the available video list on the left. Select a video from the video list to initiate video playback.
Video lists example on Native tablet (portrait):
Video list options
On mobile, tablet, and web, operators can customize the following video list options:
- Menu labels
- Menu label localization
- Menu label color
- Custom messages if the video list is empty
- Display video lists FullPage and SideBySide templates for web
- Video views, see examples and compatibility below:
| View | Description | Mobile | Tablet | Web |
|---|---|---|---|---|
| External | The newly selected video displays on a separate web page/tab within the browser. | |||
| Switch | The newly selected video replaces the current video. | |||
| Alternate streams | Multistream remembers the playhead position. When changing the video, the newly loaded video plays from the same playhead point. | |||
| Multi-view | The newly selected video displays alongside the current video (SideBySide). | |||
| Picture-in-Picture (PiP) | The newly selected video displays at a smaller scale within the current video. The current video is the main focus; however, moving the mouse over the PiP enlarges the picture. | |||
| Modal | The newly selected video displays on a screen, covering the current video. Closing this screen reverts back to the initial video. |
On Responsive desktop, mobile, and tablet, video playback resumes on the right side of the screen (reduced in size), while displaying the available video list on the left. Select a video from the video list to initiate video playback.
Video lists example on Responsive desktop:
Video lists example on Responsive mobile:
Video lists example on Responsive tablet:
Video list options
On desktop, mobile, and tablet, operators can customize the following video list options:
- Menu labels
- Menu label localization
- Menu label color
- Custom messages if the video list is empty
- Display video lists FullPage and SideBySide templates for web
- Video views, see examples and compatibility below:
| View | Description | Mobile | Tablet | Web |
|---|---|---|---|---|
| External | The newly selected video displays on a separate web page/tab within the browser. | |||
| Switch | The newly selected video replaces the current video. | |||
| Alternate streams | Multistream remembers the playhead position. When changing the video, the newly loaded video plays from the same playhead point. | |||
| Multi-view | The newly selected video displays alongside the current video (SideBySide). | |||
| Picture-in-Picture (PiP) | The newly selected video displays at a smaller scale within the current video. The current video is the main focus; however, moving the mouse over the PiP enlarges the picture. | |||
| Modal | The newly selected video displays on a screen, covering the current video. Closing this screen reverts back to the initial video. |
For release notes, see DIVA 5.1 video list functionality on WebTV.
Video lists on WebTV display in a horizontal scrollable row that sits on top of the DIVA Player UI at the bottom of the screen.
Video list example on WebTV:
- Video titles truncate with an ellipsis when the character length exceeds 1317px.
- Card list titles and secondary taglines truncate with an ellipsis when the character length exceeds 425px.
Video list order
During video playback on DIVA TV, if configured and content is available, video list rows on display in the following order:
- Highlights
- Alternate streams
- Recommendations
- Remaining video lists
Video list options
DIVA TV (WebTV, Android TV, tvOS, and Roku) supports the following video list options:
- Alternate streams: Multi-stream remembers the playhead position. When changing the video, the newly loaded video plays from the same playhead point.
- Switch: The newly selected video replaces the current video.
Entering video list mode
Using the remote:
1. Select the down arrow to display player controls.
2. Select the down arrow again to display video lists. Upon entering video list mode, by default, focus falls on the first card on the left of the list.
3. Select left/right arrows for in-row navigation within a video list, and up/down arrows for navigation between rows.
4. Select OK with a video card in focus. The newly selected video loads and the video list is automatically hidden.
Note: given a video list is in focus, and no user action is registered for 15 seconds or more, video list mode is automatically exited, and users are returned to the main video. Alternatively, select the back button, or the up arrow to exit video list mode. During advertisements, video list mode exits automatically, resuming when the advert finishes.
For release notes, see DIVA 5.1 video list functionality on Android TV.
Video lists on Android TV display in a horizontal scrollable row that sits on top of the DIVA Player UI at the bottom of the screen.
Video list example on Android TV:
Video lists on Android TV present additional video assets in a horizontal scrollable row that sits on top of the DIVA Player UI. Peeking video list cards display at the bottom of the screen, below the main player UI controls.
Video lists are visible when they contain at least one item (empty video lists are automatically hidden from the UI). If additional video lists exist, they’re accessible upon entering video list mode. Video lists support four fully visible items (cards) over the width of the screen. If the list contains additional video assets, they're represented by left and right peeking cards.
- Video titles truncate with an ellipsis when the character length exceeds 1317px.
- Card list titles and secondary taglines truncate with an ellipsis when the character length exceeds 425px.
Video list order
During video playback on DIVA TV, if configured and content is available, video list rows on display in the following order:
- Highlights
- Alternate streams
- Recommendations
- Remaining video lists
Video list options
DIVA TV (WebTV, Android TV, tvOS, and Roku) supports the following video list options:
- Alternate streams: Multi-stream remembers the playhead position. When changing the video, the newly loaded video plays from the same playhead point.
- Switch: The newly selected video replaces the current video.
Entering video list mode
Using the circular control on an Android remote:
1. Select down to display player controls.
2. Select down again to display video lists. Upon entering video list mode, by default, focus falls on the first card on the left of the list.
3. Select left/right arrows for in-row navigation within a video list, and up/down arrows for navigation between rows.
4. Select the middle button with a video card in focus. The newly selected video loads, and the video list is automatically hidden.
Note: given a video list is in focus, and no user action is registered for 15 seconds or more, video list mode is automatically exited, and users are returned to the main video. Alternatively, select the back button, or the up arrow to exit video list mode. During advertisements, video list mode exits automatically, resuming when the advert finishes.
For release notes, see DIVA 5.1 video list functionality on tvOS.
Compatibility information: DIVA supports tvOS 15+
Video lists on tvOS present additional video lists inside tabs that sit on top of the DIVA Player UI.
Video lists support five fully visible items (cards) over the width of the screen, plus one peeking if required. If the list contains additional video assets, they're represented by left and right peeking cards.
- Video list titles (display as content tabs)
- Card list titles truncate with an ellipsis if the text spans more than two lines
- Secondary taglines are not supported on tvOS
Video list order
During video playback on DIVA TV, if configured and content is available, video list rows on display in the following order:
- Highlights
- Alternate streams
- Recommendations
- Remaining video lists
Video list options
DIVA TV (WebTV, Android TV, tvOS, and Roku) supports the following video list options:
- Alternate streams: Multi-stream remembers the playhead position. When changing the video, the newly loaded video plays from the same playhead point.
- Switch: The newly selected video replaces the current video.
Entering video list mode
DIVA on tvOS uses native OS behavior. Visit the Apple TV User Guide: Control what’s playing on Apple TV – Get more info or go to Up Next section for more information.
- From the video playback screen, use the remote control to display player controls.
- Navigating down focuses on the first tab in the list. If you're using a connected wireless keyboard, press the down key.
Video list titles display as tabs positioned horizontally at the bottom of the screen, to the right of the "Info" and "Key moments" tabs (if available).
- Navigate right to focus on other tabs (video lists). In the example below, these are "Camera angles" and "Live games."
- Navigate down again to focus on a card. The default focus falls on the first card on the left of the list. Navigate between rows and within lists to choose content.
- Select a video card to initiate video playback. The chosen video loads in the player, and the video list automatically hides.
Note: given a video list is in focus, and no user action is registered, video list mode is automatically exited, and users are returned to the main video. Alternatively, navigate back using the remote control or keyboard to exit video list mode. During advertisements, video list mode exits automatically.
For release notes, see DIVA 5.1 video list functionality on Roku.
Video lists on Roku present additional video assets in a horizontal scrollable row that sits on top of the DIVA Player UI. Peeking video list cards display at the bottom of the screen, below the main player UI controls.
Video lists are visible when they contain at least one item (empty video lists are automatically hidden from the UI). If additional video lists exist, they’re accessible upon entering video list mode. Video lists support four fully visible items (cards) over the width of the screen. If the list contains additional video assets, they're represented by left and right peeking cards.
- Video titles truncate with an ellipsis when the character length exceeds 1344px.
- Card list titles and secondary taglines truncate with an ellipsis when the character length exceeds 425px.
Video list order
During video playback on DIVA TV, if configured and content is available, video list rows on display in the following order:
- Highlights
- Alternate streams
- Recommendations
- Remaining video lists
Video list options
DIVA TV (WebTV, Android TV, tvOS, and Roku) supports the following video list options:
- Alternate streams: Multistream remembers the playhead position. when changing the video, the newly loaded video plays from the same playhead point.
- Switch: The newly selected video replaces the current video.
Entering video list mode
Using the Roku remote control:
1. Select the down arrow to display player controls.
2. Select the down arrow again to display video lists. Upon entering video list mode, by default, focus falls on the first card on the left of the list.
3. Select left/right arrows for in-row navigation within a video list, and up/down arrows for navigation between rows.
4. Select OK with a video card in focus. The newly selected video loads, and the video list is automatically hidden.
Note: given a video list is in focus, and no user action is registered for 15 seconds or more, video list mode is automatically exited, and users are returned to the main video. Alternatively, select the back button, or the up arrow to exit video list mode. During advertisements, video list mode exits automatically, resuming when the advert finishes.