HTML5 Video & Media JavaScript Library

5

Average: 5 (2 votes)

This javascript 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 jQuery of HTML5 media

The library is built on jQuery and jQueryUI so its easy to theme, customize and extend.
The player 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, the library supports a smooth transition with fallback to h.264 sources with the same html/css interface player skin as the ogg content.

mwEmbed support emerging subtitles and timed text formats for future prof accessibility.
It 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.
It 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.

Getting stated with the library

Download and extract the latest release to your web server.
Using mwEmbed in your own applications as simple as:

<html>
<head>
<script type="text/javascript" src="http://html5.kaltura.org" > </script>
</head>
<body>
<video src="myOgg.ogg" poster="myOggFrame.jpg" ></video>
</body>
</html>
For best compatibility: include a durationHint, width and height attribute. This way browsers such as IE can display the player interface with the correct resolution and duration.

<video src="myOgg.ogg" poster="myOggFrame.jpg" width="400" height="300" durationHint="32" >

Library features and showcase

Cross browser & Format compatibility [see live demo: Video Player, Audio Player] - 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 will be consistent through all UI and playback engines. Built in support for for the jquery Theme Roller for easy theming.
Easy to Extend, Javascript modules - Quick, clean and easy way of extending. Write once and the code will be compatible with all browsers and all playback engines.
Javascript libraries for web applications that allow much more then simple playback. Create a full featured web-video experience - Import and upload wizard, Video Editor ( not fully functional in stand alone mode yet ), Client Side Encoding (FireOgg).
Easy to integrate - Integrate to any existing web CMS, pre-integrated into Media Wiki (powering Wikipedia, MetaVid).
Integrated into Kaltura Video Platform based on the Kaltura JS Client library (Coming soon...)

Background

This project started as a part of the MediaWiki HTML5 media functionality project.
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)

More...

There are many other options (like thumbnail, poster, size, inline transcript display etc.) provided with this library.
The general goal of this project is to fully support the html5 video spec and provide a rich interface for creating online rich-media experiences based on html5 video and audio.
This site [metavid.org] makes heavy use of the library. Remote embedding of metavid content also uses the library.

If your site uses this library, please let us know and share your experience, feature requests and bugs on the bug tracker and forums.

HTML5 `<video>` MIME type

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:

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

Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.

Get Project Source Code

MV_Embed 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://svn.wikimedia.org/svnroot/mediawiki/branches/js2-work/phase3/js/mwEmbed/
If you'd like commit access, please submit a request to join this project..