Kaltura's HTML5 Media Library enables you to take advantage of the html5
<audio> tags today with a consistent player interface across all major browsers including Internet Explorer.
Release Notes are stored on the html5video.org wiki
Library documentation for installation, configuration, and usage is maintained on the html5video.org wiki
- Video Player
- Audio Player
- Cross browser & Format compatibility
- Will work on all major browsers, and with any online supported video format.
- Gracefully identifys the best playback engine (Native HTML5, Flash, VLC or Java Cortado) for your settings and video format.
- Easy to skin see live demo]
- Based on HTML, CSS and jQuery, skinning is amazingly easy and flexible. No need external or compiled resources (like Flash), or complicated development environments.
- Skin and Theme are consistent through all UI and playback engines. Built in support for for the jquery Theme Roller for easy theming.
- Easy to integrate - Integrate to any existing web CMS, pre-integrated into Media Wiki (powering Wikipedia, MetaVid).
- Kaltura's HTML5 Media Library is built on jQuery and jQueryUI so it's easy to theme, customize and extend.
- supports the royalty free, patent unencumbered open media formats ogg theora/vorbis.
- This enables websites to distribute video without future content distribution costs associated with the h.264 codec. With theora sporting similar qualities at web bitrates its a win win to start adoption ogg!
- If your already distributing h.264 formats, mwEmbed supports a smooth transition with fallback to h.264 sources with the same html/css interface player skin as the ogg content.
- supports emerging subtitles and timed text formats for future prof accessibility.
- includes an easy to integrate free license asset search system for grabbing free content from repositories such as the Internet Archive, Wikimedia Commons, and Flickr. This lets you integrate quick access to freely reusable illustrative image or short web clip for your web app.
- includes components for flexible client side transcoding of assets via the Firefogg browser extension. Firefogg integration lets video sites avoid intermediary transcode formats for user contributed media, distribute transcode costs, and lets the website provide specific transcoding settings directly to the client at the point of upload.
- Integrated into Kaltura Video Platform based on the Kaltura JS Client library
- Analytics Support
- Advertisement Support
Using Kaltura SaaS for Video Transcoding
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)
Hosting Your Own Video Transcodes
http://html5.kaltura.org/js and then using the normal html5 video tag, ie
Putting it all together your embed page should look something like this:
- For best compatibility: we include the poster, durationHint, width and height attributes. This way browsers such as IE can display the player interface with poster image at the correct resolution with a duration in the user interface.
- If you would like to support html5 with h.264 ( safari, IE9, google chrome) and support a flash fallback for older versions of IE you include an h.264 source. For best compatibility your mp4 source should ideally use a h.264 profile compatible with mobile devices such as the iPhone. Kaltura hosted Solutions include iPhone support. Desktop video encoding software such as handbrake also includes iPhone profiles.
- If you would like to change the theme you can change the class attribute
<video class="kskin">more info about custom theming is on the way.
Fall Forward from Flash to html5 for iOS and Android Support
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.
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.
Themeing with jQuery-UI
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.
Skinning and Themeing
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.
Basic Usage of MIT Licensed Static Compiled HTML5 Video Player
Notes on Optimization
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
For full un-minified source see HTML5 Video Player
<head> of your page you will need jQuery and the mwEmbed-player package:
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>
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.
HTML5 video MIME type
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:
- Edit the mime.types apache configuration file (in "/etc/apache" on linux, "\xampp\apache\conf\mime.types" on windows-xampp)
- Search for
application/ogg ogg(if not exist skip this step), delete this line
- Add the following:
video/ogg ogg ogm ogv
- Restart apache
Or 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.
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.
Become a Developer
If you find this software useful, stop by #kaltura in FreeNode.
Compile Developer Docs
java -jar jsrun.jar app/run.js /home/papyromancer/src/mwEmbed/loader.js /home/papyromancer/src/mwEmbed/mwEmbed.js /home/papyromancer/src/mwEmbed/mwEmbedLoader.js /home/papyromancer/src/mwEmbed/modules/**/*/*.js -t=templates/jsdoc cat overview.markdown features.markdown basic_usage.markdown advanced_examples.markdown mit.markdown troubleshooting.markdown showcase.markdown license.markdown > README cat overview.markdown features.markdown basic_usage.markdown mit.markdown troubleshooting.markdown showcase.markdown > README.mit bluecloth README > docs/README.html
For an overview of all mwEmbed files see: http://www.mediawiki.org/wiki/MwEmbed
- Video Player Theme Wizard
- Add Media Wizard
- Player API Demo
- Audio Player
- Dynamic Embed
- Flash Fallback Player
- Fall Forward from Flash to HTML5
- iPad Video Player
- iPad Video Player With Native Controls
- Using iPad Touch Interface
- Video Player from Kaltura EntryID
- Multiple Fall Forward Embeds
- Native HTML5 Video Controls
- Video Player Embed of SWF Animation
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 email@example.com, 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.