How to use Kaltura video in VideoJS

1

I have a web page that uses VideoJS to load and play videos such as “youtube”, “vimeo”, “mp4”.

Apparently the company stores all the videos on Kaltura and I got the task to use kaltura video in my VideoJS player.

Below is my code which is a function that checks whether the url is a youtube video, kaltura, vimeo or simply mp4. All types of video work fine except kaltura

Here is my Code:

HTML

<video
    id="myVideo"
    ng-show="urlProvided"
    class="video-js vjs-default-skin"
    controls
    width="600"
    data-setup='{ "techOrder": ["html5", "flash", "youtube", "vimeo"]}'
>
</video>

JS/Angular

function playApropriateType(url) {
                //check if video is from youtube
                if(url.indexOf('youtube') != -1) {
                    scope.player.src({type: 'video/youtube', src: url});
                    scope.player.load();
                }

                //KALTURA url. not working
                else if(url.indexOf('kaltura') != -1) {
                    scope.player.src({"type":"video/mp4", "src":url});
                    scope.player.load();
                }

                //check if link is vimeo from payed account
                else if( ((url.indexOf('mp4') != -1) && (url.indexOf('vimeo') != -1)) || url.indexOf('mp4') != -1) {
                    scope.player.src({"type":"video/mp4", "src":url});
                    scope.player.load();
                }

                //check if video is simple vimeo
                else if(url.indexOf('mp4') == -1 && url.indexOf('vimeo') != -1){
                    scope.player.src({type: 'video/vimeo', src: url});
                    scope.player.load();
                }
            }

Can anybody help me with that?

2

Hi,

Kaltura can be used on our SaaS but can also be self hosted using either the Community Edition [CE] or OnPrem.
Depending on that, the URL to the actual video may or may not contain the string ‘kaltura’.
Also, the Kaltura Server can serve the mp4 as is [what is called progressive download] or use adaptive bitrate protocols such as HLS, HDS and DASH, in which case, a corresponding manifest which contains the same video in different flavours [different bitrates and other params] will be served and the video will be served in segments.
What does your URL to the video look like and when you say “it does not work”, what is the behaviour you are seeing?

Thanks,

3

Hi,

Thanks for the reply. By “not working” I mean that my VideoJS plugin doesn’t support kaltura videos. I think it is because the kaltura links are not pointing to the mp4 videos directly.

Here is a link: https://www.kaltura.com/index.php/extwidget/preview/partner_id/1921661/uiconf_id/35919811/entry_id/0_5gob30nv/

I will have a look at HLS as you suggested because I think VideoJS has a plugin for that.

Is it possible to get the link to the plain mp4 on Kaltura for a video?

Thanks a lot again for the reply!

4

Hi @morcov,

If you run a HTTP sniffer while playing this video, you will see a playmanifest request that looks like this:
https://cdnapisec.kaltura.com/p/1921661/sp/192166100/playManifest/entryId/0_5gob30nv/flavorIds/1_urj4wo34,1_l9xum4aw,1_h0pbzs4j,1_6dseohb8,1_v0owkwoc/format/applehttp/protocol/https/a.m3u8?referrer=aHR0cHM6Ly93d3cua2FsdHVyYS5jb20=&playSessionId=fc0cca6f-436b-d639-85ff-93b33d6135e7&clientTag=html5:v2.53.2&uiConfId=35919811&responseFormat=jsonp&callback=jQuery111107637449795986788_1490621933904&_=1490621933905

The important part there is:
format/applehttp/protocol/https
which means HLS [code name applehttp] is requested.
You could make this request instead:
https://cdnapisec.kaltura.com/p/1921661/sp/192166100/playManifest/entryId/0_5gob30nv/format/http/protocol/https
which would return:

<?xml version="1.0" encoding="UTF-8"?>
        <manifest xmlns="http://ns.adobe.com/f4m/1.0">
                <id>0_5gob30nv</id>
                <mimeType>video/x-flv</mimeType>
                <streamType>recorded</streamType>

                <duration>203</duration>

<media url="https://cfvod.kaltura.com/pd/p/1921661/sp/192166100/serveFlavor/entryId/0_5gob30nv/v/31/flavorId/1_urj4wo34/name/a.mp4" bitrate="429" width="640" height="360" />

So, a direct URL to one of the entry flavours is returned, in this case:
/https://cfvod.kaltura.com/pd/p/1921661/sp/192166100/serveFlavor/entryId/0_5gob30nv/v/31/flavorId/1_urj4wo34/name/a.mp4

Depending on your conversion profiles, a conversion to several flavours will be attempted. When using adaptive bitrate protocols such as HLS, HDS and DASH, different flavours may be served during the playback session, depending on your available bandwidth and device. The file is segmented into fragments and is not served in one chunk.
Whenever possible, this method is obviously preferable to a progressive download.

VideoJS is capable of HLS playback, see: https://github.com/videojs/videojs-contrib-hls but may I ask why you wish to use it rather than the Kaltura player?

5

Hi, thanks a lot for your help. I think this is what I need.

We built that prototype a few months ago ang we used VideoJS to support vimeo, youtube and mp4 videos. Also there is a videoJS plugin called Video.Js-Markers which allows to add marks on video progress bar.