--- title: "Interactive timeline" slug: "interactive-timeline" updated: 2025-10-30T15:03:21Z published: 2025-10-30T15:03:21Z --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.deltatre.com/llms.txt > Use this file to discover all available pages before exploring further. # Interactive timeline | Mobile | Tablet | Web | TV | | --- | --- | --- | --- | | ![android_watermark.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4490958972956.svg) | ![iOS.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4490959197852.svg) | ![android_watermark.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4490958972956.svg) | ![iPadOS.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4490914682524.svg) | ![HTML5.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4490951859100.svg) | ![android_watermark.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4490958972956.svg) | ![tvOS.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5569247809180.svg) | ![HTML5.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4490951859100.svg) | ![Roku.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4490959071132.svg) | ## 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](/v1/docs/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](/v1/docs/interactive-timeline#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 (responsive web).png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/7899999411868.png) *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. ![Alternate timeline (responsive web).png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/7900004754332.png) *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: 1. **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. 2. **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 > [!WARNING] > **Compatibility note:** To improve DIVA's UX/UI, part of the DIVA 5.2 release on [Android,](/v1/docs/android-52-q4-22) [Apple](/v1/docs/ios-52-q4-22), and [Responsive web](/v1/docs/responsive-web-52-q2-23) 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 icons and UI refresh - small screen iOS.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/6271638838300.png) *Timeline icon examples (Football) on Native mobile* #### What is timeline icon clustering? > [!WARNING] > **Compatibility note:** Released across [Android](/v1/docs/android-55-q3-23), [Apple](/v1/docs/ios-55-q3-23), [Responsive web](/v1/docs/responsive-web-55-q3-23), [WebTV](/v1/docs/webtv-55-q3-23), [Android TV](/v1/docs/android-tv-55-q3-23), [tvOS](/v1/docs/tvos-55-q3-23), and [Roku](/v1/docs/roku-55-q3-23) (5.5), timeline icon clustering greatly improves the UX for fast-paced events such as Handball and Basketball. If the cluster icon ![icons (2).png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/10634456869532.png) 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 interactive timeline behavior examples 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. ![Responsive Web Match Mode - Event Hover.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/10634456872220.png) *Timeline icon clustering example on Responsive desktop* ![Event Hover. tablet.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/10683715754652.png) *Timeline icon clustering example on Responsive tablet* ![Event Hover - mobile.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/10683715758876.png) *Timeline icon clustering example on Responsive mobile* ![Timeline icon clustering Native mobile.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/10718790188828.jpg) *Timeline icon clustering example on Native mobile* #### Big screen interactive timeline behavior examples 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 grouping WebTV, Android TV, and Roku.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/10684408294940.png) *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 grouping tvOS.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/10718775292956.png) *Timeline icon clustering example on tvOS* ![Videolists.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/10718790200220.png) *Key moments example on tvOS* ### What is spoiler-free mode? > [!NOTE] > **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](/v1/docs/video-playback) article. --- Select a tab below to view timeline examples: Native mobile/tabletResponsive webWebTVAndroid TVtvOSRoku > [!WARNING] > **Compatibility note:** DIVA 5.2 release notes on [Android](/v1/docs/android-52-q4-22) and [Apple (iOS/iPadOS)](/v1/docs/ios-52-q4-22) for UX/UI improvements. 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: 1. Tap anywhere on the screen to display player controls. 2. Tap the *See all Highlights link* below the timeline hover description. 3. Tap a highlight to return to the specific moment of the stream. #### ![Enhanced_timeline_Mobile_and_Tablet.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9139977290908.jpg) ### Alternative timeline To view events: 1. Tap anywhere on the screen to display player controls. 2. Use the swipe-up gesture to activate the alternative timeline. 3. Tap a highlight to return to the specific moment of the stream. ![Alternate_timeline_-_ipad.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9139977296540.jpg) On Responsive web, DIVA supports both the *enhanced* and *alternative* timeline modes. ### Enhanced timeline With the enhanced timeline, as of the [Web 5.2](/v1/docs/responsive-web-52-q2-23) release, users can preview a single event by hovering on a timeline icon. 1. Hover anywhere on the screen to display player controls. 2. 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. 3. Select a timeline *event icon* or *event card* to return to the specific moment of the stream. 4. Select left/right arrows to launch the alternative timeline. Arrows display when multiple events exist. ![Event preview (responsive web) Live.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/7897522797980.png) *Enhanced timeline on Responsive web (desktop)* ### Alternative timeline To view events: 1. Hover anywhere on the screen to display player controls. 2. Select an *event icon* or *event card* to return to the specific moment of the stream. ![Alternate timeline (responsive web).png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/7897498767516.png) *Alternative timeline on Responsive web (desktop)* #### Switch timeline modes To switch between *enhanced* and *alternative* modes, select the ![Alternate timeline icon.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9139962933788.png) 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. ![Left:right event preview arrows.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/7897463686556.png) ### 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](/v1/docs/commentary) article. ![Timeline extensions.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4413298072594.png) ### Enhanced timeline On WebTV, DIVA supports the enhanced timeline. ![Webtv - interactive timeline.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4408739300498.png) To view event highlights, using the remote, navigate to key moments to display further details in event cards and rewatch highlights. Using the remote: 1. Select the *up* arrow to display player controls. ![webTV - interactive timeline - up arrow.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4408731218706.png) 2. Select the *up* arrow again to activate the timeline. ![webTV - interactive timeline - up arrow.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4408731218706.png) 3. Select *left/right* arrows to navigate between event cards. ![webTV - interactive timeline - left and right arrows.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4408739550098.png) 4. Select *OK* with the event card in focus to rewatch the corresponding key moment. ![webTV - interactive timeline - OK arrow.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4408731244434.png) ### Enhanced timeline On Android TV, DIVA supports the enhanced timeline. ![Webtv - interactive timeline.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4408739300498.png) 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: 1. Select *up* to display player controls. ![Android control - up button.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5214175460252.png) 2. Select *up* again to activate the timeline. ![Android control - up button.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5214175460252.png) 3. Select *left/right* on the circular control to navigate between event cards. ![Android control - left and right button.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5214175664540.png) 4. Select the *middle* button with the event card in focus to rewatch the corresponding key moment. ![Android control - ok button.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5214176022044.png) ### Enhanced timeline > [!WARNING] > **Compatibility note:** DIVA supports tvOS 15+ On tvOS, DIVA supports the enhanced timeline. ![Interactive timeline - tvOS.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5574577947292.png) 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): 1. Select *down* on the clickpad ring to display the event list. The *Info* tab is selected automatically. ![tvOS down arrow.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5574504524188.png) 2. Select *right* on the clickpad ring to navigate to the Key moments tab. ![tvOS right arrow.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5574505040284.png) 3. Select *down* on the clickpad ring to focus on the event cards. ![tvOS down arrow.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5574504524188.png) 4. Select *left/right* on the clickpad ring to navigate. ![tvOS left:right arrow.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5574541240220.png) 5. Select the *clickpad center* with the event card in focus to rewatch the corresponding key moment. ![tvOS clickpad center.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5574545915292.png) 6. Select *down* again on the clickpad ring to hide the event list. ![tvOS down arrow.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5574504524188.png) #### Enhanced timeline On Roku, DIVA supports the enhanced timeline. ![Webtv - interactive timeline.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4408739300498.png) 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: 1. Select the *up* arrow to display player controls. ![Roku - up.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5256564751516.png) 2. Select the *up* arrow again to activate the timeline. ![Roku - up.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5256564751516.png) 3. Select *left/right* arrows to navigate between event cards. ![Roku - left:right arrows.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5256568014748.png) 4. Select *OK* with the event card in focus to rewatch the corresponding key moment. ![Roku - OK.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/5256556129052.png) --- ### FAQs #### How is timeline icon clustering configured? 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.