Player Seekbar thumbnails display with keyboard events

Support
,
1

Product

Player

Question

Hello.

I have a question about the player seekbar (seekbar label) and displayed thumbnails.

My question is, is it possible to show these thumbnails based on other events and not only when hovering with the mouse. The use case can be for example seeking via the keyboard.

Let’s say a stream is loaded that has thumbnail tiles “embedded” (i believe the stream is implementing DASH-IF-IOP standard). I have tested this on Bitmovin's Test Player » Try our HTML 5 Video Player Demo . The thumbnails are displayed on mouse hover and on seeking with mouse in the seekbar.

In the web app, custom seekbar is used.

We are using custom configuration for seekbar like this:

    this.seekbar = new SeekBar({
        enableSeekPreview: true,
        smoothPlaybackPositionUpdateIntervalMs: -1,
        label: new SeekBarLabel({
            role: 'img',
            disabled: false,
            tag: 'small'
        })
    });

    this.seekIndicatorLabel = new Component({
        tag: 'small',
        cssClass: 'some_class',
        hidden: true
    });

and then

ui = new UIManager(
this.player,
new UIContainer({
components: [
new PlaybackTimeLabel({
timeLabelMode: PlaybackTimeLabelMode.CurrentTime,
cssClass: ‘some_other_label’,
hideInLivePlayback: false
}),
this.seekIndicatorLabel,
this.seekbar,
new PlaybackTimeLabel({
timeLabelMode: PlaybackTimeLabelMode.TotalTime,
cssClass: ‘class-total’
})
],
cssClass: ‘seekbar’
})
);

Currently it seems that only hovering with mouse triggers the display of the thumbnails, otherwise they are not present in the generated html.

P.S. “ui: false” is used for the bitmovin player configuration.

2

Hi @zoran.trajchev,

Currently, keyboard navigation works in our Web UI by performing the seek immediately. So when you press the left/right or up/down arrow keys the player will change the playback position immediately according to the KeyStepIncrementsConfig.

It sounds like you would prefer a ‘preview-and-confirm’ mechanism when using the keyboard navigation. Is that correct?

Best,
Davide

3

Hi David. Thanks for your reply.

Navigation using keyboard on our side is implemented using custom functionality that reacts on keyboard events - it does not rely on mouse seeking on the default seekbar in the player UI.

KeyStepIncrementsConfig is not used in the configuration at all.

The question is: Is there any bitmovin method to show the thumbnails at a specific time without using the default mouse seek functionality? (programatically)

If i use the seekbar via mouse dragging, it shows the thumbnail images correctly but it is not fitting our use case.

I believe ‘preview-and-confirm’ mechanism that you mention is what is needed yes.

From the source code, i saw there is api method to get thumbnails

Returns:
A thumbnail if a thumbnails track is configured and a thumbnail exists for the specified time, else null


getThumbnail()

My understanding from the comments is that this will work only if there is separate thumbnails track configured, which is not the case on our side as i mentioned in the first post - the thumbnails are within the stream.

Tried to console.log and print the thumbnail value when the player UI is shown, the output is always null. (console.log(playerAPI.getThumbnail(some_time)))

Also tried setting the thumbnail via this method of the seekbarLabel, something like this

this.seekbar.getLabel().setThumbnail(player.getThumbnail(1000));

and visually nothing happens in the player UI - no thubnail is shown.

Regards.