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

Features

Supported browsers

OIPlayer is part of the Open Images Platform which is MMBase based and its most recent sources can be found in our SVN repository: http://scm.mmbase.org/view/openimages/trunk/src/main/webapp/oiplayer/. It is licensed under GPL.

How-to

  1. 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" />
    
  2. 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();
    });
    
  3. 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: current possible values and combintions are 'true', 'top', 'white', 'dark', 'top dark' and 'top white'.
      • Simply 'true' means show controls below player,
      • 'top' will add a class of that name and will hide/show controls on top of the player window,
      • and 'white' and 'dark' refer to light or dark styled versions which both can be used below or on top of your video.
      • Or add a css class of your own to edit the appearance of the controls.
    • 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'
        });
    });
    
  4. 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);
        }
    }
    
  5. 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>
  6. 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.