Get multiple <source>s for the HTML5 video tag from Kaltura entry "flavors"

32 replies [Last post]
Joined: 07/02/2009
Points: 7

One great use of the Kaltura platform is to create in one swoop all the sources you need for html5 video playback.

In order to do this you will need a Kaltura account (get free trial with 10GB and ask for HTML5 encodings)

Once your account is set up with HTML5 encodings, each video you upload will be converted to VP8, Ogg Theora and H264 (as well as FLV in multipile bitrates). The video you uploaded is called a Kaltura "entry" and the various encodings of this video are called "flavors".

You use these flavors as your <source>s like this:


<video height=270” width=”480” poster=”url_to_your_poster_image” controls autoplay>
<source src=”http://cdnakmi.kaltura.com/p/replace_with_your_kaltura_partner_id/sp/replace_with_your_kaltura_partner_id00/flvclipper/entry_id/replace_with_your_entry_id/flavor/replace_with_your_vp8_flavor_id” >
<source src=”http://cdnakmi.kaltura.com/p/ replace_with_your_kaltura_partner_id /sp/replace_with_your_kaltura_partner_id00/flvclipper/entry_id/replace_with_your_entry_id/flavor/replace_with_your_ogg_flavor_id” >
<source src=”http://cdnakmi.kaltura.com/p/ replace_with_your_kaltura_partner_id /sp/ replace_with_your_kaltura_partner_id00/flvclipper/entry_id/replace_with_your_entry_id/flavor/replace_with_your_h264_flavor_id” >
</video>

Note: the “00” that appears after one of the “replace_with_your_kaltura_partner_id” is required.

To find out your “entry id” and “flavor id”s:

  • Go here - this will lead you to the Content tab inside the Kaltura Management Console - KMC.
  • Now, locate your entry and click on its name (we call this “drill down”). Your entry id is located below the thumbnail of your video.
  • Now click on the “flavors” link on the left and locate the flavors called “VP8”, “OGG” and “H264”.
  • BONUS TIP - get the poster image directly from the Kaltura service: http://cdn.kaltura.com/p/replace_with_your_kaltura_partner_id/sp/replace_with_your_kaltura_partner_id00/thumbnail/entry_id/replace_with_your_entry_id/height/480/width/270

Joined: 07/09/2010
Points: 1

i am using the js code with

on my web page and have the following video tag...
( i've done the file container conversions, and also have flv and webM files ready to use)
( this seems to work on iPod and iPhone as well as my pc firefox and pc safari browsers)

                                      <video id="video" style="width:125px;height:127px;"
                                     
                                       duration="1:15"  controls>
                                        <source type="videos/ogg" src="videos/baby_final-1.mov.ogv" >
                                        <source type="video/h264" src="videos/made-with-handbrake.m4v" >
                                   
                                      </video>

where do i find out how to
1) change the built in poster ( goldfish) or remove it entirely, and use my own image?
( do i have to download a completely independent set of javsascript files and store them on our host?)
2) be able to use controls but not leave the website ( the far right button on controls takes us to Kaltura site,
my client does not want that, and is the main reason we are not using youtube)
3) add the flash version as a source type, and fall back to flash version
3a. i have two flash players ( transparentplayer and flowplayer)
4) show the video in its original size but have the poster be our image
our attempt url is at http://merituscapital.com/testing-kaltura.php

Joined: 11/05/2009
Points: 334

One great use of the Kaltura platform is to create in one swoop all the sources you need for html5 video playback.

In order to do this you will need a Kaltura account (get free trial with 10GB and ask for HTML5 encodings)

Once your account is set up with HTML5 encodings, each video you upload will be converted to VP8, Ogg Theora and H264 (as well as FLV in multipile bitrates). The video you uploaded is called a Kaltura "entry" and the various encodings of this video are called "flavors".

The capabilities gap between KalturaCE and the Kaltura SaaS is growing too large for my liking. I understand that you need to make money and all, I really do, but throw us CE guys a bone every once in a while :)

Please release to us community users the hacks required to enable HTML5 encodings, and how to enable the multiple encoding profiles. If you do, I may forgive you for the constant promises of "new and upcoming versions" that are non-deliverables.

Thank you.

Joined: 05/13/2009
Points: 164

The next CE is being finished up as I type this. I've been told in the irc that it will ship in the next two weeks and be available by OSCON.

Joined: 11/05/2009
Points: 334

Best news I've heard in a while. Thanks 'mancer.

Joined: 05/13/2009
Points: 164

I'm trying to verify if html5 flavors are installed on my account, but in the content drill down mode I do not see any tabs about flavors, I only see metadata and content.

Am I looking in the right place? Does lack of the flavors tab mean that html5 flavors have not been installed?

kmc-where are flavors

Joined: 08/05/2010
Points: 3

I'm having questions regarding html5, too - on the Kaltura site it says that a Kaltura representative will get in touch with me regarding enabling support for html5. well, nobody did until now, and I'm wondering what it is that I need to do to enable the html5 player(s).

can't they just put it up on here? or did I miss something and it's already written down somewhere? I need the html5 support urgently, since only then can I really try to use Kaltura for my purposes.

Any help would be greatly appreciated.

- hendrik

Joined: 07/08/2010
Points: 3

I've been asking about this too, and from what I've gathered so far, html 5 support is only an option for kaltura.com paying customers. If the html 5 codecs were available, they would most likely be found in the Settings tab>Transcoding settings area in the Kaltura Management Console..

Joined: 08/05/2010
Points: 3

well, they do state to "get a trial account and ask for HTML5 encoding", so it should be possible with the trial version, too. I asked several times to get HTML5 support already, but I'm not really sure where to point the question. I need the HTML5 support in the trial to see if I can even use Kaltura for what I want to do (that's what a trial is for, right?). :)

does anybody here know how to modify the Kaltura Drupal module after that, to have the correct html/javascript code after HTML5 was enabled? there's bound to be a place in the module where I can change the code with which the videos are embedded in Drupal, right?

- hendrik

Joined: 05/13/2009
Points: 164

Hey Hendrik,

Once HTML5 codec flavors are available on your account (Direct message me your partner id and kaltura.com email address if you need verification that the process has begun...)

To activiate the html5 video playback on iOS and Android (this is what we call fall forward mode), you just need to install the html5 Javascript in the head of your drupal theme. The Javascript will automatically rewrite the player on platforms that do not support flash but do support html5.

http://www.kaltura.org/advanced-examples

I'm not sure that the Drupal module, at this point in time, embeds using the <video> tag, but Fall Forward mode of the HTML5 library will switch out the flash players with the video tag when necessary.

Joined: 07/08/2010
Points: 3

So, were you able to get the html 5 flavors enabled? If so, who did you talk to? I've been dealing with a Kaltura.com rep directly and I still can't get get them to enable it for the 10 GB trial account.

Joined: 08/05/2010
Points: 3

nope, no luck at all until today. I'm generally disappointed with the Kaltura assistance on this, I have to say. I'm seriously considering just dropping it and using something else now.

Joined: 11/05/2009
Points: 334

Anybody ever figure out how to add different conversion profiles to KalturaCE so that it can transcode in VP8 and OGG?

Joined: 08/12/2010
Points: 10

The following URL seems to work for ogg but only does a local conversion for you.

http://www.kaltura.org/apis/html5lib/mwEmbed/modules/AddMedia/tests/Fire...

Joined: 11/05/2009
Points: 334

After hours and hours of tinkering I figured it out! Check it out (this is from the x7Host knowledgebase)...

Your KalturaCE v2.0 server is fully able to transcode video into iPhone/iPad/iPodTouch-friendly formats, and when combined with the powerful Kaltura HTML5 Library, allows you to gracefully fall forward/backward to and from flash and HTML5 video. So what does this mean exactly? It means that simply by adding an additional "flavor" parameter encoding profile to your server and including a few additional lines of code into the pages that you serve your KalturaCE videos, you can allow the iDevices to view your videos!

Here's how to do it!...

1) Log in to your admin console, and start a new session in the Developer => Test Console by entering the admin secret key and partner ID of the publisher for which you wish to enable the iPhone format transcoding. You can get your admin secret key by logging into your KMC with the desired publisher and going to Settings => Integration Settings

2) Next, use the flavorParams => Add service (make sure you check the box next to your KS so it is a valid session!) and enter the following into the flavorParams box for the various settings (you have to click on flavorParams for it to open first)

* flavorParams:name - iphonemp4
* flavorParams:description - iphone mp4 format
* flavorParams:tags - iphone,mp4
* flavorParams:format - mp4
* flavorParams:videoCodec - h264
* flavorParams:audioCodec - AAC
* flavorParams:conversionEngines - 2
* ALL other values should be left BLANK!

You can verify that it has taken by using the flavorParams => List service

Now, you are ready to start serving up that iPhone video goodness by doing the following...

3) On the pages that you have embedded your KalturaCE video embed tags, include the following script calls (HTML5 library loader, jQuery, jQueryUI) in the HEAD of your page:

http://html5.kaltura.org/js
http://cdn.jquerytools.org/1.2.4/jquery.tools.min.js
(we use the jquery tools loader for jquery but you can use the googleapi loader also)
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js

mw.setConfig( 'Kaltura.ServiceUrl' , 'http://SUBDOMAIN.YOURSERVER.COM' );
mw.setConfig( 'Kaltura.CdnUrl' , 'http://SUBDOMAIN.YOURSERVER.COM' );
mw.setConfig('EmbedPlayer.kalturaAttribution', false );
mw.setConfig( 'EmbedPlayer.NativeControlsMobileSafari', false );

Don't forget these all need to be set inside SCRIPT tags :)

Remember to change the service and CDN urls to be your server! Of course the Kaltura attribution and mobile safari controls values can be changed to your liking also.

Now, with the Kaltura HTML5 loaded, your video embed tags will be automatically rewritten depending on the User-Agent of the requesting browser, which means that if the browser supports flash, it will serve flash, but if the browser only supports HTML5 (like the iDevices) it will load the HTML5 player and use the iDevice-friendly transcoded video source!

Check out our demo page here and feel free to copy the source code:

http://www.kalturacehost.com/html5test.php

If anyone has anything to add to make it better please let me know, thanks.

Joined: 10/17/2009
Points: 81

When I tried to set this up on KalturaCE 2.0, following rtcwp07's method, the script replaced the flash object with a div containing a spinner, called the following URL and then got an error response.

http://www.kaltura.com/api_v3/index.php?service=session&action=startWidg...

The response:
jsonp1289400400656({"code":"INTERNAL_SERVERL_ERROR","message":"Internal server error occured"});

---Edit---

However, if i modify the same URL call but replace kaltura.com with my own kaltura domain i get this response:
jsonp1289400400656({"partnerId":102,"ks":"OGZhNzk5OWNhMTI0MmExODZjZDdmYzA2YWNmMGNlZDQyOTE0Y2MzZHwxMDI7MTAyOzEyODk0ODg5OTc7MDsxMjg5NDAyNTk3LjEzOzA7dmlldzoq","userId":0});

This looks like a valid response.

So why is it going to www.kaltura.com even though I set mw.setConfig('Kaltura.ServiceUrl' , 'my kaltura domain here' ); ?

What could be the issue here?

Joined: 11/05/2009
Points: 334

hmmm do you have a public url i could take a look at? is your embed code being copied right out of your kalturace server's "preview and embed" generated code?

Joined: 10/17/2009
Points: 81

Sure, www.idojo.com.au and yea, its copied straight out of kalturaCE's preview & embed code.

The mw config bit is set here: http://www.idojo.com.au/js/prototype/noconflict.js

I've verified that the code block is being executed.

Joined: 11/05/2009
Points: 334

yep im not sure why it is still making that api call to the wrong website. we should get papyromancer's help on this one.

Joined: 11/05/2009
Points: 334

'mancer, we need your help man! how do we get that api call from the library to use our CE url?

Joined: 10/17/2009
Points: 81

I've checked out the latest mwEmbed package from kaltura's repository, linked to it instead of kaltura's html5/js loader, and it still tried to get stuff from www.kaltura.com

svn co http://www.kaltura.org/kalorg/html5video/trunk/mwEmbed/

<script type="text/javascript" src="http://www.idojo.com.au/js/mwEmbed/mwEmbedLoader.js"></script>
<script type="text/javascript" src="http://www.idojo.com.au/js/mwEmbed/libraries/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.idojo.com.au/js/mwEmbed/libraries/jquery/jquery.ui/ui/jquery-ui-1.8.4.custom.js"></script>

So I did a recursive search and replace and pretty much just replaced all of www.kaltura.com in the mwEmbed source files with my kalturaCE domain.
Probably the only place where it matters would be here: mwEmbed\modules\KalturaSupport\loader.js @ L14

I have yet to try pulling over a CDN, my host is still getting origin pull set up for me, so i'll look at the Kaltura.CdnUrl setting later, although again, it's probably just the same by changing loader.js @ L16

That brought me a step closer to my goal and now it is calling my kalturaCE, getting correct session key's etc!

Obviously that doesn't fix the actual problem that the library on kaltura.com and in kaltura's SVN repository is having - it still igonores the mw.setConfig directives, but for my use of it, this should work just fine.

Viewed on an iPad I see the video's screenshot/thumbnail, with a play triangle in the center but the play triangle is disabled and a crossed out circle superimposed.

I'm not sure what that means - wrong flavor settings maybe?
The new flavor described in your post should be OK to convert videos to an iPad compatible format.
It matches the format described here: http://www.aneesoft.com/tutorials/ipad-supported-video-format.html

-- edit--
Success!

It turns out that the height has to be set to 720. I'm not sure what happens to videos that start out with less resoultion than that, but mine was a HD vid 1920x1080 so it had to be scaled down and presto - it works!

So add to your flavor setup:
flavorParams:height 720

Joined: 11/05/2009
Points: 334

mbirnbaum, you are awesome. thanks very much!

you're right that this does not really fix the underlying issue, but i'm happy to be able to at least get it to work!

Joined: 10/11/2010
Points: 1

if you have access to the db you can summarize rtcwp07's useful steps just by running:

INSERT INTO `flavor_params` (`version`,`partner_id`,`name`,`tags`,`description`,`ready_behavior`,`is_default`,`format`,`video_codec`,`video_bitrate`,`audio_codec`,`audio_bitrate`,`audio_channels`,`audio_sample_rate`,`audio_resolution`,`width`,`height`,`frame_rate`,`gop_size`,`two_pass`,`conversion_engines`,`conversion_engines_extra_params`,`custom_data`,`view_order`,`bypass_by_extension`,`creation_mode`,`deinterlice`,`rotate`)
VALUES
(0, 0, 'iphonemp4', 'iphone,mp4', 'iphone mp4 format', 0, 1, 'mp4', 'h264', 2500, 'aac', 128, 0, 0, 0, 0, 720, 0, 0, 0, '2,99,3', '', NULL, 0, NULL, 1, 0, 0);

That'll allow all your users to encode to iPhone mp4.

What I need to know, is how to include it in the default conversion set. Any help would be greatly appreciated

Joined: 11/05/2009
Points: 334

@yeco after inserting the flavor into the db it should appear in the transcoding settings page. then it's a matter of just clicking to include it as part of the default profile.

Joined: 08/30/2010
Points: 115

just a note for those interested to get the videos playing on iphone 3G and 3GS you have to create a flavour within width 640 and height 480, or just with 640 and height at 0 (auto) to keep proportionality, but black bars may appear.
I speculate this is true for blackberry 3gp videos but I don't know the sizes since I haven't a blackberry to test with.

Joined: 03/07/2011
Points: 2

I never realised Kaltura was so versatile Thanks a lot for the heads up. free walmart gift card

Joined: 03/07/2011
Points: 2

Thanks again for the wonderful post http://freefreebiessamples.com/freewalmartgiftcard

Joined: 03/28/2011
Points: 1

Hello, many thanks for clearing that up. Much appreciated. Is it ok for me to place a link on my site pointing to yours? I have many customers who will be particularly interested in your posts. Thanks a lot.

Susan | Schwinn 240 Recumbent Exercise Bike

Joined: 05/22/2011
Points: 3

Wie DSL online verglichen wird.

Joined: 05/22/2011
Points: 3

Die Gebäudeversicherung testen.
Wie der Tagesgeld Vergleich 2011 aussieht.

Joined: 10/15/2012
Points: 7

The video you uploaded is called a Kaltura "entry.

`https://www.spendbitcoins.com/

Joined: 11/06/2012
Points: 6

This will lead you to the Content tab inside the Kaltura Management Console.

http://www.drphilhaeck.com/

Joined: 12/10/2012
Points: 3

In addition to software decoders, a hardware video decoder should exist for the format, as many embedded processors do not have the performance to decode video. Risk Management