Kaltura's HTML5 Media Library enables you to take advantage of the html5 <video> and <audio> tags today with a consistent player interface across all major browsers including Internet Explorer.
The library supports a seamless fallback with Flash based playback using Kaltura's Flash player or Java Cortado for browsers that don't yet feature HTML5 video & audio support. Upon detection of the client browser, the Kaltura HTML5 Media Library chooses the right codec to use (specified in the source attributes, or available from a Kaltura server) and the right player to display. So whether you're using flash, h264, ogg-theora, or WebM -- Kaltura's library will make sure it is played on all browsers with the same UI.
While support for HTML5 video is growing, there is large percentage of the web browser market that is presently best served by the Adobe Flash plugin and an associated player. A base component of the Kaltura HTML5 javascript library bridges this gap, by cascading to an underlining Flash player in browsers that do not support the native HTML5 video player. In addition, Kaltura's player maintains a unified look & feel across formats and browsers.
Basic Usage
To use html5 video flavors from your Kaltura account, you need only to include a kentryid attribute in yout <video> tag. The library will automatically select the appropriate video flavors for your visitors devices (make sure you have contacted support and requested that html5 video flavors be added to your account)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://html5.kaltura.org/js" > </script>
</head>
<body>
<video kentryid="0_swup5zao"
kwidgetid="_243342"></video>
</body>
</html>
Using Kaltura's HTML5 Media Library in your own applications is as simple as adding a script include of the library javascript, http://html5.kaltura.org/js and then using the normal html5 video tag, ie <video src="myOgg.ogg">.
Putting it all together your embed page should look something like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://html5.kaltura.org/js" > </script>
</head>
<body>
<video id="video" style="width:544px;height:304px;"
poster="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Elephants_Dream.ogg/seek%3D13-Elephants_Dream.ogg.jpg"
duration="10:53"
linkback="http://www.elephantsdream.org/" >
<source type="video/ogg" src="http://ia311040.us.archive.org/3/items/ElephantsDream/ed_1024.ogv" >
<source type="video/h264" src="http://ia311040.us.archive.org/3/items/ElephantsDream/ed_hd_512kb.mp4" >
<track kind="subtitles" id="video_af" srclang="af"
src="media/elephants_dream/elephant.afrikaans.srt"></track>
<track kind="subtitles" id="video_en" srclang="en"
src="media/elephants_dream/elephant.english.srt"></track>
</video>
</body>
</html>
<video class="kskin"> more info about custom theming is on the way.mwEmbed is designed to be used with a script-loader and this static package sacrifices
transport size and packages in code every client won't use, in order to be a single static file.
You can learn more about using mwEmbed with a script-loader on the project home page.
To use the load optimized HTML5 Media Library replace your mwEmbed script include line of <head> with:
<script type="text/javascript" src="http://html5.kaltura.org/js" ></script>
For full un-minified source see HTML5 Video Player
In the <head> of your page you will need jQuery and the mwEmbed-player package:
<!-- If your page already includes jQuery you can skip this step -->
<script type="text/javascript" src="kaltura-html5player-widget/jquery-1.4.2.min.js" ></script>
<!-- Include the css and javascript -->
<link rel="stylesheet" href="kaltura-html5player-widget/skins/jquery.ui.themes/jquery-ui-1.7.2.custom.css"></link>
<link rel="stylesheet" href="kaltura-html5player-widget/mwEmbed-player-static.css"></link>
<script type="text/javascript" src="kaltura-html5player-widget/mwEmbed-player-static.js"></script>
Now in your HTML you can use the video tag and it will be given a user interface ie:
<video poster="myPoster.jpg" style="width:400px;height:300px" durationHint="32.2" >
<source src="myH.264.mp4" />
<source src="myOgg.ogg" />
</video>
Advanced Examples
Kaltura's HTML5 Video Library may be installed in conjunction with existing flash video integrations to provide fall forward from flash to html5 to enable video embedding for iPhone and iPad.
Installing html5 support to an existing Kaltura integration is as simple as adding a javascript tag to include http://html5.kaltura.org/js. The library will automatically replace your Flash embed with an html5 <video> element on browsers capable of parsing the tag.
<!DOCTYPE html>
<html>
<head>
<title>Fall forward from Flash to html5</title>
<script type="text/javascript" src="http://html5.kaltura.org/js"></script>
</head>
<body>
<h2>Fall forward from Flash to html5</h2>
<object id="kaltura_player" name="kaltura_player"
type="application/x-shockwave-flash"
allowFullScreen="true" allowNetworking="all"
allowScriptAccess="always" height="330" width="400"
data="http://www.kaltura.com/index.php/kwidget/cache_st/1274763304/wid/_243342/uiconf_id/48501/entry_id/0_swup5zao">
<param name="allowFullScreen" value="true" />
<param name="allowNetworking" value="all" />
<param name="allowScriptAccess" value="always" />
<param name="bgcolor" value="#000000" />
<param name="flashVars" value="&" />
<param name="movie" value="http://www.kaltura.com/index.php/kwidget/cache_st/1274763304/wid/_243342/uiconf_id/48501/entry_id/0_swup5zao" />
</object>
</body>
</html>
You can add a custom jquery ui theme by using the theme wizard: http://www.kaltura.org/apis/html5lib/kplayer-examples/Player_Themable.html. Note that although the themeroller only works in Firefox, the temes you create with it will work in multiple browsers.
You can add a custom jquery ui theme by using the Theme Wizard. Downloading that theme and adding a reference to jquery-ui-.custom.css after the mwEmbed-player-static.css file.
A few sample jquery ui skins are included in the skins/jquery.ui.themes folder of the HTML5 Video Player.
You can remove the kaltura attribution for the player by adding the following javascript:
<script type="text/javascript">mw.setConfig('EmbedPlayer.kalturaAttribution', false );</script>
You can remove the kaltura attribution for the player by adding the following javascript:
<script type="text/javascript">mw.setConfig('EmbedPlayer.kalturaAttribution', false );</script>
Troubleshooting
You will need to encode your video files into multiple codec formats to provide video for device platforms like iPhone, iPad, Android, and Blackberry. Dive into HTML5 provides an excellent reference for encoding these multiple video formats with Firefogg , FFmpeg, and Handbrake.
If you would prefer to not have to deal with encoding your videos into multiple formats, you should obtain a trial account with Kaltura and request a support technician setup your account to provide html5 flavored video codecs.
Note that if the MIME types for Theora video are not set on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).
You can fix this problem for the Apache Web Server by adding the extension used by Theora video files (".ogm", ".ogv", or ".ogg" are the common types) to the MIME type "video/ogg" via the "mime.types" file:
application/ogg ogg (if not exist skip this step), delete this linevideo/ogg ogg ogm ogvOr by adding the "AddType" configuration directive in httpd.conf -
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.
Background
This project started as a part of the MediaWiki HTML5 media functionality project. mwEmbed is another name by which Kaltura's HTML5 Media Library is known at Wikimedia, where it provides Wikipedia's upcoming video editing functionality.
mwEmbed provides the basis for other MediaWiki media functionality. For more info see the projects overview on MediaWiki and the associated integration (currently called js2)
Become a Developer
If you find this software useful, stop by #kaltura in FreeNode.
MwEmbed is released under the GPL2 and hosted by the wikimedia foundation.
You may check out a read-only working copy anonymously over HTTP:
svn checkout http://www.kaltura.org/kalorg/html5video/trunk/mwEmbed/
If you'd like commit access, please submit a request to join this project..
For an overview of all mwEmbed files see: http://www.mediawiki.org/wiki/MwEmbed
For stand alone usage see http://kaltura.org/project/HTML5_Media_JavaScript_Library
License and Copyright Information
All mwEmbed code is Released under the GPL2 as a stand alone component of mediaWiki
Libraries used include their license info in their included path
Copyright (C) 2007 - 2010 Kaltura, Wikimedia Foundation
Sub modules and libraries carry specific copyright while the the entire package is always releasable under the GPL 2
Author Michael Dale mdale@wikimedia.org, and many others.
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
http://www.gnu.org/copyleft/gpl.html
EduVideo.org