Skip to main content

Scrubbing

What you learn​

You're instantiating DIVA Player in your web front-end and relying on DIVA Back Office as the video streaming source.

The goal of this article is to build the simplest front-end to stream a video from the DIVA Back Office with a thumbnail preview on the scrubber bar and a custom scrubbing speed (TV only).

Before starting​

  • Ensure the DIVA Back Office instance you rely on is up and running.
  • Ask your video engineers team the <video id> and the related <settings URL>.
  • Ensure the video asset supports thumbnail previews.
    • DASH Streams: Use the DASH-IF adaptation sets for retrieving thumbnails
    • HLS Streams: Use I-Frame playlists for thumbnail support.
    • VTT Metadata: If VTT (Video Text Tracks) is provided within the video metadata, thumbnails are not required inside the manifest.

Instantiation​

There's no code to add to the Basic instantiation code.

Behaviour​

When a user hovers over or drags the scrubber bar, thumbnail previews appears directly above the scrubber.
Thumbnails are aligned with the correct timecode.
If thumbnails are not available for the current video or platform, the user will only see the current time displayed as they scrub through the video.

Analytics events​

Find here the available control bar seek* events for the Scrubbing. And the video seek events for the TVs.