Author: andre Date: 2009-11-13 13:46:17 +0100 (Fri, 13 Nov 2009) New Revision: 39679
Modified: openimages/trunk/src/main/webapp/player/player.html openimages/trunk/src/main/webapp/style/css/player.css openimages/trunk/src/main/webapp/style/js/play.js.jsp openimages/trunk/src/main/webapp/style/js/player.js Log: basic rewrite of mainly player.js to a true(?) jQuery plugin, still need to readapt the jspx's in oip to make use of it (see player.html) and still need to re-implement the poster/overlay image Modified: openimages/trunk/src/main/webapp/player/player.html =================================================================== --- openimages/trunk/src/main/webapp/player/player.html 2009-11-13 10:37:34 UTC (rev 39678) +++ openimages/trunk/src/main/webapp/player/player.html 2009-11-13 12:46:17 UTC (rev 39679) @@ -3,15 +3,16 @@ <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="nl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>De man met de grote bril : Media - Open Beelden</title> + <title>Testpagina : Media - Open Beelden</title> <link href="../style/css/main.css" rel="stylesheet" type="text/css" /> <link href="../style/images/favicon.ico" rel="shortcut icon" /> <script src="../mmbase/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../style/js/main.js.jsp" type="text/javascript"><!-- help ie --></script> - <script type="text/javascript" src="flowplayer-3.1.1.min.js"><!-- help ie --></script> + <script type="text/javascript" src="flowplayer-3.1.4.min.js"><!-- help ie --></script> <script src="../style/js/player.js" type="text/javascript"><!-- help ie --></script> <script src="../style/js/play.js.jsp" type="text/javascript"><!-- help ie --></script> <link href="../style/css/player.css" rel="stylesheet" type="text/css" /> + </head> <body class="media-item"> <div id="header"> @@ -40,21 +41,21 @@ </div> <div class="main-column"> + <div id="clientcaps"> </div> <h2>Media item</h2> - <div id="oiplayer"> - <div class="player"> - <video controls="false" width="320" height="240" poster="../html/bril-groot.png" autobuffer="false"> - <!-- <source src="http://www.toly.net/downloads-oip/presto2.mp4"; type="video/mp4" /> --> - <!-- <source src="presto.ogv" type="video/ogg" /> --> - <source src="matrix.mp4" type="video/mp4" /> - <p> - Your need a browser that understands the html5 video tag to play this media item. - Firefox 3.1 nightly builds, Opera experimental builds and Safari (with XiphQT for Ogg) - installed can understand the video tag with varying degrees of success. - </p> - </video> - </div> + <div class="oiplayer"> + <video controls="false" width="320" height="240" poster="../html/bril-groot.png" autobuffer="false"> + <!-- <source src="http://www.toly.net/downloads-oip/presto2.mp4"; type="video/mp4" /> --> + <source src="presto.ogv" type="video/ogg" /> + <source src="matrix.mp4" type="video/mp4" /> + <p> + Your need a browser that understands the html5 video tag to play this media item. + Firefox 3.1 nightly builds, Opera experimental builds and Safari (with XiphQT for Ogg) + installed can understand the video tag with varying degrees of success. + </p> + </video> +<!-- <ul class="controls"> <li class="play"><a href="#">play</a></li> <li class="position"> @@ -67,10 +68,23 @@ <a href="#">sound</a> </li> </ul> + --> </div> <h3 class="subtitle">Man met grote bril</h3> - <h4>Collectie Beeld en Geluid</h4> + + <h2>Media item</h2> + <div class="oiplayer"> + <video controls="false" width="320" height="240" poster="matrix.png" autobuffer="false"> + <source src="matrix.mp4" type="video/mp4" /> + <p> + Your need a browser that understands the html5 video tag to play this media item. + Firefox 3.1 nightly builds, Opera experimental builds and Safari (with XiphQT for Ogg) + installed can understand the video tag with varying degrees of success. + </p> + </video> + </div> + <h3 class="subtitle">Matrix</h3> </div> Modified: openimages/trunk/src/main/webapp/style/css/player.css =================================================================== --- openimages/trunk/src/main/webapp/style/css/player.css 2009-11-13 10:37:34 UTC (rev 39678) +++ openimages/trunk/src/main/webapp/style/css/player.css 2009-11-13 12:46:17 UTC (rev 39679) @@ -46,6 +46,20 @@ position: relative; } +div.oiplayer +{ + margin: 0; + padding: 0; + position: relative; +} + +img.preview +{ + margin: 0; + padding: 0; + position: absolute; +} + div.player audio, #msie_cortadoplayer_oiplayer { position: absolute; Modified: openimages/trunk/src/main/webapp/style/js/play.js.jsp =================================================================== --- openimages/trunk/src/main/webapp/style/js/play.js.jsp 2009-11-13 10:37:34 UTC (rev 39678) +++ openimages/trunk/src/main/webapp/style/js/play.js.jsp 2009-11-13 12:46:17 UTC (rev 39679) @@ -11,14 +11,23 @@ @changes: moved methods to player.js, classes for id's */ +function inititPlayer() { + $('div.oiplayer').oipPlayer({ + /* msie (or windows java) has issues with just a dir */ + 'server' : '<mm:url page="/" absolute="true" />', + /* the files (jar, flash) need to be in this directory */ + 'jar' : '${mm:link('/player/cortado-ovt-stripped-wm_r38710.jar')}', + 'flash' : '${mm:link('/player/flowplayer-3.1.1.swf')}' + }); +} + function initPlayer(id) { var config = { /* msie (or windows java) has issues with just a dir */ 'server' : '<mm:url page="/" absolute="true" />', /* the files (jar, flash) need to be in this directory */ - 'dir' : '${mm:link('/player')}', - 'jar' : 'cortado-ovt-stripped-wm_r38710.jar', - 'flash' : 'flowplayer-3.1.1.swf' + 'jar' : '/player/cortado-ovt-stripped-wm_r38710.jar', + 'flash' : '/player/flowplayer-3.1.1.swf' }; var mediaEl = createPlayer(id, config); @@ -78,7 +87,8 @@ } $(document).ready(function() { - initPlayer('oiplayer'); + //initPlayer('oiplayer'); + inititPlayer(); }); </mm:content> Modified: openimages/trunk/src/main/webapp/style/js/player.js =================================================================== --- openimages/trunk/src/main/webapp/style/js/player.js 2009-11-13 10:37:34 UTC (rev 39678) +++ openimages/trunk/src/main/webapp/style/js/player.js 2009-11-13 12:46:17 UTC (rev 39679) @@ -6,80 +6,309 @@ a multitude of players (but defies MSIE ;-) http://footage.stealthisfilm.com/ @author: André van Toly - @version: 0.3 + @version: 0.4 @params: id - id of the element that contains the video-tag config - configuration parameters - 'dir' : directory the plugins live in + 'server' : server url (think only for ie) 'jar' : JAR file of Cortado 'flash' : location of flowplayer.swf - @changes: trying to support the audio tag some more (with thanks to Cannoball Adderley) + @changes: jQuery plugin */ -var player; +jQuery.fn.oipPlayer = function(conf) { + return this.each(function() { + var self = this; + var config = jQuery.extend({ // example configuration + server : 'http://localhost', + jar : '/player/cortado-ovt-stripped-wm_r38710.jar', + flash : '/player/flowplayer-3.1.1.swf' + }, conf); + + var mediatag = findTag(this); + var player = createPlayer(this, config); + //console.log("player state hier: " + player.state); + //console.log(player); -function createPlayer(id, config) { - var mediatag = findMediatag(id); - var sources = $('#' + id).find('source'); - var types = $.map(sources, function(i) { - return $(i).attr('type'); + $(this).find(player.type).remove(); + $(this).append(player.player); + + var poster = createPoster(this, mediatag, config); + //$(this).prepend(poster); + $(this).append(createControls()); + + /* click play/pause button */ + var self = this; + $(this).find('ul.controls li.play').click(function(ev) { + ev.preventDefault(); + var timer = $(self).find('ul.controls li.position'); + if (player.state == 'pause') { + //console.log("1: play"); + player.play(); + if ($(self).find('ul.controls li.pause').length == 0) { + $(self).find('ul.controls li.play').addClass('pause'); + } + followProgress(player, timer); + } else if (player.state == 'play') { + //console.log("2: pause"); + player.pause(); + $(self).find('ul.controls li.play').removeClass('pause'); + } else { + //console.log("3: play"); + if (mediatag.type == 'video') { + $(self).find('img.preview').remove(); + } + //$(this).append(player); + player.play(); + if ($(self).find('ul.controls li.pause').length == 0) { + $(self).find('ul.controls li.play').addClass('pause'); + } + followProgress(player, timer); + } + //console.log("player state: " + player.state); + }); + }); - var urls = $.map(sources, function(i) { - return $(i).attr('src'); - }); + + function createPlayer(el, config) { + var player; + var mediatag = findTag(el); + var sources = $(el).find('source'); + var types = $.map(sources, function(i) { + return $(i).attr('type'); + }); + var urls = $.map(sources, function(i) { + return $(i).attr('src'); + }); + + if (urls.length == 0) { // no sources in body + urls[0] = $(mediatag).attr('src'); + types[0] = "unknown"; // TODO ? + } + if (mediatag != undefined) { + var selectedPlayer = selectPlayer(mediatag, types, urls); + if (selectedPlayer.type == 'media') { + player = new MediaPlayer(); + } else if (selectedPlayer.type == 'cortado') { + player = new CortadoPlayer(); + } else if (selectedPlayer.type == 'msie_cortado') { + player = new MSCortadoPlayer(); + } else if (selectedPlayer.type == 'flash') { + player = new FlowPlayer(); + } else { + player = new Player(); + } + player.type = mediatag.type; // previous .type is of no interest any more + player.player = mediatag.element; + player.url = selectedPlayer.url; + player.info = selectedPlayer.type + ":" + selectedPlayer.url; + player.init(el, selectedPlayer.url, config); + return player; + } + } + + /* + Selects which player to use and returns a proposal.type and proposal.url. + Adapt this to change the prefered order, here the order is: video, cortado, msie_cortado flash. + */ + function selectPlayer(tag, types, urls) { + var proposal = new Object(); + var probably = canPlayMedia(types, urls); + if (probably != undefined) { + proposal.type = "media"; + proposal.url = probably; + return proposal; // optimization + } + if (proposal.type == undefined) { + probably = canPlayCortado(types, urls); + if (probably != undefined && (supportMimetype('application/x-java-applet') || navigator.javaEnabled())) { + if ($.browser.msie) { // Argh! A browser check! + /* IE always reports true on navigator.javaEnabled(), + that's why we need to check for the java plugin IE style. + It needs an element with id 'clientcaps' somewhere in the page. + */ + var javaVersionIE = clientcaps.getComponentVersion("{08B0E5C0-4FCB-11CF-AAA5-00401C608500}", "ComponentID"); + if (javaVersionIE) { + proposal.type = "msie_cortado"; + proposal.url = probably; + } + if (tag.type == 'audio') { // always use cortado on msie + proposal.type = "msie_cortado"; + proposal.url = probably; + } + } else { + proposal.type = "cortado"; + proposal.url = probably; + } + } + } + if (proposal.type == undefined) { + var flash_url; + for (var i = 0; i < types.length; i++) { + if (types[i].indexOf("video/mp4") > -1 || types[i].indexOf("video/flv") > -1 + /* || types[i].indexOf("video/mpeg") > -1 */ ) { + proposal.url = urls[i]; + proposal.type = "flash"; + } + } + } + alert("proposal: " + proposal.type); + return proposal; + } + + /* + * Returns ogg url it expects to be able to play + */ + function canPlayCortado(types, urls) { + var url; + for (var i = 0; i < types.length; i++) { + if (types[i].indexOf("video/ogg") > -1 || + types[i].indexOf("audio/ogg") > -1 || + types[i].indexOf("application/ogg") > -1 || + types[i].indexOf("application/x-ogg") > -1) { + url = urls[i]; + break; + } + } + return url; + } + + /* + * Returns url it expects to be able to play + */ + function canPlayMedia(types, urls) { + //var probably; + var vEl = document.createElement("video"); + var aEl = document.createElement("audio"); + if (vEl.canPlayType || aEl.canPlayType) { + for (var i = 0; i < types.length; i++) { + /* + http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#dom-navigator-canplaytype + Firefox 3.5 is very strict about this and does not return 'probably', but does on 'maybe'. + */ + if (vEl.canPlayType( types[i] ) == "probably" || aEl.canPlayType( types[i] ) == "probably") { + return urls[i]; // this is the best we can do + } + if (vEl.canPlayType( types[i] ) == "maybe" || aEl.canPlayType( types[i] ) == "maybe") { + return urls[i]; // if we find nothing better + } + } + } + } + + function findTag(el, conf) { + var o = new Object(); + o.type = "video"; + o.element = $(el).find('video')[0]; + if (o.element == undefined) { + o.type = "audio"; + o.element = $(el).find('audio')[0]; + } + return o; + } + + function supportMimetype(mt) { + var support = false; /* navigator.mimeTypes is unsupported by MSIE ! */ + if (navigator.mimeTypes && navigator.mimeTypes.length > 0) { + for (var i = 0; i < navigator.mimeTypes.length; i++) { + if (navigator.mimeTypes[i].type.indexOf(mt) > -1) { + support = true; + } + } + } + return support; + } - if (urls.length == 0) { - urls[0] = $(mediatag).attr('src'); - types[0] = "unknown"; + function createPoster(el, mediatag, config) { + var src = $(mediatag.element).attr('poster'); + if (src == undefined) src = $(el).find('img').attr('src'); + return img = '<img src="' + src + '" alt="" class="preview" width="' + config.width + '" height="' + config.height + '" />'; } - - if (mediatag != undefined) { - var selectedPlayer = selectPlayer(mediatag, types, urls); - if (selectedPlayer.type == 'media') { - player = new MediaPlayer(); - } else if (selectedPlayer.type == 'cortado') { - player = new CortadoPlayer(); - } else if (selectedPlayer.type == 'msie_cortado') { - player = new MSCortadoPlayer(); - } else if (selectedPlayer.type == 'flash') { - player = new FlowPlayer(); - } else { - player = new Player(); + + function createControls() { + var html = '<ul class="controls">' + + '<li class="play"><a href="#play">play</a></li>' + + '<li class="position">00:00</li>' + + '</ul>'; + return html; + } + + function showInfo() { + var text = player.info; + var id = player.id; + if ($('#' + id).find('div.playerinfo').length > 0) $('#' + id).find('div.playerinfo').remove(); + $('#' + id).append('<div class="playerinfo">' + text + '</div>'); + } + + + /* + * Updates the provided html element with progress time of player + * @param player Object of player + * @param el HTML element + */ + function followProgress(player, el) { + var pos; + $(el).text("just starting.."); + var progress = null; + clearInterval(progress); + progres = setInterval(function() { + pos = player.position(); + if (!isNaN(pos) && pos > 0) { + $(el).text(toTime(pos)); + } + if (pos == undefined) { + //console.log("pos undef"); + clearInterval(progress); + return; + } + }, 200); + } + + function toTime(sec) { + var h = Math.floor(sec / 3600); + var min = Math.floor(sec / 60); + var sec = Math.floor(sec - (min * 60)); + if (h >= 1) { + min -= h * 60; + return addZero(h) + ":" + addZero(min) + ":" + addZero(sec); } - player.info = selectedPlayer.type + ": " + selectedPlayer.url; - //console.log(player.info); - return player.init(id, selectedPlayer.url, config); + return addZero(min) + ":" + addZero(sec); } -} + + function addZero(time) { + time = parseInt(time, 10); + return time < 10 ? "0" + time : time; + } + + return this; // plugin convention +}; + +// ------------------------------------------------------------------------------------------------ +// Prototypes of several players +// ------------------------------------------------------------------------------------------------ + function Player() { this.myname = "super"; } -Player.prototype._init = function(id, url, config) { - var mediatag = findMediatag(id); - this.player = mediatag.element; - this.type = mediatag.type; +Player.prototype.init = function(el, url, config) { } +Player.prototype.play = function() { } +Player.prototype.pause = function() { } +Player.prototype.position = function() { } +Player.prototype.info = function() { } + +Player.prototype._init = function(el, url, config) { this.url = url; - this.id = id; - /* if (this.urls.length == 0) this.urls[0] = $(this.player).attr('src'); */ + this.mediatype = this.type; this.poster = $(this.player).attr('poster'); - if ($(this.player).attr('autoplay') == undefined) { // html5 can just have <video autoplay /> - this.autoplay = false; - } else { - this.autoplay = true; - } - if ($(this.player).attr('autobuffer') == undefined) { - this.autobuffer = false; - } else { - this.autobuffer = true; - } - if ($(this.player).attr('controls') == undefined) { - this.controls = false; - } else { - this.controls = true; - } + this.autoplay = $(this.player).attr('autoplay'); + if (this.autoplay == undefined) this.autoplay = false; + this.autobuffer = $(this.player).attr('autobuffer'); + if (this.autobuffer == undefined) this.autobuffer = false; + this.controls = $(this.player).attr('controls'); + if (this.controls == undefined) this.controls = false; this.width = $(this.player).attr('width'); this.height = $(this.player).attr('height'); if (this.width == undefined) this.width = $("head meta[name=media-width]").attr("content"); @@ -87,33 +316,31 @@ this.duration = $("head meta[name=media-duration]").attr("content"); // not a mediatag attr. this.state = 'init'; this.pos = 0; + return this.player; } -Player.prototype.init = function(id, url, config) { } -Player.prototype.play = function() { } -Player.prototype.pause = function() { } -Player.prototype.position = function() { } -Player.prototype.info = function() { } - function MediaPlayer() { this.myname = "mediaplayer"; } MediaPlayer.prototype = new Player(); -MediaPlayer.prototype.init = function(id, url, config) { - this._init(id, url, config); // just init and pass it along +MediaPlayer.prototype.init = function(el, url, config) { + this._init(el, url, config); // just init and pass it along this.url = url; var self = this; this.player.addEventListener("playing", function(ev) { self.state = 'play'; - followProgress(); + //followProgress(); }, false); + //console.log("MediaPlayer:"); + //console.log(this.player); return this.player; } MediaPlayer.prototype.play = function() { //this.player.autoplay = true; + //console.log("MediaPlayer starts to play..."); this.player.play(); this.state = 'play'; } @@ -144,10 +371,10 @@ this.myname = "cortadoplayer"; } CortadoPlayer.prototype = new Player(); -CortadoPlayer.prototype.init = function(id, url, config) { - this._init(id, url, config); +CortadoPlayer.prototype.init = function(el, url, config) { + this._init(el, url, config); this.url = url; - var jar = config.dir + "/" + config.jar; + var jar = config.jar; var usevideo = true; var useheight = this.height; if (this.type == 'audio') { @@ -198,7 +425,6 @@ } this.state = 'play'; } - CortadoPlayer.prototype.pause = function() { this.pos = this.player.getPlayPosition(); this.player.doPause(); @@ -222,7 +448,7 @@ MSCortadoPlayer.prototype.init = function(id, url, config) { this._init(id, url, config); /* msie (or windows java) can only load an applet from the root of a site, not a directory or context */ - var jar = config.server + config.dir + "/" + config.jar; + var jar = config.server + config.jar; var usevideo = true; var useheight = this.height; if (this.type == 'audio') { @@ -260,14 +486,14 @@ this.myname = "flowplayer"; } FlowPlayer.prototype = new Player(); -FlowPlayer.prototype.init = function(id, url, config) { - this._init(id, url, config); - var flwplayer = config.dir + "/" + config.flash; +FlowPlayer.prototype.init = function(el, url, config) { + this._init(el, url, config); + var flwplayer = config.flash; var duration = (this.duration == undefined ? 0 : this.duration); - - /* flowplayer replaces everything in the geven element */ - var el = $('#' + id).find('div.player')[0]; - this.player = $f(el, { src : flwplayer, width : this.width, height : this.height }, { + + $(el).append('<div class="playfp" />'); + var div = $(el).find('div.playfp')[0]; + this.player = $f(div, { src : flwplayer, width : this.width, height : this.height }, { clip: { url: this.url, autoPlay: this.autoplay, @@ -278,11 +504,12 @@ }, plugins: { controls: { height: 24, autoHide: 'always', hideDelay: 2000, fullscreen: false } } }); - + //console.log("FlowPlayer:"); + //console.log(this.player); return this.player; } - FlowPlayer.prototype.play = function() { + //console.log("FlowPlayer starts to play..."); if (this.player.getState() == 4) { this.player.resume(); } else if (this.player.getState() != 3) { @@ -290,169 +517,16 @@ } this.state = 'play'; } - FlowPlayer.prototype.pause = function() { if (this.player.getState() == 3) this.player.pause(); this.state = 'pause'; } - FlowPlayer.prototype.position = function() { this.pos = this.player.getTime(); return this.pos; } - FlowPlayer.prototype.info = function() { //return "Playing: " + this.url; } -/* - Selects which player to use and returns a proposal.type and proposal.url. - Adapt this to change the prefered order, here the order is: video, cortado, msie_cortado flash. -*/ -function selectPlayer(tag, types, urls) { - var proposal = new Object(); - var probably = canPlayMedia(types, urls); - if (probably != undefined) { - proposal.type = "media"; - proposal.url = probably; - return proposal; // optimization - } - - if (proposal.type == undefined) { - probably = canPlayCortado(types, urls); - if (probably != undefined && (supportMimetype('application/x-java-applet') || navigator.javaEnabled())) { - if ($.browser.msie) { // Argh! A browser check! - /* IE always reports true on navigator.javaEnabled(), - that's why we need to check for the java plugin IE style. - It needs an element with id 'clientcaps' somewhere in the page. - */ - var javaVersionIE = clientcaps.getComponentVersion("{08B0E5C0-4FCB-11CF-AAA5-00401C608500}", "ComponentID"); - if (javaVersionIE) { - proposal.type = "msie_cortado"; - proposal.url = probably; - } - if (tag.type == 'audio') { // always use cortado on msie - proposal.type = "msie_cortado"; - proposal.url = probably; - } - } else { - proposal.type = "cortado"; - proposal.url = probably; - } - } - } - if (proposal.type == undefined) { - var flash_url; - for (var i = 0; i < types.length; i++) { - if (types[i].indexOf("video/mp4") > -1 || types[i].indexOf("video/flv") > -1 - /* || types[i].indexOf("video/mpeg") > -1 */ ) { - proposal.url = urls[i]; - proposal.type = "flash"; - } - } - } - return proposal; -} -/* - * Returns Ogg url it expects to be able to play -*/ -function canPlayCortado(types, urls) { - var url; - for (var i = 0; i < types.length; i++) { - if (types[i].indexOf("video/ogg") > -1 || - types[i].indexOf("audio/ogg") > -1 || - types[i].indexOf("application/ogg") > -1 || - types[i].indexOf("application/x-ogg") > -1) { - url = urls[i]; - break; - } - } - return url; -} - -/* - * Returns url it expects to be able to play -*/ -function canPlayMedia(types, urls) { - //var probably; - var vEl = document.createElement("video"); - var aEl = document.createElement("audio"); - if (vEl.canPlayType || aEl.canPlayType) { - for (var i = 0; i < types.length; i++) { - /* - http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#dom-navigator-canplaytype - Firefox 3.5 is very strict about this and does not return 'probably', but does on 'maybe'. - */ - if (vEl.canPlayType( types[i] ) == "probably" || aEl.canPlayType( types[i] ) == "probably") { - return urls[i]; // this is the best we can do - } - if (vEl.canPlayType( types[i] ) == "maybe" || aEl.canPlayType( types[i] ) == "maybe") { - return urls[i]; // if we find nothing better - } - } - } -} - -function findMediatag(id) { - var mediatag = new Object(); - mediatag.type = "video"; - mediatag.element = $('#' + id).find('video')[0]; - if (mediatag.element == undefined) { - mediatag.type = "audio"; - mediatag.element = $('#' + id).find('audio')[0]; - } - return mediatag; -} - -function supportMimetype(mt) { - var support = false; /* navigator.mimeTypes is unsupported by MSIE ! */ - if (navigator.mimeTypes && navigator.mimeTypes.length > 0) { - for (var i = 0; i < navigator.mimeTypes.length; i++) { - if (navigator.mimeTypes[i].type.indexOf(mt) > -1) { - support = true; - } - } - } - return support; -} - -function showInfo() { - var text = player.info; - var id = player.id; - if ($('#' + id).find('div.playerinfo').length > 0) $('#' + id).find('div.playerinfo').remove(); - $('#' + id).append('<div class="playerinfo">' + text + '</div>'); -} - -function followProgress() { - var pos; - var oldpos = -1; - var text = "00:00"; - var id = player.id; - var progress = function() { - pos = player.position(); - //console.log("oldpos: " + oldpos + ", pos: " + pos + " state: " + player.state) - if (!isNaN(pos) && pos > 0) { - var min = Math.floor(pos / 60); - var sec = Math.floor(pos - (min * 60)); - text = (min < 10 ? '0' + min : min) + ":" + (sec < 10 ? '0' + sec : sec); - $('#' + id + ' ul.controls li.position').text(text); - - if (oldpos == pos) { - player.state = 'pause'; - $('#' + id + ' ul.controls li.play').removeClass('pause'); - } - } - - if (player.state == "play") { - setTimeout(progress, 200); - if (!isNaN(pos) && pos > 0) oldpos = pos; - if ($('#' + id + ' ul.controls li.pause').length == 0) { - $('#' + id + ' ul.controls li.play').addClass('pause'); - } - } - - }; - progress(); - //showInfo(); -} _______________________________________________ Cvs mailing list [email protected] http://lists.mmbase.org/mailman/listinfo/cvs
