OIPlayer jQuery plugin

HTML5 audio and video player with fallback to Java and Flash

Storm, by Polygoon-Profilti (producer) / Netherlands Institute for Sound and Vision (curator), is licensed under Creative Commons – Attribution-Share Alike.

This video on Open Images http://www.openimages.eu/media/9728/Storm.
OIPlayer 'attaches' itself to all video and/or audio tags it encounters. Besides the general configuration of the plugin itself, it uses for each individual tag the attributes the respective tag has like poster, width, controls, autoplay etc. Easy implementation:

$(document).ready(function() {
    $('body').oiplayer();   // on all video and audio tags in body
});

Download

Download the most recente version from GitHub.

Features

Plays video as well as audio
Fallback to Flowplayer (mp4, h.264) or Cortado (oga, ogv)
Easy to use and implement
Consistent look between browsers, even with fallback
Multiple different players on a page
Play/pause
Mute/unmute
Full 'screen' (full window really, that is what HTML5 requires)
Dark and white controls, on top or below player
Easily skinnable with css
iOS, iPhone, iPad etc. compatible
Fires events: 'oiplayerplay' and 'oiplayerended' to use f.e. for play statistics

Supported browsers

Safari (v4.0+)
Google Chrome (v5.0+)
Firefox (v3.5+)
Internet Explorer (v6.0+) with Flash or Java installed
And maybe some untested others with HTML5 support, Flash or Java installed

OIPlayer is part of the Open Images Platform which is MMBase based. OIPlayer's most recent sources can be found on GitHub: https://github.com/elfuego/oiplayer. It is licensed under GPL.

How-to

Download and copy the 'oiplayer' directory to your site. Include these Javascript and css files in the head of your html document. Note that the 'flowplayer-3.2.6.min.js' script is only needed for FlowPlayer.

<script src="js/jquery-1.5.1.min.js" type="text/javascript"><!-- help ie --></script>
<script src="plugins/flowplayer-3.2.6.min.js" type="text/javascript"><!-- help ie --></script>
<script src="js/jquery.oiplayer.js" type="text/javascript"><!-- help ie --></script>
<link href="css/oiplayer.css" rel="stylesheet" type="text/css" />

Enable the jQuery plugin on all HTML5 video or audio tags in a page with a body with class 'oiplayerexample'.
```
$(document).ready(function() {
    $('body.oiplayer-example').oiplayer();
});
```
OIPlayer has a fallback mechanism that can be made to work by installing Flowplayer and Cortado. Flowplayer needs the Flash plugin and plays h.264, flv and mp4. Cortado is a Java applet that plays Ogg video and audio (ogv, oga).
- server: web server (msie (or windows java) has issues with finding directories)
- jar: location of Cortado jar
- flash: location of Flowplayer and its files
- controls:
  - Simply 'true' means show controls below player.
  - Value 'top' will add a class of that name and will hide/show controls on top of the player window.
  - Add a css class of your own to edit the appearance of the controls (f.e. 'top dark').
- log: when you specify 'info' some messages are displayed on top of the media playing, 'error' does nothing for now.
These examples point to plugin files on www.openimages.eu and should normally work with our media files.
```
$(document).ready(function() {
    $('body.oiplayer-example').oiplayer({
        server : 'http://www.openimages.eu',
        jar : '/oiplayer/plugins/cortado-ovt-stripped-0.6.0.jar',
        flash : '/oiplayer/plugins/flowplayer-3.2.7.swf',
        controls : 'top',
        log : 'error'
    });
});
```
Especially when OIPlayer needs to fallback to Cortado or Flowplayer, your browser often has no way to detect the duration a media file. Since the html5 media tags have no attributes for duration and starttime you can add that information using two classes on the mediatag. In this case 'oip_ea_duration_101' (length is 101 seconds) and 'oip_ea_start_0' (start at 0 seconds). When you not including these the scrubber will not appear.
```
<video class="oip_ea_duration_101 oip_ea_start_0">
  ... source tags here ...
</video>      
```
Besides these you can identify your player with an unique id f.e. with 'oip_ea_id_myid123', which is registered in 'player.id'. This can be usefull for example to track the number of plays of a media item. OIPlayer fires two events to this effect: 'oiplayerplay' and 'oiplayerended', f.e.:
```
$(document).ready(function() {
    $('div.oiplayer').bind("oiplayerplay", function(ev, player) {
        alert("I started playing: " + player.myname);
    }
}
```
To have OIPlayer detect Java support in MSIE - for playing ogg with Cortado - you need this div somewhere (just once) in your page:
```
<div id="clientcaps">  </div>
```
You may encounter a 'Not allowed' with Cortado since it is often not allowed to play files from different hosts by some browsers. Be sure to copy your files to the host from where your pages are served. Or use the Cortado jar from www.openimages.eu when you are playing movies from there.

Have fun! André van Toly, follow me on twitter.