Posts tagged ‘tutorial’

December 21st, 2011

Go Global with Kaltura Multi-Lingual Captions

by Vitaly.Shter

Kaltura has extended and improved support for multi lingual captions, allowing you to upload SRT or timed-text caption files directly to the KMC, in multiple languages and formats. Using multi-lingual captions, you can extend your reach to new audiences and geographies, increasing the number of views, click-through rates and monetization.


Captions Search App


read more »
December 7th, 2011

How To Setup Kaltura CE 4.0 VMWare Image in 15 minutes

by Roni Cohen

Various forum threads (@, @, @) discussed issues with the VMWare image of Kaltura CE 4.0. The following video tutorial will guide you how to install Kaltura CE 4.0 VMWare image in 15 minutes.

In the video we deliberately re-created most of the problems users encountered while setting up the VMWare image. The fixes mentioned in this video also apply to the generic Kaltura Server installation and are not specific to the VMWare image installation (We’ll make sure that in the next release these are simplified and fixed).

Two problems that the video solves particularly are the logs and cache folder permissions and the Sphinx localhost issue.

Now set your clocks, follow the video and in 15 minutes you’ll be good to go.

CE 4.0 VMWare Image Setup Video Tutorial

read more »

December 6th, 2011

Automate Content Ingestion using Drop Folders – Part I

by Vitaly.Shter

Welcome to the second blog post in our series of video tutorial blogs. Here we will talk about advanced ingestion functionality, specifically the Kaltura monitored Drop Folder feature.

You can use a drop folder to automate an on-going workflow of media and/or metadata ingestion into Kaltura.  This allows for efficient and fast content ingestion in complex operational environments that require parallel work on metadata and media, as well as bulk ingestion of large amounts of content. This feature is intended for advanced Kaltura users who wish to utilize a more scalable and automated ingestion process than the manual upload functionality can provide.

Kaltura offers multiple configuration options for setting each drop folder to a specific workflow that fits your needs, from simple media upload tasks to bulk ingestion of complex media packages that include multiple media files and metadata items.

The video tutorial below will demonstrate an ingestion flow of pre-transcoded media files via a drop folder (option 2a below).

KMC Video Tutorial - Drop Folder

read more »

November 27th, 2011

Eagle Upload Mega Menu Video Tutorial

by Vitaly.Shter

As we are busy working on Kaltura’s next release , Falcon (stay tuned!), we’d like to highlight some of the exciting features from our most recent release, Eagle. And why talk when you can demonstrate – below is the first video walkthrough in our series of upcoming video tutorial blog posts that will showcase how to upload media into the Kaltura Management Console, edit it, add advertisement cue-points, and much more (for more details see Eagle release blog post). You can keep reading this post about our robust upload functionality, or simply click the video to see it in action.

 

KMC Upload Tab Tutorial Video

read more »

September 21st, 2011

Facebook Now Requires HTML5 and Fallback in Open Graph

by Zohar Babin

Remember the post about making Facebook understand and present the videos on your page?

Thanks to our dear reader Jon, we noticed Facebook has recently updated their Open Graph tags requirements to include HTML5 and non-Flash-non-HTML5 fallback video file links, otherwise, Facebook will not show your videos when users share them on their wall.

 

Originally Facebook accepted Flash Only

Previously, this is the minimal meta tags you’d have to use to have Facebook read the video in your page and present it on the wall when someone shares your page link.

<meta property="og:video" content="http://example.com/videoplayer.swf" />
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="426" />
<meta property="og:video:type" content="application/x-shockwave-flash" />

 

Enter HTML5 and Direct Link Fallback

While FB supported html5 and video link for a while now, it seems that recently Facebook made it mandatory to support non-Flash environments. In addition to Flash, for FB to present your video now you’d have to include the following tags as well:

<meta property="og:video" content="http://example.com/html5.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://example.com/fallback.vid" />
<meta property="og:video:type" content="text/html" />

 

To be fully compatible with Facebook’s Open Graph

Add a few more meta tags and you’re fully compatible with all the Open Graph Specifications:

<meta property="og:type" content="article">
<meta property="og:url" content="http://example.com/videopage">
<meta property="fb:app_id" content="000000000">
<meta property="og:title" content="Video Page Title">
<meta property="og:image" content="http://example.com/videothumbnial.jpg"/>
<meta property="og:description" content="Video description"/>
<meta property="og:site_name" content="Your website name">

Find out more about these tags and their meaning in the Open Graph Specifications.

Try testing our about page in Facebook’s Open Graph Debug Tool.

 

What does our about page looks like now?

The following is a good reference example fully compatible with the Open Graph specs:

<meta property="og:type" content="article">
<meta property="og:url" content="http://blog.kaltura.org/about">
<meta property="fb:app_id" content="217926898242066">
<meta property="og:video" content="http://www.kaltura.com/kwidget/wid/_309/uiconf_id/3406441/entry_id/1_5ex2uuu8" />
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="426" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="http://cdnbakmi.kaltura.com/p/309/sp/30900/serveFlavor/flavorId/1_230vtgd1/name/1_230vtgd1.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://cdnbakmi.kaltura.com/p/309/sp/30900/serveFlavor/flavorId/1_230vtgd1/name/1_230vtgd1.mp4" />
<meta property="og:video:type" content="text/html" />
<meta property="og:title" content="Kaltura - Open Source Video">
<meta property="og:image" content="http://cdn.kaltura.com/p/309/thumbnail/entry_id/1_5ex2uuu8/width/300"/>
<meta property="og:description"
  content="Kaltura - the first open source video platform for online video management, creation, interaction & collaboration. Kaltura enables sites to integrate advanced interactive rich-media functionalities"/>
<meta property="og:site_name" content="Kaltura.org Developer Blog">

 

Using the Kaltura Platform

In addition to Facebook’s changes, and with Microsoft recently joining the list of companies to strongly advocate HTML5, announcing the new plug-in free Win8 & IE 10 (i.e. dropping official support for Flash), having an HTML5 based and standardized video streaming solution that delivers HTML5 and direct video streaming is increasingly becoming more important.

The above code took you through making Facebook show videos on wall posts. Below, I briefly discuss how to get the thumbnail and mp4 urls I used for the code.

- Using the Kaltura Management Console (KMC), upload the video:

- The uploaded video is then converted to mp4 and several other flavors (to support various other use cases):

- The URL to the mp4 file is then the following following:

 (make sure there are no special access control settings on it, otherwise Facebook will not be able to read the file).

http://kaltura.com/p/{Kaltura partner id}/sp/{Kaltura partner id}00/serveFlavor/flavorId/{the id of the iPad flavor}/name/{the id of the iPad flavor}.mp4

Where {the id of the iPad flavor} is taken from the flavors list:

You can use any of the mp4 flavors, I used iPad since this will be the best format for most devices. If and when Facebook will add support for more flavors to be compatible with various device sizes and network speeds, we will be able to use the other flavors on the list, like we do using the Html5 Video Library.

- Finally, to get the URL for the thumbnail, use the Kaltura thumbnail API:

http://kaltura.com/p/{Kaltura partner id}/thumbnail/entry_id/{the video entry id}/width/300


Big shutout to Jon for the heads up!
Let us know in the comments how you’re using this functionality or if you have any questions.

August 29th, 2011

Best-practices for using JavaScript to embed KDP

by Yaron Shapira

This post and related html file below is targeted at website integrators and web application developers who work with KDP3 (Kaltura’s Flash based Media Player).

Its primary purpose is to teach you Kaltura’s best-practices for embedding the Kaltura Player on web pages using JavaScript (as opposed to html-only embed).

The ready to use html page referenced below is heavily commented and shows how to:

  1. Include Flash detection and Flash version detection with automatic update using expressinstall.swf served from Kaltura’s CDN
  2. Implement an html-based gallery/ playlist that works with the KDP’s JavaScript API and includes an auto-continue option
  3. Make the videos on your site bookmarkable
  4. Use the page as a landing page for search engine results for any video (a strongly recommended related read: Kaltura and Video SEO)

This post is part of two larger-scope documents which will be published shortly: KDP Inetgration Guide and The KDP Cookbook.

Click here for a live example (view-source to see the code).

Click here to download the page.

Enjoy!

 

May 13th, 2011

Google Analytics: One KDP API for HTML5 and Flash

by Michael Dale

A neat feature of developing for the Kaltura platform is being able to write code once and have it work regardless of the underling playback system. In this post I walk you through writing a simple google analytics library using the KDP api. I will show how it works for both html5 and kaltura flash kdp players. If your want to just jump into the code you can check out the kaltura google analytics demo page here. If you would like to download this example its available here

To write this plugin we will touch on:

  • Google analytics is of course the popular web site tracking system. It includes a system for tracking custom events, which we will use to register player events.
  • Kaltura KDP player is the dynamic flash player that has an extensive api for accessing events and notifications in javascript.
  • Kaltura HTML5 player library is an html5 player used in the kaltura platform. In addition to supporting the HTML5 api, the library also supports a good portion of the KDP api.

To start we copy the google analytics setup code:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Then we will want to include the kaltura html5 library loader. To include that we simply add the following:

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

Then on our client page we wait for the kdp player to be ready via the jsCallbackReady call, then instantiate the kGoogleAnalytics object:

function jsCallbackReady( playerId ){
    new kGoogleAnalytics({
        // List of kaltura events to track
        // Full list of notifications available here:
        // http://www.kaltura.org/demos/kdp3/docs.html#notifications
        // For default list of events do not set this property
        'eventTrackList' : null,

        // The player object to add bindings too:
        'playerElement' : document.getElementById(playerId),

        // pageTracker object ( if set to null async tracking is used via _gaq.push calls )
        'googlePageTracker': null,

        // An optional event callback to be used to monitor what events are being sent to google via _trackEvent calls
        'trackEventMonitor' : null
    })
};

Lets take a look at how the kGoogleAnalytics works. kGoogleAnalytics take a list of eventTrackList and validates that list against the full set of notifications supported by the kdp api. Then it binds the events to the kdp player ( which can be an html5 player or flash player underneath ) like so:

addPlayerBindings: function(){
     var _this = this;
     for(var i = 0 ; i < this.eventTrackList.length; i++){
         var eventName = this.eventTrackList[i];
         var globalCBName = 'kga_' + eventName + _this.playerElement.id;

         // Add a global callback: ( add a closer context so the for loop context does not override.
         (function( eventName,  globalCBName ) {
             window[ globalCBName ] = function( data ) {
                 _this.playerEvent( eventName, data);
             };
             // add the event to the player ( assuming the jsListener is ready:
             _this.waitForAddJsListener( function(){
                    _this.playerElement.addJsListener( _this.getEventNameBinding( eventName ), globalCBName);
             });
          })(eventName, globalCBName );
      };
 }

Note: Because the flash player listners call in the global namespace, we do some minor tricks to generate a global function name that can be used with the flash listener. If your library was dependent on jQuery you could avoid the local anonymous function closure call with an outer $.each( loop on the the eventTrackList ).

Once the listeners have been added to the player we will receive all the player notifications in the playerEvent method.

playerEvent: function( methodName, data ){
    var trackingArgs = this.getTrackingEvent( methodName, data );
    // Don't track false events:
    if( !trackingArgs )
         return ;

    // Send the google event:
    if( this.googlePageTracker ){
       this.googlePageTracker._trackEvent.apply( trackingArgs );
    } else {
       var gaqAry = trackingArgs.slice(0);
       gaqAry.unshift( "_trackEvent" );
       window._gaq.push( gaqAry );
    }
    // Send the event to the monitor ( if set in the initial options )
    if( typeof this.trackEventMonitor == 'function'){
       this.trackEventMonitor.apply( this, trackingArgs );
    }
}

Here we generate a tracking event array and send it off to the google pageTracker. Google has started supporting two modes of sending events, via the pageTracker object or via appending to the global _gaq array. Here we support both. We also provide a convince function to monitor google analytic events we are sending.

One last custom event is the quartiles event, here we send beckons for every 1/4th of the video. This is helpful for analyzing fall-off rates and what percentage of the video has been viewed. Here we make use of playerUpdatePlayhead listener event and the ‘evaluate’ function of the kaltura api to get the clip duration. Here you can see how we get at the duration in the getQuartilesStatus function:

getQuartilesStatus: function( currentTime ) {
	var entryDuration = this.playerElement.evaluate('{mediaProxy.entry.duration}');

	// Set the seek and time percent:
	var percent = currentTime / entryDuration ;

 	// Send updates based on percentage complete
	if( !_this._p25Once && percent >= .25 )
	{
		_this._p25Once = true;
		return '25';
}

Pulling it all together we have the following page, that sends the same google analytic events regardless of if the player is in ‘flash’ or html5 mode.

 

November 30th, 2010

CE 3 With Amazon CloudFront CDN in Just a Few Easy Steps

by Jason

Kaltura has long supported origin-pull content delivery networks (CDNs) in our self-hosted editions. Without a content delivery network, your video platform simply can’t reach your users where ever they may be in the world.

Now that Amazon’s CloudFront has recently added support for custom origins, it’s particularly easy to add a CDN to any Community Edition or On-Prem Kaltura installation. And it’s especially convenient to add a CDN to a Kaltura EC2 instance which can be managed using the AWS Management Console.

You can create CloudFront distributions with custom origins using any of the 3rd party tools mentioned in the Amazon blog post.

After you’ve created the distribution, simply go to your Kaltura Admin Console and bring up the “Publisher Specific Configuration” dialog box (in your list of Publishers, select “Configure” from the “Actions” drop-down menu next to the publisher you want to enable for CloudFront) and enter the CloudFront domain name.

For a complete list of instructions, see our CloudFront guide.

Let us know how it worked for you.

By the way, using this method, you can add any origin pull CDN, such as VPS.net, Cachefly, Softlayer, and Akamai.

October 25th, 2010

Create KS protected videos with free preview

by Zohar Babin

Creating protected videos is a request that comes up once in a while in talks and on the forums.
Whether you’d like to sell the videos or allow restricted access for members only, this short tutorial is going to set the ground for it.

The KS Protected Access Control is a way to protect the access to your videos by enforcing the need to pass a KS (Kaltura Session) for the request that serves the video.

It is an advanced method meant to provide the developer of the integrated system means to decide on his side who should have access (valid KS specified) to the videos and who will be denied (no KS provided).

Step 1 – Create an Access Control Profile
Follow these steps:
a. Go to Settings > Access Control > Add Profile.
b. Scroll the window down to “Advanced Security & Pay-per-view”.
c. Check the two boxs (“Secure viewing of this video using server side session” and “Free Preview”).
d. Set the time for the preview period.

Or.. since video is much better than words, watch this short video:

Step 2 – Write the PHP code
We’ll use the PHP API Client library, this of course for the sake of example, you can use any other language for that.
The important part is the definition of the client object, configuring it and creation of the Kaltura Session (KS):

The KS (Kaltura Session) is constructed of a number of elements and must be generated on the system side:

  1. The API secret (KMC>Settings>Integration Settings>User Secret).
  2. The system (your WordPress) user Id.
  3. The Kaltura Session Type (USER in this case, if you use a PHP client library: KalturaSessionType::USER).
  4. Your Kaltura Partner Id.
  5. The Session Expiry in milliseconds.
  6. A special privileges string – this is very important in this case as it is used to determine if the user has access to see the full video or not, it is specified using the string ‘sview:’ with the video entry id concatenated (e.g. ‘sview:1_92cyew21′).
// Your Kaltura credentials
define("PARTNER_ID", "--Set your partner id here--");
define("USER_SECRET", "--Set your API user secret here (KMC>Settings>Integration Settings>User Secret)--");
define("ENTRY_ID", "--Set the entry id of a video with relevant KS access control applied that belong to the above partner id--");
define("UICONF_ID", "--Set the uiconf id of the player you'd like to use. You can find this id in the players list on the Studio tab in KMC--");
// Whatever user id you want to set (This is according to your system deployment):
$user = "SomeoneWeKnow";

//This is the session start function signature: start($secret, $userId = "", $type = 0, $partnerId = -1, $expiry = 86400, $privileges = "")
$session = $client->session->start(USER_SECRET, $user, KalturaSessionType::USER, PARTNER_ID, 86400, 'sview:'.ENTRY_ID);

Note “sview:ENTRY_ID”
To create a KS (Kaltura Session) that will provide access to the video, pass “sview:ENTRY_ID” in the permissions variable when creating a new KS (using the session create function), replacing ENTRY_ID with the id of the video entry to allow access to.
This generated KS should then be rendered to the page if the user has permissions to access the full video.
If the user doesn’t have permissions to access the full video, flashvars shouldn’t render a KS and Kaltura will only stream the preview part of the video as defined in the access control profile.

Then, on the flashvars of the embedded KDP, we’ll provide the created ks as follow:

kWidget.embed( 'playerTarget', {
	'wid' : '_243342',
	'uiconf_id' : '8145862',
	'entry_id' : '1_20x0ca3l',
	'flashvars':{
		'ks': < ?php echo $session; ?>
	}
});

All done. :-)

Download the sample PHP app here.

If that helped you, or you find a good way to improve it – let us know in the comments / twitter..