Scrubbing
What you learn​
You're instantiating DIVA Player in your web front-end and relying on third party video streaming source.
The goal of this article is to build the simplest front-end to stream a video from your video production with a thumbnail preview on the scrubber bar and a custom scrubbing speed (TV only).
Before starting​
-
Ensure the video production you rely on is up and running.
-
Set the videoId and the related setting configuration.
-
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.