Author: andre
Date: 2010-03-31 17:14:04 +0200 (Wed, 31 Mar 2010)
New Revision: 41707
Modified:
openimages/trunk/src/main/webapp/oiplayer/css/images/controls-fullscreen.png
openimages/trunk/src/main/webapp/oiplayer/css/images/controls-pause.png
openimages/trunk/src/main/webapp/oiplayer/css/images/controls-play.png
openimages/trunk/src/main/webapp/oiplayer/css/images/controls-soundoff.png
openimages/trunk/src/main/webapp/oiplayer/css/images/controls-soundon.png
openimages/trunk/src/main/webapp/oiplayer/css/images/slider11-pos.png
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:
css controls, made white top default, tested for iphone
Modified:
openimages/trunk/src/main/webapp/oiplayer/css/images/controls-fullscreen.png
===================================================================
(Binary files differ)
Modified:
openimages/trunk/src/main/webapp/oiplayer/css/images/controls-pause.png
===================================================================
(Binary files differ)
Modified: openimages/trunk/src/main/webapp/oiplayer/css/images/controls-play.png
===================================================================
(Binary files differ)
Modified:
openimages/trunk/src/main/webapp/oiplayer/css/images/controls-soundoff.png
===================================================================
(Binary files differ)
Modified:
openimages/trunk/src/main/webapp/oiplayer/css/images/controls-soundon.png
===================================================================
(Binary files differ)
Modified: openimages/trunk/src/main/webapp/oiplayer/css/images/slider11-pos.png
===================================================================
(Binary files differ)
Modified: openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css 2010-03-31
12:53:33 UTC (rev 41706)
+++ openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css 2010-03-31
15:14:04 UTC (rev 41707)
@@ -14,52 +14,48 @@
div.oiplayer
{
- /*width: 320px;*/
position: relative;
+ /*height: 270px;*/ /* player 240 + controls 25 + margin 5 (set in
jquery.oiplayer.js) */
}
-div.oiplayer > div.player,
-div.oiplayer > div.player > object
+div.oiplayer > div.player
{
- margin: 0;
- padding: 0;
-}
-div.oiplayer.audio > div.player
-{
+ z-index: 9;
position: absolute;
top: 0;
left: 0;
- z-index: 9;
+ /*height: 240px;*/ /* needed for audio controls at bottom (set
in jquery.oiplayer.js) */
}
-div.oiplayer.audio > div.player > audio
+
+div.oiplayer > div.controls
{
+ height: 25px;
+ margin: 0;
+ z-index: 19;
position: absolute;
bottom: 0;
left: 0;
- width: 100%;
}
-div.oiplayer > div.controls
+div.oiplayer.audio > div.player > audio
{
- height: 24px;
- margin: 4px 0 0 0;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%; /* not sure about this */
}
-div.oiplayer > div.controls.top
+div.oiplayer > .preview
{
- position: absolute;
- bottom: 0;
- z-index: 19;
- background-image: url(images/controls-blackbg.png);
- background-repeat: repeat;
- height: 30px;
- padding-top: 4px;
- margin: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 11;
+ cursor: pointer;
}
-div.oiplayer > div.controls.top.white { background-image:
url(images/controls-whitie.png); }
-
-div.oiplayer > .preview { cursor: pointer; }
-div.oiplayer > img.preview { display: block; }
+div.oiplayer > img.preview { }
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; }
@@ -73,29 +69,12 @@
*/
}
-div.oiplayer > div.inavailable
-{
- font-weight: bold;
- height: 240px;
- font-size: 1.1em;
- background-image: url(images/preview_video.png);
-}
-
-div.inavailable p
-{
- width: 80%;
- padding-top: 100px;
- text-align: center;
- font-size: 1.4em;
- margin: 0 auto;
-}
-
/* controls */
div.oiplayer ul.controls
{
margin: 0;
padding: 0;
- height: 25px;
+ height: 23px;
list-style: none;
display: inline;
overflow: hidden;
@@ -111,15 +90,13 @@
div.oiplayer ul.controls a
{
- padding: 25px 0 0 0;
+ padding: 23px 0 0 0;
overflow: hidden;
height: 0 !important;
- height /**/: 25px; /* for IE5/Win */
+ height /**/: 23px; /* for IE5/Win */
}
-div.oiplayer div.controls ul.controls a:hover,
-div.oiplayer div.controls.top.white ul.controls a:hover { background-position:
0 -25px; }
-div.oiplayer div.controls.top ul.controls a:hover { background-position: 0
-49px; }
+div.oiplayer ul.controls a:hover { background-position: 0 -25px; }
div.oiplayer ul.controls li.play a
{
@@ -183,36 +160,29 @@
margin-left: 7px;
}
-div.oiplayer ul.controls li.position
+div.oiplayer ul.controls li.position,
+div.oiplayer ul.controls li.timeleft
{
font-family: Monaco, Courier, monospaced;
font-size: 12px;
line-height: 26px;
color: #555;
- margin-left: 7px;
+ margin-left: 0;
float: left;
width: 63px;
text-align: center;
}
-div.oiplayer div.top ul.controls li.position { color: #efefef; }
-div.oiplayer div.top.white ul.controls li.position { color: #555; }
-
-/* ### jquery-ui and slider ### */
-div.oiplayer ul.controls li.slider
+/* ### slider, jquery-ui etc. ### */
+div.oiplayer div.controls li.slider
{
float: left;
margin-left: 7px;
- background: url(images/slider11-left.png) left -25px no-repeat;
- padding-left: 10px;
+ background: url(images/slider11-left.png) left -50px no-repeat;
+ padding-left: 9px;
}
-div.oiplayer ul.controls li.slider.changed { background:
url(images/slider11-left.png) left -50px no-repeat; }
-div.oiplayer div.top.white ul.controls li.slider.changed { background:
url(images/slider11-left.png) left -50px no-repeat; }
-div.oiplayer div.top ul.controls li.slider { background:
url(images/slider11-left.png) left top no-repeat; }
-div.oiplayer div.top.white ul.controls li.slider { background:
url(images/slider11-left.png) left -50px no-repeat; }
-div.oiplayer div.top.white ul.controls li.slider { background:
url(images/slider11-left.png) left -25px no-repeat; }
-div.oiplayer ul.controls li.slider div.slider div.ui-slider
+div.oiplayer div.controls li.slider div.slider div.ui-slider
{
border: 0;
width: 100%;
@@ -220,44 +190,70 @@
height: 25px;
}
-div.oiplayer .ui-slider { position: relative; }
+div.oiplayer div.controls .ui-slider { position: relative; }
+div.oiplayer div.controls .ui-slider-horizontal .ui-slider-handle { top: 0; }
-div.oiplayer .ui-slider-horizontal .ui-slider-handle { top: 0; }
-
-div.oiplayer .ui-slider .ui-slider-handle
+div.oiplayer div.controls .ui-slider .ui-slider-handle
{
cursor: pointer;
height: 25px;
position: absolute;
- width: 13px;
+ width: 14px;
z-index: 2;
}
+div.oiplayer div.controls a.ui-slider-handle:hover { background-position: 0
-100px; }
-div.oiplayer li.slider div.ui-slider-range
+div.oiplayer div.controls li.slider div.ui-slider-range
{
height: 25px;
background: url(images/slider11-long.png) right -50px no-repeat;
}
-div.oiplayer div.top li.slider div.ui-slider-range
+
+div.oiplayer div.controls .ui-state-default,
+div.oiplayer .ui-widget-content .ui-state-default
{
- background: url(images/slider11-long.png) right top no-repeat;
-}
-div.oiplayer div.top.white li.slider div.ui-slider-range
-{
- background: url(images/slider11-long.png) right -50px no-repeat;
-}
-div.oiplayer .ui-state-default, div.oiplayer .ui-widget-content
.ui-state-default
-{
border: 0;
background-color: transparent;
background: url(images/slider11-pos.png) left -75px no-repeat;
- margin-left: -10px;
+ margin-left: -9px;
}
-div.oiplayer div.controls ul.controls a.ui-slider-handle:hover {
background-position: 0 -100px; }
-div.oiplayer div.controls.top ul.controls a.ui-slider-handle:hover {
background-position: 0 -100px; }
+div.oiplayer div.controls li.changed a.ui-slider-handle:hover {
background-position: 0 -100px; }
-.ui-state-default:focus, .ui-widget-content .ui-state-default:focus { outline:
none; }
+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 div.controls .ui-state-default:focus,
+div.oiplayer div.controls .ui-widget-content .ui-state-default:focus {
outline: none; }
+
+/* top */
+div.oiplayer > div.controls.top
+{
+ background-image: url(images/controls-whitie.png);
+ background-repeat: repeat;
+}
+
+/* white */
+div.oiplayer > div.controls.white { background-image:
url(images/controls-whitie.png); }
+
+/* dark (only possible with top really) */
+div.oiplayer div.controls.dark { background-image:
url(images/controls-blackbg.png); }
+div.oiplayer div.controls.dark li.position { color: #efefef; }
+
+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 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; }
+
+
/* fullscreen */
div.oiplayer.fullscreen
{
@@ -274,6 +270,20 @@
div.oiplayer.fullscreen > div.player { margin: 0 auto; }
div.oiplayer.fullscreen > div.controls { margin: 0 auto; }
+/* 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; }
+div.oiplayer.inavailable div.player { display: none; }
+div.oiplayer.inavailable p
+{
+ width: 80%;
+ text-align: center;
+ font-size: 1.4em;
+ margin: 0 auto;
+ padding-top: 32%;
+ font-weight: bold;
+}
+
/* ### example html ### */
body.oiplayer-example
{
Modified: openimages/trunk/src/main/webapp/oiplayer/index.html
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/index.html 2010-03-31
12:53:33 UTC (rev 41706)
+++ openimages/trunk/src/main/webapp/oiplayer/index.html 2010-03-31
15:14:04 UTC (rev 41707)
@@ -53,6 +53,7 @@
Slider controllable with arrow keys
(requires <a
href="http://jqueryui.com/demos/slider/";>jquery.ui.slider.js</a>)
</li>
+ <li>iPhone compatible (without controls).
</ul>
<h3>Supported browsers</h3>
<ul>
Modified: openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
2010-03-31 12:53:33 UTC (rev 41706)
+++ openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js
2010-03-31 15:14:04 UTC (rev 41707)
@@ -14,7 +14,8 @@
* MSIE bug (!) : currently I could find no way to makes this plugin behave
correctly in MSIE on multiple
* mediatags in one go. You will have to wrap each mediatag in a div or some
other element and feed it
* to the plugin.
- *
+ *
+ * Uses these parameters and/or the audio/video tag attributes like height,
width, poster etc.
* @params:
* id - id of the element that contains the media tag
* config - configuration parameters
@@ -26,7 +27,7 @@
Value 'top' will add a css class of that name and will
hide/show controls on top of the player window.
Add a css class of your own to edit the appearance of
the controls (f.e. 'top dark').
*
- * @changes: added seek, fullscreen and mute, more control over appearance of
controls
+ * @changes: iphone compatibility
* @version: '$Id$'
*/
@@ -53,34 +54,39 @@
$(mt).wrap('<div class="oiplayer"><div
class="player"></div></div>');
var div = $(mt).closest('div.oiplayer');
var player = createPlayer(mt, sources, config);
-
$(div).width(player.width).height(player.height).addClass(player.type);
+ $(div).addClass(player.type);
if (player.myname.indexOf('cortado') > -1) {
$(div).find('div.player').empty();
$(div).find('div.player').append(player.player);
}
- $(div).find('div.player').hide();
var poster = createPoster(div, player);
$(div).prepend(poster);
- if ($.browser.msie) {
+ //if ($.browser.msie) {
//$('p.oiplayer-warn').hide(); // MSIE places stuff partly
outside mediatag
- }
+ //}
- if (config.controls) {
+ $(div).width(player.width).height(player.height);
+ if (config.controls && player.url != undefined) {
$(div).append(createControls());
- if (config.controls != true) {
-
$(div).find('div.controls').width(player.width).addClass(config.controls);
- $(div).find('li.slider').width(player.width -
182).addClass(config.controls);
+ $(div).find('div.controls').width(player.width);
+ $(div).find('li.slider').width(player.width - 182);
+ if (config.controls != true) { // append classes
+ $(div).find('div.controls').addClass(config.controls);
if (config.controls.indexOf('top') > -1) {
- $(div).find('div.controls').addClass('top');
$(div).find('div.controls').hide();
- $(div).height(player.height);
} else {
- //$(div).height(player.height + 25);
+ $(div).height(player.height + 30);
}
+ } else {
+ $(div).height(player.height + 30);
}
}
+ if (player.url == undefined) { // no compatible sources to play
+ $(div).addClass('inavailable');
+ $(div).append('<p>No compatible source found to play.</p>');
+ }
//$.oiplayer.msg(player, player.info);
players.push(player);
@@ -145,7 +151,7 @@
if ($(el).find('div.controls').is('.top')) {
$(el).hover(
function() {
- $(el).find('div.controls').fadeIn();
+ $(el).find('div.controls').fadeIn();
},
function() {
$(el).find('div.controls').fadeOut('slow');
@@ -173,12 +179,13 @@
function start(player) {
var div = $.oiplayer.div(player);
if (player.type == 'video') {
- $(div).find('.preview').remove();
+ $(div).find('.preview').hide();
} else {
- //$(div).find('.preview').css("z-index", "1");
+ $(div).find('.preview').css("z-index", "1");
}
-
$(div).find('div.player').show().height(player.height).width(player.width);
+
player.play();
+
if (player.config.controls) {
var ctrls = $(div).find('ul.controls');
var timer = $(ctrls).find('li.position');
@@ -199,12 +206,15 @@
var window_w = $(window).width();
var window_h = $(window).height();
if (! $(div).find('div.controls').is('.top')) {
- window_h = window_h - 35;
+ window_h = window_h - 30;
}
var multi_w = window_w / player.owidth;
var multi_h = window_h / player.oheight;
var half = 0;
if (player.width != player.owidth) {
+ var h = player.oheight;
+ if (! $(div).find('div.controls').is('.top')) { h = h + 30; }
+ $(div).width(player.owidth).height(h);
player.width = player.owidth;
player.height = player.oheight;
} else if (multi_h < multi_w) {
@@ -218,7 +228,7 @@
player.height = Math.round(player.oheight * multi_w);
}
- $(div).toggleClass('fullscreen').width('100%').height('100%');
+ $(div).toggleClass('fullscreen');
$(player.player).width(player.width).height(player.height);
if ($(div).is('.fullscreen')) {
@@ -280,6 +290,7 @@
player = new FlowPlayer();
} else {
player = new Player();
+ player.type = "none";
}
if (eas.duration != null) {
player.duration = eas.duration;
@@ -369,10 +380,6 @@
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
}
@@ -397,15 +404,16 @@
function createPoster(el, player) {
var src = player.poster;
- if (!src && player.type == 'audio') { // for audio-tags (no attribute
poster)
+ if (!src && player.type == 'audio') { // for audio-tags (no attribute
poster but image inside audio-tag)
var img = $(el).find('img')[0];
src = $(img).attr('src');
$(img).remove();
}
if (!src) {
- return '<div class="preview ' + player.type + '" style="width:' +
player.width + 'px;height:' + player.height + 'px;"></div>'
+ //return '<div class="preview ' + player.type + '" style="width:'
+ player.width + 'px;height:' + player.height + 'px;"></div>'
+ return "";
} else {
- return '<img class="preview" src="' + src + '" width="' +
player.width + '" height="' + player.height + '" alt="click to play"
title="click to play" />';
+ return '<img class="preview ' + player.type + '" src="' + src + '"
width="' + player.width + '" height="' + player.height + '" alt="click to play"
title="click to play" />';
}
}
@@ -494,7 +502,6 @@
},
msg: function(player, msg) {
- //$( $.oiplayer.div(player) ).append('<div class="oiplayerinfo">' +
msg + '</div>');
$('<div class="oiplayerinfo"></div>').text(msg).hide().appendTo(
$.oiplayer.div(player) ).fadeIn();
},
@@ -530,7 +537,9 @@
function Player() {
this.myname = "super";
}
-Player.prototype.init = function(el, url, config) { }
+Player.prototype.init = function(el, url, config) {
+ this._init(el, url, config);
+}
Player.prototype.mute = function() { }
Player.prototype.play = function() { }
Player.prototype.pause = function() { }
@@ -551,7 +560,7 @@
this.controls = $(this.player).attr('controls');
if (this.controls == undefined) this.controls = false;
this.width = $(this.player).attr('width') > 0 ?
$(this.player).attr('width') : 320;
- this.height = $(this.player).attr('height') > 0 ?
$(this.player).attr('height') : 240;;
+ this.height = $(this.player).attr('height') > 0 ?
$(this.player).attr('height') : 240;
this.state = 'init';
this.pos = 0;
@@ -563,7 +572,7 @@
}
MediaPlayer.prototype = new Player();
MediaPlayer.prototype.init = function(el, url, config) {
- this._init(el, url, config); // just init and pass it along
+ this._init(el, url, config);
this.url = url;
if (config.controls) {
var self = this;
_______________________________________________
Cvs mailing list
[email protected]
http://lists.mmbase.org/mailman/listinfo/cvs
