geschiedenis
Dit is de zoveelste incarnatie van mijn website wie nieuwsgierig is kan de
oudere 'recente' wijzigingen bekijken.
One of the main goals of Open Images was to be as open as possible inluding using the HTML5 video and audio tags to play uploaded video and audio, with a fallback mechanism for less modern browsers. The jQuery plugin OIPlayer is a result of that effort.
OIPlayer uses FlowPlayer - a Flash based player for mp4, flv and h.264 - and Cortado - a Java based player for Ogg (ogv, oga) - as its fallback when a browser does not support HTML5 video or audio. I've included the main controls that Firefox and Safari support and even included a 'fullscreen' (fullwindow really) button.
You will need to include all these files in the head of your html document:
<script src="oiplayer/js/jquery-1.3.2.min.js" type="text/javascript"> </script>
<script src="oiplayer/js/jquery-ui-1.7.2.slider.min.js" type="text/javascript"> </script>
<script src="oiplayer/js/jquery.oiplayer.js" type="text/javascript"> </script>
<link href="css/oiplayer.css" rel="stylesheet" type="text/css" />
The first two Javascripts are jQuery and jQuery UI for the slider, next is OIPlayer and its css styles. You may use jquery-1.4.2.min.js and jquery-ui 1.8.2, it is jQuery 1.4 compatible. After including these, activitating the script on all video and audio tags in your page is very simple and consists of just one jQuery statement.
$(document).ready(function() {
$('body').oiplayer();
});
It activates OIPlayer on all video and audio tags in the body. When you are familiar with jQuery you'll see that any jQuery selector should work.
The fallback mechanisme consists of the Flash player FlowPlayer and the Java applet Cortado. Allmost all browsers support Flash, but Flash can only play some MPEG variants: moste likely flv of course, but also mp4 and h.264 which can be a bit tricky to encode correctly. Cortado plays Ogg media (ogv, oga) , typically encoded with FFmpeg2Theora.
When you need Flash fallback you'll need to include an extra script for FlowPlayer.
<script src="oiplayer/plugins/flowplayer-3.1.4.min.js" type="text/javascript"> </script>
Besides that you need to configure OIPlayer so that it can locate the needed Flash files and Java applet jar. The setup on www.openimages.eu is more or less as follows and normally suffices for playing media located from there.
$(document).ready(function() {
$('body.oiplayer-example').oiplayer({
server : 'http://www.openimages.eu',
jar : '/oiplayer/cortado-ovt-stripped-wm_r38710.jar',
flash : '/oiplayer/plugins/flowplayer-3.1.5.swf',
controls : 'white'
});
});
Especialy Java applets have very restrictive security settings and that is why it is needed to specify the server and the exact path were the applet can be found. When you want to serve Ogg media from your own server you need to have Cortado living somewhere on that server. The applet may even complain that the Javascript is not on the same server, if you haven't placed it there, when it tries to direct its commands at Cortado.
OIPlayer currently has two skins for its controls: white and dark. Both can placed on top of the player or below it. Default, when you don't configure anything it places the white controls beneath the player. Other options are:
I think I like this one most:
$('body').oiplayer({ controls : 'dark top' });
The configuration is translated to css classes upon the div that wraps the controls. Whenever you specify 'top' the controls are placed on top of the player.
Except for the controls it follows the configuration of the video- or audiotag itself. The poster attribute is translated to an image that can be clicked to start playing, height and width are used, as well as preload and autoplay are supported (loop was later added to the specs and I haven't implemented that one yet).
The mediatag relies on the mediasource itself or by way of http headers that are send to the browser to find the length of a mediafile. Allthough the Open Images Platform is correctly configured to do so, I have had quite some difficulties getting to that information when OIPlayer initializes. Currently not all HTML5 browsers are capable of detecting the durations of mediafiles. I made a workaround by putting a special css class on the mediatag.
<video class="oip_ea_duration_149 oip_ea_start_0"
poster="mahnamahna.png"
width="320"
height="240">
<source type="video/ogg; codecs=theora" src="mahnamahna.ogv" />
<source type="video/mp4" src="mahnamahna.mp4" />
</video>
In the above example a specified the duration of 149 seconds with 'oip_ea_duration_149', short for Open Images Platform Extra Attribute Duration. The start time - allthough not yet implemented - a few seconds into the media file can be specified with 'oip_ea_start_0'.
I maintain a how-to page within the Open Images repository. Whenever I think I've made some significant changes I update its equivelant at the website as well http://www.openimages.eu/oiplayer More information may be found there.
2 comments
Hello,
First off thanks for putting together this great plugin. I'm having an issue when displaying many(around 10) players at the same time on google chrome. All the videos seem to be loading at the same time. I've tried messing with the preload attribute, but nothing seems to be helping.
Thank you for using OIPlayer!
Normally you would suspect that just setting preload to 'none' would be sufficient but currently Webkit (Safari and Chrome) completely ignore that attribute and preload anyway. Luckily this is not the case for mobile devices, but on the desktop Webkit developers decided (for you) this would probably make for a better user experience allthough it being contrary to the HTML5 specifications: http://dev.w3.org/html5/spec/Overview.html#attr-media-preload
One could design a workaround in which you only put the video or audio tag in your page when a user requests it by for example clicking a link or its preview. Something like that is demonstrated here http://daringfireball.net/misc/2009/12/user_guide_demos but that would need some extra coding and defies the ease of use of just including OIPlayer.
Dit is de zoveelste incarnatie van mijn website wie nieuwsgierig is kan de
oudere 'recente' wijzigingen bekijken.En ik heb hier een pagina waarop ik nieuwe en oudere versies van my_editors verzamel.