Kaltura Thumb Rotator Guide

General Kaltura and API
[Hide Book Menu]

Mon, 08/17/2009 - 01:52 — Kalturian

Overview

The Kaltura Thumb Rotator is a javascript widget that provides a thumbnail slideshow preview for a video hosted on the Kaltura Server.

Click to see a demo

Usage

In order to use the KalturaThumbRotator, include its javascript code and attach two events to each img element you want to preview.

For the example, we will use the kaltura.com server with an example video, entry_id=hsgxym7h34 and partner_id=1.

First, define HTML of the img:

<img src="http://cdn.kaltura.com/p/1/sp/1/thumbnail/entry_id/hsgxym7h34/width/160/height/120" width="160" height="120" onmouseover="KalturaThumbRotator.start(this)" onmouseout="KalturaThumbRotator.end(this)">

KalturaThumbRotator provide two actions

KalturaThumbRotator.start(this) - Cancels the current running preview and starts a new one.
KalturaThumbRotator.end(this) - Cancels the current running preview and restores the original thumbnail.

You can adjust the settings (such as frames per second) in the Kaltura Thumb Rotator JS.

The javascript source code

Download Javascript script file

KalturaThumbRotator ={
        slices : 16, // number of thumbs per video

        frameRate : 1000, // frameRate in milliseconds for changing the thumbs

        timer : null,

        slice : 0,

        img  : new Image(),

        thumbBase : function (o) // extract the base thumb path by removing the slicing parameters

        {

                var path = o.src;

                var pos = path.indexOf("/vid_slice");

                if (pos != -1)

                        path = path.substring(0, pos);

                return path;

        },

        change : function (o, i) // set the Nth thumb, request the next one and set a timer for showing it

        {

                slice = (i + 1) % this.slices;
                var path = this.thumbBase(o);

                o.src = path + "/vid_slice/" + i + "/vid_slices/" + this.slices;

                this.img.src = path + "/vid_slice/" + slice + "/vid_slices/" + this.slices;
                i = i % this.slices;

                i++;

                this.timer = setTimeout(function () { KalturaThumbRotator.change(o, i) }, this.frameRate);

        },

        start : function (o) // reset the timer and show the first thumb

        {

                clearTimeout(this.timer);

                var path = this.thumbBase(o);

                this.change(o, 1);

        },
        end : function (o) // reset the timer and restore the base thumb

        {

                clearTimeout(this.timer);

                o.src = this.thumbBase(o);

        }

};