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.

  • Ensure the VideoMetadata file contains the custom scrubbing intervals (TV only):

    {
     "behaviour": {
        "seekSpeed1": 10000, // ms skip for each second, default 10000
        "seekSpeed2": 300000, // ms skip for each second, default 300000
        "seekSpeed3": 600000, // ms skip for each second, default 600000
     }
    }

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.

Scrubbing mode on TVs​

Pause and Resume Playback​

When the user selects the "Pause" button:

  • The current timestamp should be saved, and the video pauses at that exact moment.
  • Upon selecting "OK" or "Play", the video playback resumes from the paused position.

Normal Seek (Skip +/- 10s)​

When the user taps the left or right arrow buttons, the video skips backwards or forwards by 10 seconds

  • A single tap on the left arrow skips the video back by 10 seconds.
  • A single tap on the right arrow skips the video forward by 10 seconds.

Fast Rewind/Forward Functionality​

To trigger fast rewind or fast forward, the user can move the arrows until the focus reach the seekbar or presses and holds the left or right arrow buttons, respectively.

  • Rewind: Hold the left arrow button to fast rewind.
  • Forward: Hold the right arrow button to fast forward.

A rewind/forward icon appears to the left/right of the video timestamp accordingly. Once fast rewind or forward is triggered, the video is paused. The video screen switches to a thumbnail scrubber mode, previewing the video frames as the user navigates through the content.

Increasing Rewind/Forward Speeds​

Pressing the right or left arrow key, the scrubbing speed will change from 1x to 2x and then to 3x. The speed increments if the user continues to press in the same direction, right for forward, left for rewind. And decreases, or change from forward to rewind (and vice versa), if the user changes the direction.

The speed increments should be as follows (and in similar way decreases):

  • Speed 1 (default speed): Initial fast rewind/forward (default: 10 seconds per second).
  • Speed 2: after 1 click (default: 1 minute per second).
  • Speed 3: after 2 clicks (default: 10 minutes per second). If the scrubbing reach the end or the start of the video, the speed will be reset to 1x.
Exit scrubbing mode​

If user press play or ok button, the scrubbing mode will be closed and video will be seeked to the scrub position.

If user press other button different from arrows, play or ok, the scrubbing mode will be closed and video will be continue to play from the same position before enter in scrubbing mode.

Analytics events​

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