AngularJS Kaltura Embed Directive

Creating an AngularJS Kaltura Video Embed Directive

AngularJS directives allow you to extend the HTML vocabulary and write short HTML templates.

We wanted to create a directive that would enable us to embed a Kaltura video in our AngularJS apps easily.

For example: by adding a “kaltura-player” and “kaltura-options” attributes to a div element:

<div id="player" kaltura-player kaltura-options="config">
</div>

Or by creating a new “kaltura-player” element.

<kaltura-player kaltura-options="config">
</kaltura-player>

I will describe the process of creating the directive in detail. You can also see a fiddle here

Background

The compilation of HTML in AngularJS is divided into three steps:

  1. The HTML is parsed into the DOM.
  2. The $compile() method traverses the DOM and matches the directives. The directives are then sorted by priority, and then their compile() functions are executed. If you need to modify the DOM structure, you must specify a compile function in the directive where you will have a chance to modify the DOM structure.
  3. The compile function returns a link function, which sets listeners and links the DOM to the scope, so that any change in the DOM is reflected in the scope.

Our directive is written according to these steps:

  1. DOM manipulation is done in the compile function, so that’s where we add a child div to contain the Kaltura player.
  2. The link function takes information from the scope and initializes the Kaltura player.

Building the directive

First, we need to register the directive module.

/**
 * kaltura-embed directive.
 */
angular.module('kaltura-embed', []).directive('kalturaPlayer', directiveDefinitionFunction);

Then, we need to write a compile function. The compile function alters the DOM by adding a child div to the one the directive was placed on. The child div will be used by Kaltura’s embed API library. Having a different div than the one the directive was declared on allows us to support the directive both as an attribute or an element directive.
The function “directiveDefinitionFunction” returns a “Directive Definition Object”.

/**
 * Directive Definition Function
 */
var directiveDefinitionFunction = function() {
    restrict: "A,E",
    replace: false,
    transclude: false,
    compile: compileFunction
}
  • Restrict – This tells Angular our directive can be found as an attribute or as an element (as shown in the beginning).
  • Replace – whether the result of the compilation process should replace the original HTML element.
  • Transclude – whether to merge the result of the compilation function with the original element.
  • Compile – the compile function.

The compile function adds the div, and returns a link function which calls the Kaltura code that embeds the player.

var compileFunction = function (element, attrs) {

    // Generate new div id for the player injection.
    var generatedDivId = attrs.id + '_kaltura';

   // Add a new div with an id which is based on the parent's id.
   var playerDiv = '<div id="' + generatedDivId + '">' + '</div>';
   jQuery(element).html(playerDiv);

   // We return the linking function.
   return linkFunction;

};

Since the link function is in the same scope as the compile function, we can share the generatedDivId variable (and any data we want to pass from the compile to the linking step.

There are two configuration objects we can use here. One for the widget, and one for Kaltura’s HTML5 library (mwEmbed). We get the config object from the controller scope. The name of the config object is provided as an attribute called kalturaOptions.
An important setting set on the config.widget object is the targetId. This tells Kaltura where to inject the player. We set it to the div we created in the compile function.
The last step is calling kWidget.embed, which embeds the player.

var linkFunction = function ($scope, element, attrs, controller) {

    // Get the config object as indicated in the attributes from the scope.
    var configObject = $scope[attrs.kalturaOptions];

    // Set the mwEmbed configuration.
    for (var name in $scope.config.mw) {
        if (configObject.mw.hasOwnProperty(name)) {
            mw.setConfig(name, configObject.mw[name]);
        }
    }

   // Set the target id attribute using the containing element id.
   configObject.widget.targetId = generatedDivId;

   // Embed the kWidget.
   kWidget.embed(configObject.widget);

};

The controller, with the config objects:

function VideoCtrl($scope) {

    $scope.config = {};

    $scope.config.widget = {
        'wid': '_243342',
        'uiconf_id': '2877502',
        'entry_id': '0_uka1msg4',
        'flashvars':{
            'externalInterfaceDisabled': false,
            'autoPlay': true
        }
    };

    $scope.config.mw = {
        'Kaltura.LeadWithHTML5': true,
        'debug': false,
        'Mw.XmlProxyUrl': 'http://player.kaltura.com//simplePhpXMLProxy.php',
        'Kaltura.UseManifestUrls': true,
        'Kaltura.Protocol': 'http',
        'Kaltura.ServiceUrl': 'http://cdnapi.kaltura.com',
        'Kaltura.ServiceBase': '/api_v3/index.php?service=',
        'Kaltura.CdnUrl': 'http://cdnbakmi.kaltura.com',
        'Kaltura.StatsServiceUrl': 'http://stats.kaltura.com',
        'Kaltura.IframeRewrite': true,
        'EmbedPlayer.EnableIpadHTMLControls': true,
        'EmbedPlayer.UseFlashOnAndroid': false,
        'Kaltura.LoadScriptForVideoTags': true,
        'Kaltura.AllowIframeRemoteService': false,
        'Kaltura.UseAppleAdaptive': true,
        'Kaltura.EnableEmbedUiConfJs': false,
        'Kaltura.PageGoogleAalytics': 'UA-2078931-34'
    };

}

Now you can embed Kaltura videos easily!
To read more:

2 thoughts on “AngularJS Kaltura Embed Directive

Leave a Reply

Your email address will not be published. Required fields are marked *