Creating A Kaltura Video Gallery

Printer-friendly version
Audience / Tech Expertise: 

Prerequisites:

  • Kaltura Partner Service: 3.0 (aka api_v3)

Web site designers may want to add a Gallery component to their web pages so that end-users can browse within a large set of media files and conveniently select the media they want to see. For additional information, read the overview of the  KGallery widget.

See Demo.

Integration Steps

To get started please read Kaltura API usage guidelines 

Edit your Web Page to Integrate with Kaltura Gallery Services

Integrating KGallery services into your web site requires that you add following into your web page:

Full Example Script

The following example of PHP/JavaScript script demonstrates the integration of the KGallery services into a PHP based web application. To run this script, please make sure you set your partner identifiers at the KALTURA_PARTNER_ID and KALTURA_PARTNER_SERVICE_SECRET constants.
Look for detailed information on this example in the files contained in Download Simple KGallery script.

Inclusion of External Scripts

The following example displays the external script required for the KGallery Services.

<html>
<head>
</head>
<body>
        <!--include external scripts-->
        <?php 
                require_once("kaltura_client_v3/KalturaClient.php");

The KalturaClient.php scripts are part of the PHP Kaltura API Client Library being included to enable the use of Kaltura objects.

Define Constants and Variables

In the following example, the PHP code defines 2 constants and one variable, to be used later within the implementation.

//define constants
                define("KALTURA_PARTNER_ID", Your Partner Id);
                define("KALTURA_PARTNER_WEB_SERVICE_SECRET", "Your Partner ADMIN secret");

The following describes the parameters in detail.

Parameter Type Default Description
KALTURA_PARTNER_ID Numeric N/A Enter your Partner ID. Please refer to Kaltura API usage guidelines
KALTURA_PARTNER_WEB_SERVICE_SECRET String N/A Enter your Web Service Secret. Please refer to Kaltura API usage guidelines. This Secret string is used within Kaltura objects to create a secured session ID, preventing hacking and abuse attempts aiming to damage Partner/end-user’s content.
partnerUserID String N/A This is an example of a variable that could be used for content filtering. This variable may be used to populate the relevant content within the Gallery layout. It makes sense to apply this specific identifier as filter criteria only if it was assigned to media content upon media uploading. For the benefit of a generic example script, this parameter was not actually assigned as a filter, but was only defined and set for example purposes.

Construct Kaltura Objects for Session Initiation

The following example shows how the PHP code constructs the relevant Kaltura objects, used for session initiation. The objects are constructed as defined and implemented at the relevant Kaltura API Client Library. A unique session (KS) is then generated and set.

$config           = new KalturaConfiguration(KALTURA_PARTNER_ID);
$client           = new KalturaClient($config);
$ks               = $client->session->start(KALTURA_PARTNER_WEB_SERVICE_SECRET, $partnerUserID,KalturaSessionType::USER);
$client->setKs($ks);  // set the session in the client

Media Entries List Retrieval

The following example shows how the PHP code constructs a filter object and a pager object for controlling the selection of media elements to be displayed within the gallery layout. These objects are passed as arguments to the Kaltura media:list service for setting the proper selection criteria.

$filter = new KalturaMediaEntryFilter();
$filter->statusEqual = KalturaEntryStatus::READY;
$filter->mediaTypeEqual = KalturaMediaType::VIDEO ;
 
$pager = new KalturaFilterPager();
$pager->pageSize = 5;
$pager->pageIndex = 1;
$list = $client->media->listAction($filter,$pager); // list all of the media items in the partner
?>

The KalturaMediaEntryFilter object allows specific filters to apply on media selection and order. The filter parameters set in the example are only a few of the possible sets of filter parameters. A full list of filter parameters is available at the KalturaMediaEntryFilter page within the Kaltura API documentation site.

The KalturaFilterPager object enables paging management while retrieving media elements. This is an optional mechanism which may be in use when gallery design includes pages layout. When no pager object is passed as an argument to the Kaltura media:list service, the returned list will include all media items (according to filter object only). Look for more information on this object in the KalturaFilterPager page within the Kaltura API documentation site.

The Kaltura media:list service, returns a KalturaMediaListResponse Object. This is an array of KalturaMediaEntry objects, holding information on the entries to be presented within the Gallery implementation. The common parameters to be used within a gallery implementation are:thumbnailUrl, mediaType, id, name and description. Look for more information on these parameters at the KalturaMediaEntry page within the Kaltura API documentation site

Population of Media Entries within the Gallery Layout

The following example shows how the  KalturaGallary div is set to contain a simple html table based layout Gallery. The PHP script loops over the returned list of media entries and for each entry it lays out its thumbnail and its name. Clicking on a gallery thumbnail image will activate media loading for the selected entry. In this example media loading is triggered using selected entryId as a unique identifier.

<div id="KalturaGallary" style="position:relative;overflow:hidden;">
        <table>
                <?php foreach ($list->objects as $mediaEntry): ?>
                        <?php 
                                $name     = $mediaEntry->name; // get the entry name
                                $id       = $mediaEntry->id;
                                $thumbUrl = $mediaEntry->thumbnailUrl;  // get the entry thumbnail URL
                                $description = $mediaEntry->description;
                        ?>
                        <td>
                                <ul style="list-style:none;">
                                        <li style="width:120px; height:90px;"><a href="javascript:LoadMedia('<?php echo $id; ?>')">
                                                <img border="0" src="<?php echo $thumbUrl; ?>" >
                                        </a></li>
                                        <li style="width:120px; height:40px;"><?php echo $name; ?></li>
                                </ul>
                        </td>
                <?php endforeach; ?>
        </table>
</div>

 

JavaScript Implementation for Showing Selected Media

The following example shows how a JavaScript method is defined, when receiving the media’s entryId as an argument. This is where the implementation of media loading should be set. An example of this type of implementation may be loading the selected media to be played by the Kaltura Dynamic Player Widget.

<script language="javascript">
function LoadMedia(entryId) {
        alert (entryId);
        
// show media implementation should go here.
 }
</script>
</body>
</html>

In you are using media components which are not based on Kaltura technology, a content url may be constructed out of entryId and Partner’s identifiers according to the following format:

http://cdn.kaltura.com/p/{partner_id}/sp/{subpartner_id}/flvclipper/{entryid}

Integrating Kaltura Gallery Services into a Scrollable Gallery Layout

Several open source projects implement built-in technology for scrollable media galleries. Integrating Kaltura Gallery Services into that type of layout is easy and follows the same logic described in this article.

The following example demonstrates integration with jQuery scrollable tools. More information on these tools is available in the jQuery Scrollable page. To run this script, please make sure you set your partner identifiers at the KALTURA_PARTNER_ID and KALTURA_PARTNER_SERVICE_SECRET constants.

Click to Download a Scrollable based KGallery script.

For further problem solving and more details about the KGallery, see Frequently Asked Questions about KGallery Integration.

(61315 reads)