Commentary

Learn about DIVA's Commentary overlay including pinned/sticky comments.*

Mobile		Tablet		Web

This article introduces the Commentary functionality on DIVA.

Topics covered here:

• What is Commentary?
• What is pinned/sticky Commentary?
• How does Commentary work?

---

What is Commentary?

For live and video-on-demand (VOD) content, DIVA's Commentary functionality displays a stream of data and relevant icons within a dedicated panel.

Commentary events are selectable, enabling viewers to navigate directly to the corresponding moment in the stream.

Integrators can disable the Commentary feature by modifying the videometadata.

What is pinned/sticky Commentary?

Let's set the scene; a Football player scores a goal or is given a red card, both key moments in a match. Pinned/sticky commentary (also known as sticky tags) enables high-level importance commentary to display at the top of the commentary panel for a defined period.

Pinned posts are duplicated and positioned both in the chronological order of commentary events and at the top of the commentary panel.

Pinned/sticky Commentary, much like standard Commentary, displays relevant icons, e.g., a football representing a goal, a yellow rectangle for a yellow card, and a red rectangle for a red card. Icons display alongside the pinned/sticky Commentary, and upon selection, viewers are taken back to the relevant moment in the stream.

How does Commentary work?

Commentary is typically fed by a sports data provider and/or by editors using the DIVA back office editorial tool or integrated OVP.

From an end-user perspective, DIVA's Commentary feature works differently depending on the platform. Select an option below to view examples and learn how to activate and engage with the Commentary panel.

On Native Android and Responsive web (mobile, tablet, and desktop) version 5.5 onward, we've improved the Commentary UX/UI. Included in this release is Commentary auto-scrolling, ensuring commentary events are in sync with the current video playback position. For users interacting with commentary events, the auto-scroll pauses for 10 seconds.

Native mobile/tablet Responsive mobile/tablet Responsive web

Note: Commentary UX/UI refresh supports Android 5.5 onward. iOS improvements coming soon.

Commentary on Native mobile supports portrait mode, while Native tablet supports landscape mode.

Commentary on Native Android devices:

We've greatly improved the Commentary feature UX/UI on Android devices as of DIVA 5.5 onward. Modifications include commentary item states, and playback icons, with light and dark theme support.

When viewing the Commentary panel, during Live video playback, the event at the top of the Commentary panel, beneath any pinned event, is the current commentary event. During VOD playback, the event at the top of the Commentary panel is the immediately next commentary event. Swipe down to show events ahead of the playback bar (VOD only). 

Commentary event states are explained below:

Commentary event state and description	Example (dark theme)
First commentary item Displays at the top of the Commentary container with a solid divider above the icon.
Current commentary event (event playing) Displays a green border with a solid divider beneath and a dashed divider above the icon. A play icon indicates the event is playing.
Immediately next commentary event (VOD only) Displays a dashed divider and a 'Next' prompt. A skip forward icon indicates that selecting the event jumps the stream forward.
Future commentary event (events are yet to happen - VOD only) Displays a dashed divider with a skip forward icon indicating that selecting the event jumps the stream forward.
Preceding commentary event Displays a solid divider beneath and above the icon and a skip-back icon to indicate selecting the event jumps back to an earlier point in the stream.
End/final commentary event Displays a dashed divider beneath the icon and a skip-forward icon indicating that selecting the event jumps the stream forward.
Pinned commentary item Displays at the top of the Commentary container with a pinned icon and no divider.

Commentary panel on Native mobile (Android):

Commentary panel on Native tablet (Android):

Commentary on Native iOS devices:

Commentary panel on Native mobile (iOS):

Commentary panel on Native tablet (iOS):

Note: Commentary UX/UI refresh in DIVA 5.5 onwards.

Commentary on Responsive mobile and tablet support landscape mode only.

Commentary on Responsive web devices (mobile and tablet):

We've greatly improved the Commentary feature UX/UI on Responsive web devices as of DIVA 5.5 onward. Modifications include commentary item states, and playback icons, with light and dark theme support.

When viewing the Commentary panel, during Live video playback, the event at the top of the Commentary panel, beneath any pinned event, is the current commentary event. During VOD playback, the event at the top of the Commentary panel is the immediately next commentary event. Swipe down to show events ahead of the playback bar (VOD only). 

To activate the Commentary panel:

1. Tap anywhere on the screen to display player controls.
2. Select the hamburger icon to open the side menu.
3. From within the side menu, select the Commentary icon.
4. Select the icon to minimize the Commentary panel, increasing the size of the video player. Select the Commentary icon to reopen the Commentary panel.
5. To exit the Commentary panel, select the icon at the top of the panel.

Commentary event states are explained below:

Commentary event state and description	Example (dark theme)
First commentary item Displays at the top of the Commentary container with a solid divider above the icon.
Current commentary event (event playing) Displays a green border with a solid divider beneath and a dashed divider above the icon. A play icon indicates the event is playing.
Immediately next commentary event (VOD only) Displays a dashed divider and a 'Next' prompt. A skip forward icon indicates that selecting the event jumps the stream forward.
Future commentary event (events are yet to happen - VOD only) Displays a dashed divider with a skip forward icon indicating that selecting the event jumps the stream forward.
Preceding commentary event Displays a solid divider beneath and above the icon and a skip-back icon to indicate selecting the event jumps back to an earlier point in the stream.
End/final commentary event Displays a dashed divider beneath the icon and a skip-forward icon indicating that selecting the event jumps the stream forward.
Pinned commentary item Displays at the top of the Commentary container with a pinned icon and no divider.

Commentary panel on Responsive mobile:

Commentary panel on Responsive tablet:

Note: Commentary UX/UI refresh in DIVA 5.5 onwards.

Commentary on Responsive web devices (desktop):

We've greatly improved the Commentary feature UX/UI on Responsive web devices as of DIVA 5.5 onward. Modifications include commentary item states, and playback icons, with light and dark theme support.

When viewing the Commentary panel, during Live video playback, the event at the top of the Commentary panel, beneath any pinned event, is the current commentary event. During VOD playback, the event at the top of the Commentary panel is the immediately next commentary event. Swipe down to show events ahead of the playback bar (VOD only). 

To activate the Commentary panel:

1. Select/hover anywhere on the screen to display player controls.
2. Select the hamburger icon to open the side menu.
3. From within the side menu, select the Commentary icon.
4. Select the icon to minimize the Commentary panel, increasing the size of the video player. Select the Commentary icon to reopen the Commentary panel.
5. To exit the Commentary panel, select the icon at the top of the panel.

Commentary event states are explained below:

Commentary event state and description	Example (dark theme)
First commentary item Displays at the top of the Commentary container with a solid divider above the icon.
Current commentary event (event playing) Displays a green border with a solid divider beneath and a dashed divider above the icon. A play icon indicates the event is playing.
Immediately next commentary event (VOD only) Displays a dashed divider and a 'Next' prompt. A skip forward icon indicates that selecting the event jumps the stream forward.
Future commentary event (events are yet to happen - VOD only) Displays a dashed divider with a skip forward icon indicating that selecting the event jumps the stream forward.
Preceding commentary event Displays a solid divider beneath and above the icon and a skip-back icon to indicate selecting the event jumps back to an earlier point in the stream.
End/final commentary event Displays a dashed divider beneath the icon and a skip-forward icon indicating that selecting the event jumps the stream forward.
Pinned commentary item Displays at the top of the Commentary container with a pinned icon and no divider.

Commentary panel on Responsive web (desktop):