Preview Thumbnails, New KDP Plugin

The ability to show a small preview above the scrubber while the user’s cursor is hovering over it is a feature that sat in my drawer for more than a year. One day, after talking to a colleague at Kaltura, I decided to take it out of the drawer and write the code for this feature.
The idea is simple – my plugin would take the scrubber reference, add some mouse events interaction and use the Kaltura’s great Thumbnail API. This API is pretty straightforward: here’s a media entry, get me an image from second X with specific dimensions.
For more info of this cool feature see this link.

Phase 1: Get a thumbnail (any thumbnail) to the player.
Anyway, since building KDP plugins is something I do for a living (senior developer at Kaltura, Professional Services) this task was not that hard to implement, and after a few hours I created the 1st Kaltura Preview Thumbnail Widget. It was with a hard coded URL, random number for seconds to seek to, and without positioning. I used a special service layer that called is ‘foreground’ and serves pop-ups and alert for adding the loader.
Once I saw that the thumbnail service is connected to the KDP I could go to sleep. Apparently it was 01:30 AM on a work day.

Phase 2 : Connect the scrubber
2 nights later I added some more features.
From the plugin code I added this:
public var scrubber:UiComponent
And in the UiConfig XML I wrote
scrubber=”{scrubber}”

These 2 simple additions used the Binding mechanism that the KDP has, to send the reference of the scrubber to my plugin. This is one of the greatest features in the KDP. With simple expression in curly brackets I can get a reference to another component or plugin or to a public property on it.
Anyway, now I could play with the scrubber. I used the reference to get the scrubber width, and to add some mouse events. With the width and the mouseX, I could calculate the playhead position and send it to the function that loads the thumbnail. Two more code lines made it appear above the stage mouse coordinates. Now I see a thumbnail that matches the mouse position of the scrubber.

Phase 3: Optimize
Getting the thumbnail through the thumbnail API is quite slow if you fetch a thumbnail for every mouseMove event and also consumes the Kaltura partner’s bandwidth. I had to do something with this. I decided to do 2 things:
1^st  Load only round seconds.
2^nd Add a threshold. At first I added a hard coded 10 sec threshold, so if you are hovering on second 52 you would get 50. This way I am not consuming too much from my account and the user experience is still OK. Later on I changed this to be 5 sec with an option to configure it through the uiConfig XML. The name of this public attribute is intervalsThreshhold.

Now everything works fine, and the preview looks great. Here’s an example (play and hover over the scrubber):
[kaltura-widget uiconfid=”9775791″ entryid=”1_hwfzcj9e” width=”551″ height=”339″ addpermission=”” editpermission=”” /]
Another optional feature I added later on, is the option to pre-fetch the thumbnails once the entry is loaded with a loop that intervals every X seconds (where my X is my intervalsThreshhold attribute). With this loop the thumbnails will be cached in the end user’s browser cache, and the user will not have to wait till each image is loaded. It is a better user experience but takes its toll on the bandwidth because I am loading all images for the whole video duration. To turn this feature on we would need to add the attribute prepareThumbnails=”true” in the uiConfig XML since the default for this feature is false.

UiConfig XMLTag example:

<Plugin id="liveThumbnails"
width="0" height="0" includeInLayout="false"
scrubber="{scrubber}"
entryId="{mediaProxy.entry.id}"
prepareThumbnails="true"
intervalsThreshhold="8"/>

This plugin would work if your entries are managed on the Kaltura cloud platform (SaaS), and only if the partner has access to the thumbnail API.
This plugin is free to use for non-commercial players. If you need want it on a commercial player contact me at this gmail account: eitanavgil