Author: andre
Date: 2010-06-21 10:31:09 +0200 (Mon, 21 Jun 2010)
New Revision: 42616
Modified:
openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css
openimages/trunk/src/main/webapp/oiplayer/index.html
openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
Log:
redid controls part, mostly styles, added oiplayerended event
Modified: openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css 2010-06-21
07:37:16 UTC (rev 42615)
+++ openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css 2010-06-21
08:31:09 UTC (rev 42616)
@@ -10,7 +10,7 @@
position: relative;
margin: 0;
padding: 0;
- background-color: #000;
+ background-color: #c00;
}
div.oiplayer.fullscreen
@@ -63,12 +63,22 @@
div.oiplayer > div.controls
{
position: absolute;
- bottom: 0;
+ bottom: 10px;
left: 0;
- height: 25px;
+ height: 28px;
+ margin: 0 10px;
+ padding-top: 3px;
+ width: 300px;
+ max-width: 640px;
+ color: #555;
+ background-color: #fff;
+ /* border-radius: 2px;
+ box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); */
+ -webkit-border-radius: 2px;
+ -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
+ -moz-border-radius: 2px;
+ -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
z-index: 19;
- margin: 0;
- padding: 0;
}
div.oiplayer > div.player > audio
@@ -93,22 +103,13 @@
div.oiplayer > div.preview.video { background: url(images/preview_video.png)
left top repeat; }
div.oiplayer > div.preview.audio { background: url(images/preview_audio.png)
left top repeat; }
-div.oiplayer.audio, #msie_cortadoplayer_oiplayer
-{
-/*
- position: absolute;
- bottom: 0;
- left: 0;
- z-index: 8;
-*/
-}
/* controls */
div.oiplayer ul.controls
{
margin: 0;
padding: 0;
- height: 23px;
+ height: 28px;
list-style: none;
display: inline;
overflow: hidden;
@@ -131,169 +132,143 @@
}
div.oiplayer ul.controls a:hover { background-position: 0 -25px; }
+div.oiplayer a { outline: none; }
div.oiplayer ul.controls li.play a
{
background-image: url(images/controls-play.png);
width: 21px;
- margin-left: 2px;
+ margin-left: 6px;
float: left;
}
-div.oiplayer ul.controls li.play.pause a
-{
- background-image: url(images/controls-pause.png);
- width: 21px;
- margin-left: 2px;
- float: left;
-}
+div.oiplayer ul.controls li.play.pause a { background-image:
url(images/controls-pause.png); }
-div.oiplayer ul.controls li.position,
-div.oiplayer ul.controls li.timeleft
-{
- float: left;
- font-family: Monaco, "Courier New", monospaced;
- font-size: 10px;
- line-height: 26px;
- color: #555;
- text-align: right;
- font-weight: normal;
-}
-div.oiplayer ul.controls li.position
-{
- width: 36px;
-}
-div.oiplayer ul.controls li.timeleft
-{
- width: 42px;
-}
-
div.oiplayer ul.controls li.sound a
{
float: right;
background-image: url(images/controls-soundon.png);
background-repeat: no-repeat;
width: 23px;
- margin-right: 5px;
+ margin-right: 7px;
}
-div.oiplayer ul.controls li.sound.muted a
-{
- float: right;
- background-image: url(images/controls-soundoff.png);
- background-repeat: no-repeat;
- width: 23px;
-}
+div.oiplayer ul.controls li.sound.muted a { background-image:
url(images/controls-soundoff.png); }
div.oiplayer ul.controls li.screen a
{
float: right;
background-image: url(images/controls-fullscreen.png);
- background-repeat: no-repeat;
width: 23px;
- margin-right: 5px;
+ margin-right: 7px;
}
-div.oiplayer div.oiplayerinfo
-{
- font-size: xx-small;
- margin-top: 4px;
- padding: 2px;
- background-color: #efffef;
- position: absolute;
- bottom: -24px;
- left: 0;
- z-index: 225;
-}
/* ### slider, jquery-ui etc. ### */
-div.oiplayer div.controls li.slider
+
+div.oiplayer > div.controls li.position > div.time,
+div.oiplayer > div.controls li.position > div.timeleft
{
float: left;
- margin-left: 0px;
+ font-family: Monaco, "Courier New", monospaced;
+ font-size: 10px;
+ line-height: 26px;
+ text-align: center;
+ font-weight: normal;
+}
+
+div.oiplayer ul.controls li.position > div.time
+{
+ width: 40px;
+ margin-right: 2px;
+}
+div.oiplayer ul.controls li.position > div.timeleft
+{
+ width: 46px;
+ margin-left: 4px;
+}
+
+div.oiplayer ul.controls div.sliderwrap
+{
background: url(images/slider11-left.png) left -50px no-repeat;
- padding-left: 9px;
+ width: 110px;
+ float: left;
+ padding-left: 8px;
}
-div.oiplayer div.controls li.slider div.slider div.ui-slider
+div.oiplayer ul.controls div.ui-slider
{
border: 0;
width: 100%;
background: url(images/slider11-long.png) right -25px no-repeat;
- height: 25px;
+ height: 32px;
}
-div.oiplayer div.controls .ui-slider { position: relative; }
-div.oiplayer div.controls .ui-slider-horizontal .ui-slider-handle { top: 0; }
+div.oiplayer ul.controls .ui-slider { position: relative; }
+div.oiplayer ul.controls .ui-slider-horizontal .ui-slider-handle { top: 0; }
-div.oiplayer div.controls .ui-slider .ui-slider-handle
+div.oiplayer ul.controls .ui-slider .ui-slider-handle
{
cursor: pointer;
- height: 25px;
+ height: 32px;
position: absolute;
width: 14px;
z-index: 2;
}
-div.oiplayer div.controls a.ui-slider-handle:hover { background-position: 0
-100px; }
+div.oiplayer ul.controls a.ui-slider-handle:hover { background-position: 0
-100px; }
-div.oiplayer div.controls li.slider div.ui-slider-range
+div.oiplayer ul.controls div.ui-slider-range
{
- height: 25px;
+ height: 32px;
background: url(images/slider11-long.png) right -50px no-repeat;
}
-div.oiplayer div.controls .ui-state-default,
-div.oiplayer .ui-widget-content .ui-state-default
+div.oiplayer ul.controls .ui-state-default,
+div.oiplayer ul.controls .ui-widget-content .ui-state-default
{
border: 0;
background-color: transparent;
background: url(images/slider11-pos.png) left -75px no-repeat;
margin-left: -9px;
}
-div.oiplayer div.controls li.changed a.ui-slider-handle:hover {
background-position: 0 -100px; }
+div.oiplayer ul.controls li.changed a.ui-slider-handle:hover {
background-position: 0 -100px; }
-div.oiplayer div.controls li.changed .ui-state-default,
-div.oiplayer div.controls li.changed .ui-widget-content .ui-state-default {
background: url(images/slider11-pos.png) left -75px no-repeat; }
+div.oiplayer ul.controls li.changed .ui-state-default,
+div.oiplayer ul.controls li.changed .ui-widget-content .ui-state-default {
background: url(images/slider11-pos.png) left -75px no-repeat; }
-div.oiplayer div.controls .ui-state-default:focus,
-div.oiplayer div.controls .ui-widget-content .ui-state-default:focus {
outline: none; }
+div.oiplayer ul.controls .ui-state-default:focus,
+div.oiplayer ul.controls .ui-widget-content .ui-state-default:focus { outline:
none; }
/* top */
div.oiplayer > div.controls.top
{
- background-image: url(images/controls-whitie.png);
+/*
+ background-image: url(images/controls-whitie.png);
background-repeat: repeat;
+*/
}
/* white */
-div.oiplayer > div.controls.white { background-image:
url(images/controls-whitie.png); }
+div.oiplayer > div.controls.white { /*background-image:
url(images/controls-whitie.png);*/ }
/* dark (only possible with top really) */
-div.oiplayer div.controls.dark
+div.oiplayer > div.controls.dark
{
- /*background-image: url(images/controls-blackbg.png);*/
+ color: #efefef;
background-color: #000;
}
-div.oiplayer div.controls.dark li.position,
-div.oiplayer div.controls.dark li.timeleft { color: #fff; }
div.oiplayer div.controls.dark a { background-position: 0 -50px; }
div.oiplayer div.controls.dark a:hover { background-position: 0 0; }
-
-div.oiplayer div.controls.dark li.slider { background:
url(images/slider11-left.png) left -50px no-repeat; }
-div.oiplayer div.controls.dark li.slider div.slider div.ui-slider {
background: url(images/slider11-long.png) right -0px no-repeat; }
-
-div.oiplayer div.controls.dark li.slider div.ui-slider-range { background:
url(images/slider11-long.png) right -50px no-repeat; }
-
+div.oiplayer div.controls.dark div.sliderwrap { background:
url(images/slider11-left.png) left -50px no-repeat; }
+div.oiplayer div.controls.dark div.ui-slider { background:
url(images/slider11-long.png) right -0px no-repeat; }
+div.oiplayer div.controls.dark div.ui-slider-range { background:
url(images/slider11-long.png) right -50px no-repeat; }
div.oiplayer div.controls.dark a.ui-slider-handle { background:
url(images/slider11-pos.png) left -75px no-repeat; }
div.oiplayer div.controls.dark a.ui-slider-handle:hover { background-position:
0 -100px; }
div.oiplayer div.controls.dark li.changed a.ui-slider-handle:hover {
background-position: 0 -100px; }
div.oiplayer div.controls.dark li.changed .ui-state-default,
div.oiplayer div.controls.dark li.changed .ui-widget-content .ui-state-default
{ background-position: left -75px; }
-div.oiplayer > div.controls.top ul.controls li.sound a,
-div.oiplayer > div.controls.top ul.controls li.sound.muted a { margin-right:
8px; }
-
/* ### inavailable / no compatible sources ### */
div.oiplayer.video.inavailable { background: url(images/preview_video.png)
left top repeat; }
div.oiplayer.audio.inavailable { background: url(images/preview_audio.png)
left top repeat; }
@@ -308,6 +283,18 @@
font-weight: bold;
}
+div.oiplayer div.oiplayerinfo
+{
+ font-size: xx-small;
+ margin-top: 4px;
+ padding: 2px;
+ background-color: #efffef;
+ position: absolute;
+ bottom: -24px;
+ left: 0;
+ z-index: 225;
+}
+
/* ### example html ### */
body.oiplayer-example
{
Modified: openimages/trunk/src/main/webapp/oiplayer/index.html
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/index.html 2010-06-21
07:37:16 UTC (rev 42615)
+++ openimages/trunk/src/main/webapp/oiplayer/index.html 2010-06-21
08:31:09 UTC (rev 42616)
@@ -7,8 +7,17 @@
<script src="js/jquery-ui-1.7.2.slider.min.js" type="text/javascript"><!--
help ie --></script>
<script src="plugins/flowplayer-3.1.4.min.js" type="text/javascript"><!--
help ie --></script>
<script src="js/jquery.oiplayer.js" type="text/javascript"><!-- help ie
--></script>
- <script src="js/play.js" type="text/javascript"><!-- help ie --></script>
<link href="css/oiplayer.css" rel="stylesheet" type="text/css" />
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $('body.oiplayer-example').oiplayer({
+ server : 'http://www.openimages.eu', /* msie (or java) has issues
with just a dir */
+ jar : '/oiplayer/cortado-ovt-stripped-wm_r38710.jar',
+ flash : '/oiplayer/plugins/flowplayer-3.1.5.swf',
+ controls : 'top'
+ });
+ });
+ </script>
</head>
<body class="oiplayer-example">
@@ -47,14 +56,20 @@
Fallback to <a href="http://www.flowplayer.org";>Flowplayer</a> (mp4,
h.264)
or <a
href="http://en.wikipedia.org/wiki/Cortado_%28software%29";>Cortado</a> (oga,
ogv)
</li>
- <li>Play/pause button</li>
- <li>Mute/unmute button</li>
- <li>Full 'screen' button (full window really)</li>
+ <li>Easy to use and implement</li>
+ <li>Consistent look between browsers, even with fallback</li>
+ <li>Multiple different players on a page</li>
+ <li>Play/pause</li>
+ <li>Mute/unmute</li>
+ <li>Full 'screen' (full window really)</li>
<li>
- Slider controllable with arrow keys
+ Slider, controllable with arrow keys
(requires <a
href="http://jqueryui.com/demos/slider/";>jquery.ui.slider.js</a>)
</li>
- <li>iPhone compatible (play works, but other controls are of no use).</li>
+ <li>Dark and white controls, on top or below player</li>
+ <li>Easily skinnable with css</li>
+ <li>iPhone (play works, but other controls are of no use) and iPad
compatible</li>
+ <li>Fires events: 'oiplayerplay' and 'oiplayerended'.
</ul>
<h3>Supported browsers</h3>
<ul>
@@ -62,7 +77,7 @@
<li>Google Chrome (v5.0+)</li>
<li>Firefox (v3.5+)</li>
<li>Internet Explorer (v6.0+) with Flash or Java installed</li>
- <li>And maybe some untested others with HTML5 support, Flash or Java
installed</li>
+ <li>And maybe some untested others with HTML5 support, Flash or Java
installed</li>
</ul>
<p>
OIPlayer is part of the <a href="http://www.openimages.eu/source";>Open
Images Platform</a>
@@ -137,6 +152,16 @@
... source tags here ...
</video>
</pre>
+ 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.:
+<pre>
+$(document).ready(function() {
+ $('div.oiplayer').bind("oiplayerplay", function(ev, player) {
+ alert("I started playing: " + player.id);
+ }
+}
+</pre>
</li>
<li>To have MSIE detect Java support you need this div somewhere (just
once) in your page:
<pre><div id="clientcaps"> </div></pre>
Modified: openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
2010-06-21 07:37:16 UTC (rev 42615)
+++ openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
2010-06-21 08:31:09 UTC (rev 42616)
@@ -66,10 +66,8 @@
$(div).width(player.width).height(player.height);
if (config.controls && player.url != undefined) {
- $(div).append(createControls());
+ $(div).append(controlsHtml());
player.ctrls = $(div).find('div.controls');
- $(player.ctrls).width(player.width);
- $(player.ctrls).find('li.slider').width(player.width - 190);
if (config.controls != true) { // we're using classes, append
them
if (player.myname.indexOf('cortado') > -1 || isIphone() ||
isIpad()) { // remove top when not compatible
@@ -79,7 +77,9 @@
$(player.ctrls).addClass(config.controls);
if (config.controls.indexOf('top') > -1) {
player.ctrlspos = 'top';
- $(player.ctrls).hide();
+ if (player.type != 'audio' && player.state != 'init')
{
+ $(player.ctrls).hide();
+ }
} else {
$(div).height( $(div).height() +
$(player.ctrls).height() );
player.ctrlspos = 'bottom';
@@ -104,7 +104,7 @@
ev.preventDefault();
start(pl);
});
-
+
if (config.controls) {
$(pl.ctrls).find('li.play a').click(function(ev) {
ev.preventDefault();
@@ -134,48 +134,31 @@
});
if (pl.duration) { // else no use
- $(pl.ctrls).find("div.slider > div").slider({
- animate: true,
- range: 'min',
- value: (pl.start ? pl.start : 0),
- max: Math.round(pl.duration)
- });
- $(pl.ctrls).find("div.slider > div").bind('slide',
function(ev, ui) {
- pos(pl, ui.value);
- });
- $(pl.ctrls).find("div.slider > div").bind('slidechange',
function(ev, ui) {
- if (ev.originalEvent != undefined &&
ev.originalEvent.type == "mouseup") {
- pos(pl, ui.value);
- }
- });
+ $.oiplayer.slider(pl)
}
// show/hide
- if (pl.ctrlspos == 'top') {
+ if (pl.ctrlspos == 'top' && pl.type != 'audio') {
$(pl.div).hover(
function() {
- $(pl.ctrls).fadeIn();
+ $(pl.ctrls).fadeIn();
},
function() {
- $(pl.ctrls).fadeOut('slow');
+ if (pl.state != 'init') {
+ $(pl.ctrls).fadeOut('slow');
+ }
}
);
}
} // config.controls
+
+ $(pl.div).bind("oiplayerended", function(ev, pl) {
+ $(pl.ctrls).fadeIn('slow');
+ });
+
});
});
- function pos(player, pos) {
- player.seek(pos);
- $(player.ctrls).find('li.position').text( $.oiplayer.totime(pos) );
- $(player.ctrls).find('li.timeleft').text('-' +
$.oiplayer.totime(player.duration - pos) );
- if (pos > 0) {
- $(player.ctrls).find('li.slider').addClass("changed");
- } else {
- $(player.ctrls).find('li.slider').removeClass("changed");
- }
- }
-
/* Mainly user interface stuff on first start of playing */
function start(player) {
if (player.type == 'video') {
@@ -185,7 +168,7 @@
}
player.play();
- $(player.div).trigger("oiplayerstart", [player]);
+ $(player.div).trigger("oiplayerplay", [player]);
if (player.config.controls) {
var timer = $(player.ctrls).find('li.position');
if ($(player.ctrls).find('li.pause').length == 0) {
@@ -219,7 +202,6 @@
document.documentElement.style.overflow = 'hidden';
// new dimensions
- var controls_width = $(player.div).first('div.controls').width();
$(player.div).width('100%').height('100%');
player.width = $(window).width();
if (player.ctrlspos == 'top') {
@@ -227,10 +209,14 @@
} else {
player.height = $(player.div).height() -
$(player.div).find('div.controls').height();
}
+
$(player.player).width(player.width).height(player.height);
+
+ // controls
+ var controls_width = controlsWidth(player);
$(player.div).find('div.controls').css('margin-left', Math.round(
(player.width - controls_width) / 2) + 'px');
- // 'hide' other media players (display:hidden; often disables them)
+ // 'hide' other media players (display:hidden often disables them)
$('div.oiplayer').not('.fullscreen').css('margin-left', '-9999px');
} else {
@@ -242,7 +228,10 @@
player.height = player.oheight;
$(player.player).width(player.width).height(player.height);
- $(player.div).find('div.controls').css('margin-left', '0');
+ // reposition controls
+ controlsWidth(player);
+ $(player.div).find('div.controls').css('margin-left', '');
+
if (player.ctrlspos == 'top') {
$(player.div).width(player.width).height(player.height);
} else {
@@ -421,27 +410,39 @@
}
}
- function createControls() {
+ function controlsHtml() {
var html;
if (isIphone()) {
html = '<div class="controls"><ul class="controls">' +
'<li class="play"><a title="play"
href="#play">play</a></li>' +
- '<li class="position">00:00</li>' +
- '<li class="slider"><div class="slider"><div>
</div></div></li>' +
- '<li class="timeleft">-00:00</li>' +
+ '<li class="position">' +
+ '<div class="time">00:00</div>' +
+ '<div class="sliderwrap"><div class="slider"><div>
</div></div></div>' +
+ '<div class="timeleft">-00:00</div>' +
+ '</li>' +
'</ul></div>';
} else {
html = '<div class="controls"><ul class="controls">' +
'<li class="play"><a title="play"
href="#play">play</a></li>' +
- '<li class="position">00:00</li>' +
- '<li class="slider"><div class="slider"><div>
</div></div></li>' +
- '<li class="timeleft">-00:00</li>' +
+ '<li class="position">' +
+ '<div class="time">00:00</div>' +
+ '<div class="sliderwrap"><div class="slider"><div>
</div></div></div>' +
+ '<div class="timeleft">-00:00</div>' +
+ '</li>' +
'<li class="sound"><a title="mute"
href="#sound">mute</a></li>' +
'<li class="screen"><a title="fullscreen"
href="#fullscreen">fullscreen</a></li>' +
'</ul></div>';
}
return html;
}
+
+ function controlsWidth(player) {
+ var controls_width = player.width - 20;
+ if (controls_width > 620) { controls_width = 620; }
+ $(player.ctrls).width(controls_width);
+ $(player.ctrls).find('div.sliderwrap').width(controls_width - 190);
+ return controls_width;
+ }
/*
* Returns attributes and values hidden in classes of an element, f.e.
oip_ea_attr_value
@@ -497,24 +498,27 @@
//sec = Math.floor(pos);
//console.log("n: " + now + ", s: " + sec + ", pos: " + pos);
if (!isNaN(pos) && pos > 0 && pos != now) {
- $(player.ctrls).find('li.position').text(
$.oiplayer.totime(pos) );
$(player.ctrls).find('div.slider > div').slider('option',
'value', pos);
- $(player.ctrls).find('li.slider').addClass('changed');
+ $(player.ctrls).find('li.position').addClass('changed');
//console.log("left: " + left);
if (player.duration > 0) {
left = player.duration - pos;
- $(player.ctrls).find('li.timeleft').text("-" +
$.oiplayer.totime(left));
+ $(player.ctrls).find('div.timeleft').text("-" +
$.oiplayer.totime(left));
}
+ $(player.ctrls).find('div.time').text(
$.oiplayer.totime(pos) );
i = 0;
now = pos;
}
- if (pos < 1) {
$(player.ctrls).find('li.slider').removeClass('changed'); }
+ if (pos < 1) {
$(player.ctrls).find('li.position').removeClass('changed'); }
if (now == pos) { i++; }
- if (i > 9) {
- //console.log("stopped after " + (i * 0.2) + " seconds.");
- player.pause(); // maybe stop?
+ if (i > 4) {
+ //console.log("stopped after " + (i * 0.5) + " seconds.");
+ if (pos >= player.duration && player.state != 'ended') {
+ player.state = 'ended';
+ $(player.div).trigger("oiplayerended", [player]);
+ }
clearInterval(progress);
return;
}
@@ -522,6 +526,40 @@
},
/*
+ * Add slider aka scrobbler
+ */
+ slider: function(player) {
+ $(player.ctrls).find("div.slider > div").slider({
+ animate: true,
+ range: 'min',
+ value: (player.start ? player.start : 0),
+ max: Math.round(player.duration)
+ });
+ $(player.ctrls).find("div.slider > div").bind('slide', function(ev,
ui) {
+ $.oiplayer.position(player, ui.value);
+ });
+ $(player.ctrls).find("div.slider > div").bind('slidechange',
function(ev, ui) {
+ if (ev.originalEvent != undefined && ev.originalEvent.type ==
"mouseup") {
+ $.oiplayer.position(player, ui.value);
+ }
+ });
+ },
+
+ /*
+ * Updates slider position
+ */
+ position: function(player, pos) {
+ player.seek(pos);
+ $(player.ctrls).find('div.time').text( $.oiplayer.totime(pos) );
+ $(player.ctrls).find('div.timeleft').text('-' +
$.oiplayer.totime(player.duration - pos) );
+ if (pos > 0) {
+ $(player.ctrls).find('li.position').addClass("changed");
+ } else {
+ $(player.ctrls).find('li.position').removeClass("changed");
+ }
+ },
+
+ /*
* Returns div player is wrapped in
*/
div: function(player) {
@@ -541,7 +579,7 @@
},
/*
- * Returns time left formatted as 00:00
+ * Returns time formatted as 00:00
*/
totime: function (pos) {
function toTime(sec) {
@@ -598,7 +636,7 @@
this.width = $(this.player).attr('width') > 0 ?
parseInt($(this.player).attr('width')) : 320;
this.height = $(this.player).attr('height') > 0 ?
parseInt($(this.player).attr('height')) : 240;
this.state = 'init';
- this.pos = 0;
+ //this.pos = 0;
//return this.player;
}
@@ -614,10 +652,10 @@
var self = this;
this.player.addEventListener("durationchange",
function(ev) {
- //console.log("durationchange: " + self.player.duration);
- /* bug in FF 3.5? still NaN after durationchange */
if (!isNaN(self.player.duration) && self.player.duration > 0) {
self.duration = self.player.duration;
+ $.oiplayer.msg(self, "found duration: " + self.duration);
+ $.oiplayer.slider(self);
}
}, false);
this.player.addEventListener("playing",
@@ -641,7 +679,10 @@
}, false);
this.player.addEventListener("ended",
function(ev) {
- self.state = 'ended';
+ if (self.state != 'ended') {
+ self.state = 'ended';
+ $(self.div).trigger("oiplayerended", [self]);
+ }
$(self.div).find('li.play').removeClass('pause');
}, false);
}
@@ -741,9 +782,13 @@
this.pos = this.player.getPlayPosition();
this.player.doPause();
this.state = 'pause';
-// try {
-// this.player.doStop();
-// } catch(err) { }
+ if (this.player.position() >= this.duration) {
+ this.state = 'ended';
+ $(this.div).trigger("oiplayerended", [this]);
+ try {
+ this.player.doStop();
+ } catch(err) { }
+ }
}
CortadoPlayer.prototype.mute = function() {
$.oiplayer.msg(this, "Sorry. Cortado currently does not support changing
volume with Javascript.");
@@ -860,8 +905,11 @@
self.state = 'play';
});
clip.onFinish(function() {
+ if (self.state != 'ended') {
+ self.state = 'ended';
+ $(self.div).trigger("oiplayerended", [self]);
+ }
$(self.div).find('li.play').removeClass('pause');
- self.state = 'ended';
});
}
return this.player;
_______________________________________________
Cvs mailing list
Cvs@lists.mmbase.org
http://lists.mmbase.org/mailman/listinfo/cvs
