| Mobile | Tablet | Web | TV | |||||
|---|---|---|---|---|---|---|---|---|
This article introduces DIVA's interactive timeline.
Topics covered here:
- What is DIVA's interactive timeline?
- What is the enhanced timeline?
- What is the alternative timeline?
- How is the timeline populated?
- Timeline operator configuration
- Timeline icons
- What is spoiler-free mode?
What is DIVA's interactive timeline?
The interactive timeline is a key feature for event discoverability in DIVA, helping to ensure users never miss a moment of the action. Made possible through easy interaction with the timeline and all defined key events (specified by the client or editorial team) relating to the video content via event icons and event cards.
DIVA’s interactive timeline combines both editorial and sports data feeds for live, live Digital Video Recorder (DVR), live linear, and video-on-demand (VOD) content and is available in two modes, enhanced and alternative.
Read our video playback article for more information on DIVA's supported video states.
What is the enhanced timeline?
The enhanced timeline displays icons indicating key events, providing further information in a corresponding event card. Learn more about timeline icons.
For example, a Football event icon displays on the timeline at the moment in the stream a goal was scored. The corresponding event card provides information on who scored the goal and when. To rewatch the goal, hover over the event icon to display the event card. Select the event card to replay the key moment automatically. Alternatively, select the event icon to reposition the playhead to the moment of the goal.
Users can seek back/forward through the available icons to view other event cards and rewatch key moments. The closest event card to the play head position is selected by default, highlighting both the card and icon.
Operators can specify an offset, meaning selecting an event card shows footage from 10 or 15 seconds before the key event, ensuring the entire key moment is captured.
Interactive timeline on Responsive web (desktop):
What is the alternative timeline?
DIVA's alternative timeline offers a simplified view, displaying key event details as they unfold at the bottom of the screen.
Alternative timeline on Responsive web (desktop):
How is the timeline populated?
The timeline is populated in two ways; either automatically fed by an external sports data provider or manually edited by a dedicated operator through DIVA Back Office.
As the event unfolds, key moments are positioned alongside the timeline with event-specific icons, allowing viewers to quickly and easily revisit specific points in time.
Timeline operator configuration
Depending on the video data received, operators can choose to display video content in two ways:
- Match mode: For events between two opponents. Event icons for opponent A are shown above the seekbar, and event icons for opponent B are below the seekbar. Opponent names and scoring data are also displayed.
- Single mode: For events with a single participant, e.g., Dressage or Gymnastics. Event icons and cards are shown above the seekbar.
Provide timeline events in two ways, dynamically, during the video consumption, as soon as events become available, or statically, at the video load time.
Timeline icons
To improve DIVA's UX/UI, part of the DIVA 5.2 release on Android, iOS, and Responsive web includes timeline icon enlargement and consistent sizing for better visibility.
Event icons display within a defined container of 16x16 pixels. In the instance that multiple event icons are shown on the timeline in close proximity, the latest event icon overlaps earlier event icons.
Which icons are available?
DIVA currently supports Football, Handball, Basketball, and Volleyball icons, although developments are underway to expand our icon set. Icons are configurable on a project basis.
Timeline icon examples (Football) on Native mobile:
What is timeline icon clustering?
Released across Android, iOS, Responsive web, WebTV, Android TV, tvOS, and Roku (5.5), timeline icon clustering greatly improves the UX for fast-paced events such as Handball and Basketball.
If the cluster icon appears on the timeline, there are several events in a short space of time, and these events are now grouped (grouping is independent of any event icons).
Expanding the cluster icon bahavior depends on the device in use:
Small screen behavior
On small screens, select the cluster icon to expand the grouped icons and view further details. Once expanded, event cards display the icon and details relevant to that specific event.
Timeline icon clustering example on Responsive desktop:
Timeline icon clustering example on Responsive tablet:
Timeline icon clustering example on Responsive mobile:
Timeline icon clustering example on Native mobile:
Big screen behavior
On big screens, with the timeline visible, select up on the remote and move focus to the alternative timeline. Here, the single event cards, icons, and details display.
Timeline icon clustering example on WebTV, Android TV, and Roku:
On tvOS, when the timeline grouping icon displays, view individual events via the Key moments tab.
Timeline icon clustering example on tvOS:
Key moments example on tvOS:
Timeline icon clustering configuration
Integrators can set the parameter clustering value to cluster more or fewer icons (value = 0 to disable clustering). See our developer documentation for more information.
What is spoiler-free mode?
Note: Spoiler-free mode is enabled by default for video-on-demand content.
If enabled by an operator, spoiler-free mode ensures users are not exposed to timeline event icons and cards ahead of the action, resulting in prematurely knowing the event's outcome. Once the playhead position reaches the time of an event, e.g., a goal, the event icon appears on the timeline, and the event card is accessible.
When a timeline event is discovered, both remain visible (spoiled), regardless of where the playhead position is moved afterward. For further information, read our video playback article.
Select an option below to view timeline examples:
DIVA supports both the enhanced and alternative timeline modes on native mobile and tablet.
Enhanced timeline
To view all event highlights in a horizontal list:
- Tap anywhere on the screen to display player controls.
- Tap the See all Highlights link below the timeline hover description.
- Tap a highlight to return to the specific moment of the stream.
Alternative timeline
To view events:
- Tap anywhere on the screen to display player controls.
- Use the swipe-up gesture to activate the alternative timeline.
- Tap a highlight to return to the specific moment of the stream.
On Responsive web, DIVA supports both the enhanced and alternative timeline modes.
Enhanced timeline
With the enhanced timeline, as of the Web 5.2 release, users can preview a single event by hovering on a timeline icon.
- Hover anywhere on the screen to display player controls.
- Hover on a timeline icon to display further information. In the example below, the event preview displays the Chapter title, the minute the event the took place, the time stamp, the event icon, event details, and left/right arrows to navigate.
- Select a timeline event icon or event card to return to the specific moment of the stream.
- Select left/right arrows to launch the alternative timeline. Arrows display when multiple events exist.
Enhanced timeline on Responsive web (desktop):
Alternative timeline
To view events:
- Hover anywhere on the screen to display player controls.
- Select an event icon or event card to return to the specific moment of the stream.
Alternative timeline on Responsive web (desktop):
Switch timeline modes
To switch between enhanced and alternative modes, select the icon in the bottom left-hand corner of the screen.
Alternatively, select the left/right arrows on a timeline event preview to launch the alternative timeline.
What are timeline extensions?
Relevant commentary, sometimes referred to as timeline extensions (supported on web only), displays content (specified by an operator) above the timeline, regardless of whether the commentary panel is open (see below). For further information, read our commentary article.
Enhanced timeline
On WebTV, DIVA supports the enhanced timeline.
To view event highlights, using the remote, navigate to key moments to display further details in event cards and rewatch highlights.
Using the remote:
- Select the up arrow to display player controls.
- Select the up arrow again to activate the timeline.
- Select left/right arrows to navigate between event cards.
- Select OK with the event card in focus to rewatch the corresponding key moment.
Enhanced timeline
On Android TV, DIVA supports the enhanced timeline.
To view event highlights, using the remote, navigate to key moments to display further details in event cards and rewatch highlights.
Using the circular control on an Android remote:
- Select up to display player controls.
- Select up again to activate the timeline.
- Select left/right on the circular control to navigate between event cards.
- Select the middle button with the event card in focus to rewatch the corresponding key moment.
Enhanced timeline
Compatibility information: DIVA supports tvOS 15+
On tvOS, DIVA supports the enhanced timeline.
To view event highlights, using the remote, navigate to key moments to display further details in event cards and rewatch highlights.
Using the Siri remote (2nd generation):
- Select down on the clickpad ring to display the event list. The Info tab is selected automatically.
- Select right on the clickpad ring to navigate to the Key moments tab.
- Select down on the clickpad ring to focus on the event cards.
- Select left/right on the clickpad ring to navigate.
- Select the clickpad center with the event card in focus to rewatch the corresponding key moment.
- Select down again on the clickpad ring to hide the event list.
Enhanced timeline
On Roku, DIVA supports the enhanced timeline.
To view event highlights, using the remote, navigate to key moments to display further details in event cards and rewatch highlights.
Using the Roku remote control:
- Select the up arrow to display player controls.
- Select the up arrow again to activate the timeline.
- Select left/right arrows to navigate between event cards.
- Select OK with the event card in focus to rewatch the corresponding key moment.