Skip to main content

Scrubbing

What you'll learn​

You'll learn how to instantiate DIVA Player in your Roku app while relying on DIVA Back Office as the video streaming source.

The goal of this article is to build the simplest DIVA Player in your Roku app to stream a video from the DIVA Back Office with a thumbnail preview on the scrubber bar and a custom scrubbing speed.

Before starting​

  • Ensure the DIVA Back Office instance you rely on is up and running.

  • Ask your video engineering team for 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 (standard approach).
    • HLS Streams: Use #EXT-X-IMAGE-STREAM-INF tag in manifest for thumbnails (standard approach).
    • BIF: If BIF (Base Index Frames) is provided within the video metadata, thumbnails are not required inside the manifest.
    • VTT Metadata: If VTT (Video Text Tracks) metadata is provided within the video metadata, thumbnails are not required inside the manifest. The fields responsible for VTT metadata in VideoMetadata are: vttThumbnails, vttThumbnails.baseUrl, and vttThumbnails.filename.

    Note: Roku recommends that in videos with Server-Side Ad Insertion (SSAI), you use only HLS or DASH "standard" thumbnails, as an incompatibility in the BIF-support mechanism can cause thumbnails and video to fall out of sync during SSAI operation.

  • The VideoMetadata file contains the custom scrubbing intervals:

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

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 appear 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​

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 reaches the seekbar or press and hold 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 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 changes the scrubbing speed 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 changes from forward to rewind (and vice versa) if the user changes direction.

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

  • Speed 1 (default speed): Initial fast rewind/forward (default: 2 seconds per second).
  • Speed 2: After 1 click (default: 10 seconds per second).
  • Speed 3: After 2 clicks (default: 130 seconds per second).

If the scrubbing reaches the end or the start of the video, the speed will be reset to 1x.

Exit scrubbing mode​

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

If the user presses any other button different from arrows, play, or OK, the scrubbing mode will be closed and the video will continue to play from the same position before entering scrubbing mode.

Working sample code for overriding BIF thumbnails (.brs)​

sub launchBOAdapter(divaLaunchParams as object)
    ...
    ' Observe BO Adapter VideoMetaDataNode
    m.boAdapterNode.observeField("videoDataNode", "onBOAdapterVideoDataNodeHandler")
    ...
end sub

sub onBOAdapterVideoDataNodeHandler(evt as dynamic)
    data = evt.getData()

    data.addFields({
        "rokuBifProvision": {
            "bifSD": "https://***//vid-sd.bif",
            "bifHD": "https://***/vid-hd.bif",
            "bifFHD": "https://***/vid-fhd.bif"
        },
    })

    ' Setup Diva Player Metadata
    m.dpUtilsNode.callFunc("setMetaData", data)
end sub