At Urban Insight, the Kaltura video platform is one of our favorite video hosting services because it has excellent support for mobile devices. Uploaded videos can be converted to mobile format, and when Kaltura code is embedded in a site, videos play nicely on virtually any mobile device. Unfortunately, the Kaltura Drupal module does not currently provide effortless support for the Kaltura HTML5 player feature.

Enabling The Kaltura HTML5 Player with the Drupal Kaltura Module

The website for the Los Angeles County Museum of Art, which I have helped to develop and support, requires support for mobile devices to fully serve today’s mobile audience.  Since Kaltura’s default player is Flash-based, our challenge was to provide video support to iPhone users.

The LACMA website currently runs on Drupal 6.22 with Kaltura Drupal module 6.x-2.0-beta1. One required LACMA content type includes a Kaltura Media field.  When the content item is displayed, it initially shows a thumbnail for the video, and the video plays in a pop-up window when the thumbnail is clicked. This all works well in desktop browsers, but on an iPhone the video player just showed an empty box.

Kaltura provides a JavaScript file, which, if included in the page, detects mobile devices and replaces the Flash player with HTML5 if necessary. Ideally, adding the following script in the page header would make the video iPhone compatible:

 <script type="text/JavaScript" src="http://html5.kaltura.org/js" >

As simple as this sounds, it did not make videos play on iPhone in this particular case.

As a discussion on drupal.org points out, Kaltura’s HTML5 player needs jQuery 1.4 to work. Unfortunately, this version of jQuery does not integrate very well into Drupal 6. Drupal 6 core comes with jQuery 1.2, which can be updated to 1.3 using the jquery_update module.  But one would need to resort to replacing core’s version by either creating a custom module, or modifying jquery_update module in order to get 1.4. This might be problematic though, because Drupal modules in general expect jQuery 1.2 or 1.3 to be available, and may break if they get 1.4 instead.

As an alternate solution, the HTML5 player can be made to work with an older version of jQuery if configured properly.  The following line of code needs to be added in a JavaScript block that comes after the HTML5 script:

mw.setConfig( 'Kaltura.IframeRewrite', true );

This prevents Kaltura’s JavaScript library from using functions that are not available in the older version of JQuery, and makes it fall back to using an i-frame to enclose the video.

If the video still does not play after you have one of these solutions in place, the reason might be that some of the loaded JavaScript files conflict with Kaltura’s library. An issue like this is hard to troubleshoot without having a thorough understanding of all the JavaScript the page includes – at least the custom code. When I encounter a situation like this, I first try removing and reordering the JavaScript files. I found that it is best to load Kaltura’s HTML5 library last, after the logic that loads the Flash object.

Resolving Display of Selected Thumbnail

Another area where I encountered a challenge was in getting the selected thumbnail  for a video to display.

Kaltura’s thumbnail API guide advises that the thumbnail can be accessed through a URL of a certain pattern. I had the notion that such a query for a specific video thumbnail using the video ID would give me the selected default thumbnail for that video – however it turned out not to work that way. After a new thumbnail had been selected for a video in the Kaltura Management Console (KMC), the URL query still returned the old thumbnail. The URL I used was formed the following way:

http://www.kaltura.com/p/[partner_id]/thumbnail/entry_id/[video_id]/width/357/height/200/quality/90

Correspondence with Kaltura revealed that every time a video’s thumbnail is updated, a new version number is generated for it. This version number needs to be included in the URL in order to get the newly selected thumbnail. Nevertheless, this thumbnail API does not offer a way to obtain the latest thumbnail’s version number.

Given that the Drupal module is able to get virtually any data about videos from the Kaltura account, I was convinced that the module had the functionality I needed to solve this issue. And indeed, the video object one can get using the module’s KalturaClient class contains the URL with the correct version number in it. The following is a code snippet that demonstrates how I obtain the thumbnail URL:

<?php
function get_kaltura_thumbnail($video_id) {
  $kaltura_client = KalturaHelpers::getKalturaClient(0);
  $video = $kaltura_client->baseEntry->get($video_id);
  if (is_object($video) && $video->thumbnailUrl)
    return $video->thumbnailUrl;
  else
    return FALSE;
}
?>

This function returns a URL of the following pattern:

http://cdnbakmi.kaltura.com/p/[partner_id]/sp/[some_number]/thumbnail/entry_id/[video_id]/version/[version number]

Once you have this base URL, you can use the parameters introduced in the thumbnail API guide to custom tailor the thumbnail; for example, you can add ‘/width/357/height/200’ to set the image size.

If the thumbnail URL is requested on-the-fly using this method instead of being manually constructed in accordance with the pattern in the thumbnail API guide, it always points to the most recently selected thumbnail.

Special thanks to the Los Angeles County Museum of Art for supporting our work and enabling us to share our findings with the community.