Author: andre Date: 2009-11-17 20:01:59 +0100 (Tue, 17 Nov 2009) New Revision: 39752
Added: openimages/trunk/src/main/webapp/feeds/ Removed: openimages/trunk/src/main/webapp/api/ 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/jquery.oiplayer.js openimages/trunk/src/main/webapp/style/js/play.js.jsp Log: OIP-114 moving api feeds to new url in application Copied: openimages/trunk/src/main/webapp/feeds (from rev 39696, openimages/trunk/src/main/webapp/api) Modified: openimages/trunk/src/main/webapp/player/player.html =================================================================== --- openimages/trunk/src/main/webapp/player/player.html 2009-11-17 17:11:14 UTC (rev 39751) +++ openimages/trunk/src/main/webapp/player/player.html 2009-11-17 19:01:59 UTC (rev 39752) @@ -12,7 +12,6 @@ <script src="../style/js/jquery.oiplayer.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"> @@ -41,49 +40,43 @@ </div> <div class="main-column"> + <h2>Media/audio item</h2> + <audio class="dummy" controls="true" autobuffer="false"> + <img src="../html/bril-groot.png" width="319" height="239" class="preview" /> + <source src="zztop.mp3" type="audio/mpeg" ><!-- leeg voor ie --></source> + <source src="zztop.ogg" type="audio/ogg" ><!-- leeg voor ie --></source> + <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> + </audio> + <h3 class="subtitle">zztop</h3> + <div id="clientcaps"> </div> <h2>Media item</h2> - <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"> - 00:00 - </li> - <li class="screen"> - <a href="#">fullscreen</a> - </li> - <li class="sound"> - <a href="#">sound</a> - </li> - </ul> - --> - </div> + <video controls="false" width="320" height="240" poster="../html/bril-groot.png" autobuffer="false"> + <source src="presto.ogv" type="video/ogg" ><!-- leeg voor ie --></source> + <source src="matrix.mp4" type="video/mp4" ><!-- leeg voor ie --></source> + <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> <h3 class="subtitle">Man met grote bril</h3> <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> + <video controls="false" width="320" height="240" poster="matrix.png" autobuffer="false"> + <source src="matrix.mp4" type="video/mp4"><!-- leeg voor ie --></source> + <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> <h3 class="subtitle">Matrix</h3> Modified: openimages/trunk/src/main/webapp/style/css/player.css =================================================================== --- openimages/trunk/src/main/webapp/style/css/player.css 2009-11-17 17:11:14 UTC (rev 39751) +++ openimages/trunk/src/main/webapp/style/css/player.css 2009-11-17 19:01:59 UTC (rev 39752) @@ -37,33 +37,27 @@ margin: 0 auto; } -div.player +div.oiplayer { + position: relative; + display: block; margin: 0; padding: 0; height: 240px; - margin-bottom: 6px; - position: relative; } -div.oiplayer -{ - margin: 0; - padding: 0; - position: relative; -} - img.preview { margin: 0; padding: 0; position: absolute; - z-index: 99; + z-index: 9; } -div.player audio, #msie_cortadoplayer_oiplayer +div.oiplayer audio, #msie_cortadoplayer_oiplayer { position: absolute; + z-index: 10; bottom: 0; left: 0; width: 320px; Modified: openimages/trunk/src/main/webapp/style/js/jquery.oiplayer.js =================================================================== --- openimages/trunk/src/main/webapp/style/js/jquery.oiplayer.js 2009-11-17 17:11:14 UTC (rev 39751) +++ openimages/trunk/src/main/webapp/style/js/jquery.oiplayer.js 2009-11-17 19:01:59 UTC (rev 39752) @@ -24,65 +24,98 @@ var config = jQuery.extend({ // example configuration server : 'http://localhost', jar : '/player/cortado-ovt-stripped-wm_r38710.jar', - flash : '/player/flowplayer-3.1.1.swf' + flash : '/player/flowplayer-3.1.1.swf', + controls : 'true' }, conf); - - var player = createPlayer(this, config); - // replace tag - $(this).find(player.type).remove(); - $(this).append(player.player); - - var poster = createPoster(this, player); - $(this).prepend(poster); - $(this).append(createControls()); - - /* click play/pause button */ - var self = this; - var timer = $(this).find('ul.controls li.position'); - $(this).find('ul.controls li.play').click(function(ev) { - ev.preventDefault(); - var timer = $(self).find('ul.controls li.position'); - if (player.state == 'pause') { - player.play(); - if ($(self).find('ul.controls li.pause').length == 0) { - $(self).find('ul.controls li.play').addClass('pause'); - } - $.oiplayer.follow(player, timer); - } else if (player.state == 'play') { - player.pause(); - $(self).find('ul.controls li.play').removeClass('pause'); - } else { - if (player.type == 'video') { - $(self).find('img.preview').remove(); - } - player.play(); - if ($(self).find('ul.controls li.pause').length == 0) { - $(self).find('ul.controls li.play').addClass('pause'); - } - $.oiplayer.follow(player, timer); + + var mediatags = $(this).find('video, audio'); + $.each(mediatags, function(i, t) { + alert("t: " + t + " tag: " + t.tagName.toLowerCase() + " nr: " + i); + var sources = $(t).find('source'); + if (sources.length == 0) { + alert("no sources found"); + /* at least this works in MSIE (and other browsers that don't know html5 video or audio ?) */ + sources = $(self).find('source'); } - //console.log("player state: " + player.state); + + var urls = $.map(sources, function(s) { + return $(s).attr('src'); + }); + var types = $.map(sources, function(s) { + return $(s).attr('type'); + }); }); - - /* click preview: play */ - $(this).find('img.preview').click(function(ev) { - ev.preventDefault(); - if (player.type == 'video') { - $(self).find('img.preview').remove(); - } - player.play(); - $.oiplayer.follow(player, timer); - if ($(self).find('ul.controls li.pause').length == 0) { - $(self).find('ul.controls li.play').addClass('pause'); - } - }); - + + $(this).append('<div class="oiplayer" />'); + var div = $(this).find('div.oiplayer'); + + + //var player = createPlayer(tag, config); + + //alert("info: " + player.info + ", myname: " + player.myname); +// if (player.myname != 'flowplayer') { +// $(div).empty(); +// } +// +// var poster = createPoster(this, player); +// $(div).prepend(poster); +// $(div).after(createControls()); +// +// /* click play/pause button */ +// var ctrls = $(div).next('ul.controls'); +// var timer = $(ctrls).find('li.position'); +// $(ctrls).find('li.play').click(function(ev) { +// ev.preventDefault(); +// if (player.state == 'pause') { +// player.play(); +// if ($(ctrls).find('li.pause').length == 0) { +// $(ctrls).find('li.play').addClass('pause'); +// } +// $.oiplayer.follow(player, timer); +// } else if (player.state == 'play') { +// player.pause(); +// $(ctrls).find('li.play').removeClass('pause'); +// } else { +// if (player.type == 'video') { +// $(div).find('img.preview').remove(); +// } +// $(div).append(player.player); +// player.play(); +// if ($(ctrls).find('li.pause').length == 0) { +// $(ctrls).find('li.play').addClass('pause'); +// } +// $.oiplayer.follow(player, timer); +// } +// //console.log("player state: " + player.state); +// }); +// +// /* click preview: play */ +// $(div).find('img.preview').click(function(ev) { +// ev.preventDefault(); +// if (player.type == 'video') { +// $(div).find('img.preview').remove(); +// } +// $(div).append(player.player); +// player.play(); +// $.oiplayer.follow(player, timer); +// if ($(ctrls).find('li.pause').length == 0) { +// $(ctrls).find('li.play').addClass('pause'); +// } +// }); + +/* }); */ }); - + + /* + * Create player + * @param el video or audio element + * @param config configuration + * @return Player + */ function createPlayer(el, config) { var player; - var mediatag = findTag(el); var sources = $(el).find('source'); + //alert("el type: " + el); var types = $.map(sources, function(i) { return $(i).attr('type'); }); @@ -91,36 +124,39 @@ }); if (urls.length == 0) { // no sources in body - urls[0] = $(mediatag).attr('src'); + urls[0] = $(el).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; + + var selectedPlayer = selectPlayer(el, 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 = el.tagName.toLowerCase(); + player.player = el; + 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. + * @param el video or audio element + * @param types mimetypes + * @param urls media links */ - function selectPlayer(tag, types, urls) { + function selectPlayer(el, types, urls) { + //alert("types: " + types); var proposal = new Object(); var probably = canPlayMedia(types, urls); if (probably != undefined) { @@ -141,7 +177,7 @@ proposal.type = "msie_cortado"; proposal.url = probably; } - if (tag.type == 'audio') { // always use cortado on msie + if (el.tagName.toLowerCase() == 'audio') { // always use cortado on msie proposal.type = "msie_cortado"; proposal.url = probably; } @@ -202,7 +238,7 @@ } } } - + function findTag(el) { var o = new Object(); o.type = "video"; @@ -228,7 +264,10 @@ function createPoster(el, player) { var src = player.poster; - if (src == undefined) src = $(el).find('img').attr('src'); + if (src == undefined) { + //console.log("No poster found, trying img.."); + src = $(el).find('img').attr('src'); + } return img = '<img src="' + src + '" alt="" class="preview" width="' + player.width + '" height="' + player.height + '" />'; } @@ -311,6 +350,7 @@ Player.prototype._init = function(el, url, config) { this.url = url; this.poster = $(this.player).attr('poster'); + //console.log("this.poster: " + this.poster); this.autoplay = $(this.player).attr('autoplay'); if (this.autoplay == undefined) this.autoplay = false; this.autobuffer = $(this.player).attr('autobuffer'); @@ -336,6 +376,7 @@ this._init(el, url, config); // just init and pass it along this.url = url; var self = this; + //console.log(this.player); var timer = $(el).find('ul.controls li.position'); this.player.addEventListener("playing", function(ev) { @@ -493,8 +534,8 @@ var flwplayer = config.flash; var duration = (this.duration == undefined ? 0 : Math.round(this.duration)); - $(el).append('<div class="playfp" />'); - var div = $(el).find('div.playfp')[0]; + var div = document.createElement('div'); + $(el).replaceWith(div); this.player = $f(div, { src : flwplayer, width : this.width, height : this.height }, { clip: { url: this.url, Modified: openimages/trunk/src/main/webapp/style/js/play.js.jsp =================================================================== --- openimages/trunk/src/main/webapp/style/js/play.js.jsp 2009-11-17 17:11:14 UTC (rev 39751) +++ openimages/trunk/src/main/webapp/style/js/play.js.jsp 2009-11-17 19:01:59 UTC (rev 39752) @@ -11,8 +11,8 @@ @changes: moved methods to player.js, classes for id's */ -function inititPlayer() { - $('div.oiplayer').oiplayer({ +function initPlayer() { + $('.main-column').oiplayer({ /* 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 */ @@ -21,74 +21,8 @@ }); } -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 */ - 'jar' : '/player/cortado-ovt-stripped-wm_r38710.jar', - 'flash' : '/player/flowplayer-3.1.1.swf' - }; - - var mediaEl = createPlayer(id, config); - if (mediaEl != undefined) { - var img = $('<img src="' + player.poster + '" class="preview" alt="" />'); - if (player.type == 'audio') { - img = $('<img src="' + $('#' + id + ' img').attr('src') + '" class="preview" alt="audio" />'); - } - $('#' + id + ' div.player').empty(); - - $(img).attr("width", player.width); - $(img).attr("height", player.height); - $('#' + id + ' div.player').append(img); - - /* click preview: play */ - $('#' + id + ' img.preview').click(function(ev) { - ev.preventDefault(); - if (player.type == 'video') { - $('#' + id + ' img.preview').remove(); - } - $('#' + id + ' div.player').append(mediaEl); - - player.play(); - followProgress(); - $('#' + id + ' ul.controls li.play').addClass('pause'); - }); - - /* click play/pause button */ - $('#' + id + ' ul.controls li.play').click(function(ev) { - ev.preventDefault(); - if (player.state == 'pause') { - player.play(); - followProgress(); - if ($('#' + id + ' ul.controls li.pause').length == 0) { - $('#' + id + ' ul.controls li.play').addClass('pause'); - } - } else if (player.state == 'play') { - player.pause(); - $('#' + id + ' ul.controls li.play').removeClass('pause'); - } else { - if (player.type == 'video') { - $('#' + id + ' img.preview').remove(); - } - $('#' + id + ' div.player').append(mediaEl); - player.play(); - followProgress(); - if ($('#' + id + ' ul.controls li.pause').length == 0) { - $('#' + id + ' ul.controls li.play').addClass('pause'); - } - } - //console.log("player state: " + player.state); - }); - - } else { - $('#' + id + ' ul.controls').hide(); - } -} - $(document).ready(function() { - //initPlayer('oiplayer'); - inititPlayer(); + initPlayer(); }); </mm:content> _______________________________________________ Cvs mailing list [email protected] http://lists.mmbase.org/mailman/listinfo/cvs
