Video Management within Eclipse CMS

Integrating the Video Platform Kaltura to a CMS Client

SvenHoffman
kaltura

Sven Hoffman details how subshell integrated open source video platform Kaltura into their CMS Sophora

The integration and management of video assets within
web content management systems challenges both users and operators
alike. Connecting an existing video management platform with the
employed CMS is an effective way to achieve this goal, while
simultaneously not reinventing the wheel and keeping user training
short. The German company subshell chose this
path and integrated the open source video platform Kaltura into the
client application of Sophora, their popular content management
system.

There are several ways to enhance a web content
management system with video-related features. A handy and common
method is to upload videos to one of the leading video portals and
embed them into your own website with the help of HTML- or
JavaScript-Snippets. Even though this variant requires comparably
minimal technical effort, it is still not very comfortable for the
user. In addition, the control over the actual video data is
relinquished to a third-party service provider whom you usually
have to grant rights to use and publish these sources. Another
option to integrate videos might be to implement your very own
solution for the CMS at hand. However, time and effort as well as
maintenance of such solutions are rather high and mostly lack
interchangeability.

For those reasons, the development team of subshell
chose a third way: the integration of the open source video
platform Kaltura with their CMS Sophora. To better
understand the connection of both systems, they are introduced
individually at first. Afterwards, functional and technical details
of the integration are highlighted. 

What is Sophora?

Sophora is a Java based content management system
built upon Apache Jackrabbit, an implementation of
the JCR specification (Content Repository API for Java). For the
play-out of content, Sophora focuses on Java Server Pages (JSP)
within an Apache Tomcat server. The editorial user interface is an
Eclipse Rich Client Platform application, called “DeskClient“. An
article about Sophora’s utilization for one of Germany’s leading
news websites, tagesschau.de, has been published in
edition 2.11 of the German Eclipse Magazine and online at
jaxenter.com
.

What is Kaltura?

The Kaltura platform is an open source video asset
management system that is already in use by notable clients such as
Universal, Sony, Pepsi and Coca Cola. There are two different
versions available. Besides the free community edition you can
purchase a variant including hosting and support services. At this
point, subshell collaborates with a partner firm; the nacamar GmbH
handles the hosting of the Kaltura system including streaming and
transcoding. The product is called medianac.

Kaltura’s Architecture

The architecture of the video platform basically
consists of four layers. The bottom layer contains web-services
that act as Software-as-a-Service (SaaS) in a cloud. On top of
this, there is a layer of client libraries for programming
languages such as C#, Ruby or Java. These libraries abstract from
the web-service and thus ease the corresponding communication. The
next layer comprises so-called widgets, which can be used for
certain tasks such as playing or uploading videos. These widgets,
offered by Kaltura, are generally based on Adobe Flash so that they
can be embedded into custom applications. Finally, the top layer
consists of plug-ins for third-party applications, for instance
Drupal, WordPress, MediaWiki and Joomla. This last layer also
contains the Kaltura management console, which aggregates almost
all widgets in one web-interface and thereby enables the management
of the entire system. With the help of this console you can upload
videos, manage existing ones, change the configuration, create
video collections (which are called Mixes), analyze click rates and
much more.

The Idea

At this point you might be wondering what the
benefits are when connecting a video platform, in this case
medianac, and the CMS, Sophora. One of the biggest advantages is
that editorial journalists who work with this CMS on a daily basis,
do not need to familiarize themselves with another application, but
instead can use the new features within the known environment. The
simplified integration of new tools into the user interface is a
core element of Sophora and particularly convenient for the user.
Since Sophora is document-based, different content types like news
articles, image galleries, links, audios or videos are modeled as
individual documents. This way users are facilitated to create
pages by composing corresponding documents rather than to edit the
entire website as a whole. Thus built-in CMS functionality, such as
drag and drop to combine content, document life-cycle operations,
or different levels of user permissions, is available for videos as
well.

Configurational details, which are non-relevant for
the users (like the applied video codec) can be hidden from certain
roles. The management of different roles also allows a clear
separation of responsibilities within the editorial workflow:
Multimedia journalists handle the configuration and supply of video
assets while their colleagues provide conventional content as
usual.  

Another advantage of medianac is that the control
over the actual video data remains in your hands, because there is
an unrestricted access to all assets within the video platform. You
determine a video’s life cycle and which formats are available in a
certain quality. Since the Kaltura instance is under your
administration, you neither have to grant external usage nor
publication permissions to a hosting company, as is usually the
case when using one of the leading video portals (see for instance,
section 10 of the terms of use of YouTube).

        
       

The Integration

So, the main idea of the integration allows users to
stay within their familiar workbench, the CMS itself, and treat
videos like any other Sophora document, even though they are
actually stored in the external Kaltura instance. It is not
important for the user that an additional application manages the
video data in the background.

The new procedure for the editorial journalist simply
consists of the following steps. First, a new Sophora video
document is created with the help of a wizard (see figure 1) as
known from Eclipse by clicking File → New in the main menu. In this
wizard, the user can select an existing video asset from the
Kaltura server, which then will be linked with a new document
within Sophora. As soon as the user clicks on one of the listed
video entries, it will be displayed in the preview part together
with corresponding meta-information (duration, format, Kaltura
entry ID and the like).

Figure 1: Wizard to
create new video documents.

After clicking the finish button, the new Sophora
document automatically opens in the editor (see figure 2). Some
fields are already filled with data obtained from the Kaltura
server while others are empty and thus can be completed by the
user. The connection between the Sophora document and the video
asset is guaranteed by a unique identifier, the Kaltura entry ID.
This ID is set automatically (and cannot be modified) in the
Sophora document upon creation.

Figure 2: Video
document opened for editing in document editor

Now the video is ready for further usage and can be
included in other Sophora documents by drag and drop. An example
can be seen in figure 3 where a Sophora video document is inserted
in the text body of an article. The result is immediately visible
within the preview on the right-hand side of the window.

Figure 3: Exemplary
usage of a video document within an article. The result can be seen
in the preview on the right-hand side.

If the desired video is not yet available on the
Kaltura server, the user can initially up-load it from the local
hard-drive. While uploading, a video will automatically be
converted into previously configured profiles, so-called “flavors”
(for instance standard, mobile or HD). In addition, a thumbnail
image is generated from the video data. When creating a new Sophora
document from an existing Kaltura source this thumbnail is copied
from Kaltura to Sophora.

The exemplary video, shown in the subsequent figures,
is taken from the “Big Buck
Bunny
“ movie of the Blender Foundation due to its free
availability on the web.

The Implementation

When considering existing Kaltura plug-ins for
systems such as Drupal, Joomla or WordPress, you will recognize
that the integration on the client side is based on the Adobe Flash
widgets provided by Kaltura. Within a Java / RCP application, such
as the Sophora DeskClient, it is recommendable to choose a
different approach since the usage of Flash widgets is not user
friendly. Hence, the choice falls on using the web-services of the
Kaltura platform directly, which can be accessed by a Java client
library
.

The functionality to connect to a Kaltura server has
been encapsulated in a distinct Eclipse plug-in that provides a
wizard to create a new Sophora video document as well as an upload
dialog for new videos. Both are integrated into the DeskClient via
an extension point.

Document Creation Wizard

On the left-hand side of the wizard (see figure 1), a
list of all videos is displayed that are available on the Kaltura
server. For the illustration of this list, a JFace
TableViewer, which retrieves the content to be shown
directly from the Kaltura platform, is used. In order to fetch the
available videos by calling the corresponding service, the
KalturaMediaService in this case, a connection has to be
established first. Therefore, the usual connection details
including user name, password and service URL are required. This
information has to be supplied in advance by the user within a
Preferences page.

The actual connection to the Kaltura server is
embodied by the KalturaConnection class, which
encapsulates the KalturaClient object of the Java client
library. Basically a KalturaClient object is then used to
access the web-services of the video platform.

The method getAllVideos() of the
KalturaConnection object has to be called to retrieve the
available videos from the server. As shown in listing 1, the
KalturaMediaService is used to return a list of entries
that are of the type KalturaMediaType.Video. These entries
are passed to the TableViewer and are finally displayed in
the wizard’s list.

Listing 1

 

private final KalturaClient client;

KalturaConnection(KalturaClient client) {
  this.client = client;
}

public List<KalturaMediaEntry> getAllVideos() throws KalturaException {
  try {
    /* get media service from KalturaClient */
    KalturaMediaService mediaService = client.getMediaService();
        
    /* create a filter and a pager to choose how many entries and which type to receive */
    KalturaMediaEntryFilter filter = new KalturaMediaEntryFilter();
    filter.mediaTypeEqual = KalturaMediaType.VIDEO;
    KalturaFilterPager pager = new KalturaFilterPager();
    pager.pageSize = MAX_PAGESIZE;

    /* execute list action of the mediaService object to get the list of entries */
    KalturaMediaListResponse listResponse = mediaService.list(filter, pager);
    mediaService.list(filter);
    return listResponse.objects;
  } catch (KalturaApiException e) {
    throw new KalturaException(e);
  }
}

 

Preview Video
Player

“>When you select an entry from the list of
available videos within the wizard, the corresponding video
immediately starts playing in the preview video player which is
positioned to the right of the said list. The player is one of the
Kaltura widgets (Kaltura Dynamic Player) that is integrated into
the DeskClient. Since the player is a Flash widget the SWT browser
component is applied here. The browser component receives a local
HTML file to display, which utilizes the Flash player as an
SWFObject.

The control of the player is done by JavaScript
methods within the HTML that can then be called from Java methods
of the DeskClient. The HTML file and the required JavaScript
libraries are also contained in the DeskClient plug-in.

Listing 2 depicts the (shortened) content of the
HTML file that the player embeds in the DIV element with the ID kdp3 by calling swfobject.embedSWF(). As seen
in this code snippet, the Flash object is located on the Kaltura
server and is accessed by a HTTP URL. This URL contains several
parameters, such as wid and uiconf_idwhich control the player’s
configuration. 

For instance, you can change the player’s
appearance and offered controls with the parameter

uiconf_id. The JavaScript
function
changeMedia() may be
called to play the video with the matching Kaltura entry ID. Within
this JavaScript function the
sendNotification() method is used to send out a changeMedia event.
Besides the type of the event, the ID of the video to be displayed
is passed on.

Listing 2 – player_embed.html

 

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
      function changeMedia(id) {
        $('#kdp3').get(0).sendNotification('changeMedia', {entryId:id});
      }
    </script>
    <script type="text/javascript">
      [...]             
  swfobject.embedSWF("http://medianac.nacamar.de/index.php/kwidget/wid/_123/uiconf_id/1234567", "kdp3", ...);
    </script>
  </head>
  <body>
    <div id="kdp3" />
  </body>
</html>

 

In order to finally integrate the player into the
wizard the class PlayerWidget is employed (see listing 3).
There, the SWT browser component is instantiated and the method
setUrl() receives the HTML file from listing 2. To detect
the path of the said HTML file, the Eclipse class
FileLocator is used and the URL is prepended with the
keyword platform: (platform: needs keyphrase – if the
colon is extra, keyword stays) so that the workspace of the
DeskClient is searched for this particular HTML file. To assure
that the HTML file, as well as the required JavaScript libraries,
which are embedded in the HTML code via script elements,
are reliably detected by this mechanism, the plug-in must not be
added to the product in form of an JAR archive. Instead it must be
added as an unpacked folder.

By instantiating an object of class
PlayerWidget, an empty video player is generated
initially. This video player does not play any video until the
method changeMedia() is called. This method forwards the
request via the execute() method of the SWT Browser object
to the same named JavaScript function and passes the Kaltura entry
ID of the video to be played. The changeMedia() method of
the PlayerWidget class is notified by each individual
selection of an entry within the wizard’s list of available videos
and thereby triggers the playback of the according video.

In general, when integrating Flash objects into an
Eclipse RCP application, you have to be aware that the SWT browser
component invokes the system browser (which is the Internet
Explorer in Windows). Thus, to display Flash content the according
Flash plug-in for the system browser is required.

Listing 3 – PlayerWidget

/* Widget which displays a Flash based video player within a Browser component. */
public class PlayerWidget {
        
  private Browser browser;

  public PlayerWidget(Composite parent) {
    browser = new Browser(parent, SWT.NONE);
    String urlString = StringUtils.EMPTY;
    try {
      URL url = new URL("platform:/plugin/com.subshell.sophora.eclipse.kaltura/etc/player_embed.html");
      urlString = FileLocator.toFileURL(url).toURI().toString();
    } catch(IOException e) {
      // Exception Handling ...
}
    browser.setUrl(urlString);
  }
        
  /* Play media with passed id. An invalid ID will lead to a javascript error. */
  public void changeMedia(String entryId) {
    browser.execute("changeMedia('" + entryId  + "');");
  }
}

 

 

Upload Dialog

In addition to the wizard for creating new Sophora
video documents, there is another dialog to upload video files to
the Kaltura server. When you have opened this dialog, which is
accessible in the same way as the New wizard in the main menu, you
can provide a name and select a local file. After confirmation of
the dialog (by clicking on Ok), a connection to the Kaltura
platform is established in the background and the file is then
transmitted. For this, the method addNewMediaEntry() of
the KalturaConnection  class is invoked which
accesses the KalturaBaseEntryService (compare to listing
4).

At first, the binary data of the new video is
transferred and then an entry will be added to the Kaltura system
later. With the help of the addFromUploadedFile() method,
the new entry is connected with the previously saved video data.
The upload of a new video file and the creation of a new entry
might be a time consuming operation, depending upon the size of the
video. Besides transmitting the binary data, the upload
automatically triggers additional processes that convert the
uploaded video into different formats. To avoid that the UI is
blocked in the meantime, this operation is run in the background of
the DeskClient. As soon as this background task is finished, the
uploaded video will be available within the list of all videos of
the New wizard.

Listing 4 – KalturaConnection (Continuation)

 

public void addNewMediaEntry(File videoFile, String entryName) throws KalturaException {
  try {
    /* get base entry service from KalturaClient */
    KalturaBaseEntryService baseEntryService = client.getBaseEntryService();
                        
    /* upload new file and get a token that identifies it */
    String token = baseEntryService.upload(videoFile);

    /* create a new entry */
    KalturaBaseEntry entry = new KalturaBaseEntry();
    entry.name = entryName;
    entry.type = KalturaEntryType.MEDIA_CLIP;

/* attach uploaded file to newly created entry */
    baseEntryService.addFromUploadedFile(entry, token);
  } catch (KalturaApiException e) {
    throw new KalturaException(e);
  }
}

 

Displaying Videos on the Website

Since the play-out of content in Sophora is
implemented with JSP templates, a corresponding template is
required. This template is equipped with similar mechanisms as the
HTML file used for the preview player in the DeskClient’s wizard. A
SWFObject embeds the video player and receives the Kaltura entry ID
as a parameter. The template receives this ID from the Sophora
document that has to be played out. Additional parameters for the
size, the height and the preferred configuration of the video allow
altering of the video player’s appearance.

Conclusion: Added Value by the Connection of two
Systems

The interaction of both systems, Sophora and Kaltura,
offers sensible benefits on every side. As described, the
connection facilitates users to integrate videos in websites easily
without leaving the familiar environment of the used CMS. In the
background the system benefits from valuable functions of the video
platform, such as streaming, the video player widget, or the
automated format conversion.

This solution has many options for future extensions.
Possible variants might be the design of an online video platform
within the CMS or the upload of videos as user generated content
via the website.

From a technical point of view, the connection of the
Kaltura platform with the Sophora CMS proceeded straight forward
and without serious obstacles. The Java library provides an easy
access to the platform’s functionality.

Author
SvenHoffman
Sven Hoffmann studied Media Technology at the University of Applied Science in Emden and works as software engineer at subshell GmbH in Hamburg, Germany. There he is part of the development team of the Content Management System "Sophora" and brings multiple years of experience in the areas of online video platforms, Java CMS as well as Eclipse RCP programming.
Comments
comments powered by Disqus