| Mobile | Tablet | Web | TV | |||||
|---|---|---|---|---|---|---|---|---|
This article introduces video playback within DIVA across various video states.
Topics covered here:
- Video playback
- Skip intervals
- Chromeless mode
- How do I access DIVA's feature set?
- How does DIVA handle video quality?
- How does DIVA handle image quality?
- What are deep links?
- What is video trimming?
- What is spoiler-free mode?
- Does DIVA support recommendations?
- What happens at the end of video playback?
- Live to VOD transition
- Which video states does DIVA support?
What is video playback?
Video playback is a reproduction of a video recording or reading of a video source. The video state determines the available controls, e.g., the ability to pause, jump to live, scrub back/forward, and re-watch content.
💡 For more information on interacting with video content, read our interactive timeline article. Visit the DIVA Platform article for details on supported streaming formats.
What is the skip intervals feature?
Introduced in DIVA 5.7, available for video-on-demand (VOD), the skip intervals feature allows users to skip intros, episode recaps, starting credits, etc, jumping straight to the main video.
💡 Learn more about skip intervals and view examples.
What is Chromeless mode?
Chromeless mode (available from DIVA 5.6 onwards) refers to embedded videos that play automatically within sections of DIVA Player, for example, a trailer within a list of tiles, Hero rows, or on an Item Detail page.
Chromeless mode provides users with a video preview when browsing content, enriching the playback experience and aiming to increase engagement. UI is hidden, meaning no playback controls are available.
Supporting basic controls via API callbacks; configurable Chromeless mode options include play/pause/stop/mute, set playback volume, and video replay (loop playback).
If loop playback is not enabled, users are either returned to the initial page or a cover image displays based on configuration settings.
Chromeless mode hero row example on Responsive web (desktop):
How do I access DIVA's feature set?
The video player interface makes DIVA's key sports and entertainment features easily discoverable during video playback.
Seamlessly navigate through menus, interacting with collapsible feature panels such as Commentary, Team Stats, Lineups, Top Players, Cameras, and Live Games. Support for custom integration menus, including Shop, Scneenic's Watch Together, and LiveLike functionality, is also available.
How does DIVA handle video quality?
Available on Responsive web from version 5.8 onwards, the video quality selector provides DIVA users with the flexibility and control to select the desired streaming quality on small screen devices, optimizing their viewing experience.
Whether at home or on-the-go, Responsive Web users can select the desired video quality based on available options, or opt for automatic selection depending on network conditions and user preferences.
💡 Read more in the video quality selector article.
How does DIVA handle image quality?
DIVA Player supports the device's base video player. This means if the device in use supports HDR and or 4K, DIVA Player presents content in this format. It's important to note that content must be produced in HDR/4K format, and the HDR device settings must be enabled.
💡 For more information, read our High Dynamic Range (HDR) article.
What are deep links?
Deep links let operators initiate video playback on VOD and Live DVR content at a defining moment in the stream, for example, a specific video highlight. Users can easily jump straight to a specific point in the video, streamlining the user experience and increasing user engagement.
Deep linking is validated against the trimmed video duration; any configured deep links must be applied within the trimmed video. For more information, read the What is video trimming? section below.
DIVA supports two deep link modes:
- Relative: using a value in seconds to jump to a specific point in the video
- Absolute: using a date-time format to jump to a specific point in the video based on the timecodeIn synchronization
What is video trimming?
Video trimming enables operators to cut down the duration of an original video. Specify a start (trimIn) and an end point (trimOut), which generates a video sub-clip. DIVA receives the trimIn and trimOut values from the VideoMetadata file upon video playback.
The video trimming feature aids video maintenance, scheduling, and delivery. The original un-trimmed video is stored on servers, while the sub-clip trimmed video is accessible via DIVA Player.
Notes:
- The trimIn value supports VOD and Live DVR content, while the trimOut value supports VOD content only.
- If DIVA receives a deeplink that is positioned in the portion of the video that has been trimmed, upon loading the video, the trimIn/trimOut values are invalid, and DIVA reverts to the original start/end points.
What is spoiler-free mode?
Note: spoiler-free mode is enabled by default for video-on-demand (VOD) content.
If enabled by an operator, spoiler-free mode ensures users are not exposed to timeline event markers and cards ahead of the action, resulting in knowing the event's outcome prematurely. Once the playhead position reaches the time of an event, e.g., a goal, the event marker appears on the timeline, and the event card is accessible.
When a timeline event is discovered, both the event marker and card remain visible (spoiled), regardless of where the playhead position is moved afterward. For further information on timeline features, read our interactive timeline article.
Does DIVA support recommendations?
Yes, if content recommendations are set up, video lists display related content after the video loaded in the player ends. Check out our content recommendations article for further information on behavior and supported platforms.
What happens at the end of video playback?
DIVA supports an End-of-Play experience for users when reaching the end of a video stream. The EoP functionality guides users on their onward journey through highlights and recommended content.
Live to VOD transition
Responsive web (5.4.2), Android mobile and tablet, and iOS and iPadOS (5.4.1), WebTV (5.4.5), Android TV (5.4.3), tvOS (5.4.1), and Roku (5.5) all support the transition of videos with a status of Live to VOD.
When watching a Live video, when the transition to VOD takes place, the End-of-Play experience triggers; the Live stream is no longer live, but it's available as content on demand.
On DVR, playback is not interrupted, however, the Go live button disappears when the Live video ends and transitions to VOD content. When users reach the end of the stream, the End-of-Play experience triggers.
Which video states does DIVA support?
DIVA supports the following video states:
- Live
- Live linear streaming with/without DVR
- Video-on-demand (VOD)
Available video controls depend on the video state; read below for more information and examples.
A standalone live event streamed on its own. Live content is broadcast as it unfolds in real time; typically, users cannot skip back or pause content.
Live linear content is live-streamed and controlled via a broadcast schedule, which is usually 24/7 and contains multiple events, like a live sports match or broadcast channel on TV.
If a Digital Video Recorder (DVR) is involved and defined in the manifest, this records videos to local storage devices, meaning users can pause or skip back through content.
Select an option below to see examples of this feature:
Play/pause: Play and pause content via the play/pause toggle.
- Tap anywhere on the screen to display the player's controls.
- Tap the play/pause icon to play/pause content.
Go live: Easily jump to the live point in the video stream if you fall behind because of pausing or skipping backward.
- Tap anywhere on the screen to display the timeline.
- Tap the Go Live icon to jump to the live content; the Live badge displays.
Play/pause: Play and pause content via the play/pause toggle.
- Hover anywhere on the screen to display the player's controls.
- Select the play/pause icon to play/pause content.
Go live: Easily jump to the live position in the video stream if you fall behind because of pausing or skipping backward.
- Hover anywhere on the screen to display the player's controls.
- Select Go Live to jump to the live content; the Live badge displays.
Jump back/forward via scrub bar: navigate through content with a tooltip and thumbnail image (if available). For more information, refer to our thumbnail scrubbing article.
- Hover anywhere on the screen to display the player's controls.
- Drag the playhead left/right across the timeline to move the playhead position back/forward.
Scrub preview example on Responsive web (desktop):
Scrub preview example on Responsive web (tablet):
Scrub preview example on Responsive web (mobile):
Event preview via scrub bar: Preview a single event by hovering over a timeline icon.
- Hover anywhere on the screen to display the player's controls.
- Hover over a timeline icon to display further information.
- Select the left/right arrows to launch the alternative timeline. Arrows display when there are multiple events in the timeline.
Event preview example on Responsive web (desktop):
Event preview example on Responsive web (tablet):
Event preview example on Responsive web (mobile):
Alternative timeline example on Responsive web (desktop):
Minimal player
The Responsive web minimal player displays when the viewport has a 640px width and below and supports basic playback controls.
Minimal player example on Responsive web:
Play/pause: Play and pause content via the play/pause toggle icon.
Using the remote:
- Select the up arrow to display player controls.
- Select OK to pause. The button displays to jump to the live moment.
Go live: Easily jump to the live position in the video stream if you fall behind because of pausing or skipping backward. The red LIVE badge is grayed out when the playhead position falls behind the live moment. To jump back into the live moment, select the Go live button.
Using the remote:
- Select the up arrow to display the player's controls.
- Select OK with the Go live button in focus to jump to the live moment.
Play/pause: Play and pause content via the play/pause toggle icon or the middle/OK button.
Using the circular control on an Android remote:
- Select up to display player controls.
- Select the middle button on the circular control to pause. The Go Live button displays to jump to the live moment.
Go live: Easily jump to the live position in the video stream if you fall behind as a result of pausing or skipping backward. When the playhead position falls behind the live moment, the red LIVE badge is greyed out. To jump back into the live moment, select the Go live button.
Using the circular control on an Android remote:
- Select up to display player controls.
- Select the middle button with the Go live button in focus to jump to the live moment.
Compatibility information: DIVA supports tvOS 15+
DIVA tvOS uses native OS behavior. Refer to the Apple TV User Guide for details on controlling what's playing.
Play/pause: Play and pause content via the play/pause toggle.
Go live: Easily jump to the live position in the video stream if you fall behind as a result of pausing or skipping backward. The red LIVE badge is greyed out when the playhead position falls behind the live moment. To jump back into the live moment, select the Go Live button inside the standard Info panel.
Using the Roku remote control:
- Select the play/pause button to pause. The Go Live button displays to jump to the live moment.
Go live: Easily jump to the live position in the video stream if you fall behind because of pausing or skipping backward. When the playhead position falls behind the live moment, the red LIVE badge is greyed out. To jump back into the live moment, select the Go live button.
Using the Roku remote control:
- Select the up arrow to display the player's controls.
- Select OK with the Go live button in focus to jump to the live moment.
VOD content is pre-recorded and readily available, allowing users to pause, play, skip back/forward, and re-play.
Select an option below to see examples of this feature:
Play/pause: Play and pause content via the play/pause toggle.
- Tap anywhere on the screen to display the player's controls.
- Tap the play/pause icon to play/pause content.
Jump back/forward via the scrub bar: Navigate through content with a tooltip and thumbnail image (if available). For more information, refer to our thumbnail scrubbing article.
- Tap anywhere on the screen to display the player's controls.
- Drag the playhead left/right across the timeline to move the playhead position back/forward.
Quick skip back/forward: If 10 seconds or more of previous or forthcoming content is available, skip back/forward in 10-second increments.
- Tap the screen to display the player's controls.
- Tap the skip back/forward icons to quickly navigate through content.
Play/pause: Play and pause content via the play/pause toggle.
- Hover anywhere on the screen to display the player's controls.
- Select the play/pause icon to play/pause content.
Jump back/forward via scrub bar: Navigate through content with a tooltip and thumbnail image (if available). For more information, refer to our thumbnail scrubbing article.
- Hover anywhere on the screen to display the player's controls.
- Drag the playhead left/right across the timeline to move the playhead position back/forward.
Scrub preview example on Responsive web (desktop):
Scrub preview example on Responsive web (tablet):
Scrub preview example on Responsive web (mobile):
Event preview via scrub bar: Preview a single event by hovering over a timeline icon.
- Hover anywhere on the screen to display the player's controls.
- Hover over a timeline icon to display further information.
- Select left/right arrows to launch the alternative timeline. Arrows display when there are multiple events in the timeline.
Event preview example on Responsive web (desktop):
Event preview example on Responsive web (tablet):
Event preview example on Responsive web (mobile):
Alternative timeline example on Responsive web (desktop):
Minimal player
The Responsive web minimal player displays when the viewport has a 640px width and below and supports basic playback controls.
Minimal player example on Responsive web:
Play/pause: Play and pause content via the play/pause toggle.
Using the remote:
- Select the up arrow to display player controls.
- Select OK to toggle between play/pause.
Jump back/forward via the scrub bar: Navigate through content with a tooltip and thumbnail image (if available). For more information, refer to our thumbnail scrubbing article.
- Select left/right arrows to jump back/forward in 10-second increments. Hold left/right arrows to skip back/forward in 20-second increments per second held.
- Select OK to play content from the playhead position.
Quick skip back/forward: If 10 seconds of previous or forthcoming content is available, skip back/forward in 10-second increments.
- Select left/right arrows to skip back/forward through content.
Play/pause: Play and pause content via the play/pause toggle.
Using the circular control on an Android remote:
- Select up to display player controls.
- Select the middle button to toggle between play/pause.
Jump back/forward via the scrub bar: Navigate through content with a tooltip and thumbnail image (if available). For more information, refer to our thumbnail scrubbing article.
Compatibility notes: Scrubbing enhancements are available from Android 5.9 onwards:
- Select left/right to jump back/forward in 10-second increments.
- Press and hold left/right on the circular control to skip back/forward in 20-second increments per second held.
- Keep left/right to increase back/forward scrub speed; default speeds: 10 seconds, 1 minute, 10 minutes.
- Select the middle button to initiate playback from the playhead position.
Notes:
- A back/forward icon appears next to the timestamp when scrubbing.
- Scrub speeds are configurable per project
Quick skip back/forward: If 10 seconds of prior or forthcoming content is available, skip back/forward in 10-second increments.
- Select left/right to skip back/forward through content.
Compatibility information: DIVA supports tvOS 15+
DIVA tvOS uses native OS behavior. Refer to the Apple TV User Guide for details on controlling what's playing.
Play/pause: Play and pause content via the play/pause toggle.
Jump back/forward via the scrub bar: Navigate through content with a trickplay image (if available). For more information, refer to our thumbnail scrubbing article.
Quick skip back/forward: If 10 seconds of previous or forthcoming content is available, a single button press skips by 10 seconds, or a continuous press skips in 10-second increments.
Play/pause: Play and pause content via the play/pause toggle.
Using the Roku remote control:
- Select the play/pause button to toggle between play/pause.
Multi-speed jump back/forward via the scrub bar: Navigate through content at various speeds with a tooltip and thumbnail image (if available, see example below). For more information, refer to our thumbnail scrubbing article.
Example of a time-based tooltip (displays when there is no available thumbnail image). For more information, refer to our thumbnail scrubbing article:
To jump back/forward, either enter automatic scrub mode:
- Long-press the left/right arrow buttons when player UI is hidden to fast-forward/rewind (2-second default scrub speed).
- Short-press fast-forward/rewind buttons (2-second default scrub speed). Press the fast-forward/rewind button again to increase the scrub speed to 10 seconds and a further press to scrub at 130 seconds. Press left/right arrow keys to move into manual scrub mode.
Enter manual scrub mode:
- Press the left/right arrow keys once to fast-forward/rewind by 10 seconds.
Resume video playback:
To resume video playback when scrub mode is active, either:
- Select OK or the play/pause button.
- Select the down arrow. Focus moves to the player's play/pause toggle.
To exit scrub mode, select the back arrow. The player transitions out of the controls and initiates video playback from the original playhead position before entering scrub mode.