Author: andre
Date: 2009-09-12 23:51:43 +0200 (Sat, 12 Sep 2009)
New Revision: 38567
Modified:
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:
improved support for flowplayer, returns undefined when not loaded, made
classes from controls
Modified: openimages/trunk/src/main/webapp/style/css/player.css
===================================================================
--- openimages/trunk/src/main/webapp/style/css/player.css 2009-09-12
16:48:41 UTC (rev 38566)
+++ openimages/trunk/src/main/webapp/style/css/player.css 2009-09-12
21:51:43 UTC (rev 38567)
@@ -2,7 +2,7 @@
* @author Open Images Platform
* @since May 2009
* @name Stylesheet to style the player
-* @version 0.1
+* @version 0.2
*/
#clientcaps /* used by MSIE Java plugin detection, sigh :-( */
@@ -11,58 +11,58 @@
display: none;
}
-#playercontrols { width: 320px; }
-
-#vplayer
+#oiplayer
{
- display: block;
width: 320px;
- height: 240px;
- margin-bottom: 4px;
+ display: block;
}
-#vplayer img { border: 1px solid #efefef; }
-
-div#playercontrols
+#oiplayer.inavailable
{
- height: 25px;
- margin-bottom: 6px;
- margin: 10px 0;
-}
-div#playercontrols ul
-{
- height: 25px;
- list-style: none;
- display: inline;
- overflow: hidden;
-}
-
-#vplayer.inavailable
-{
font-weight: bold;
+ height: 240px;
font-size: 1.1em;
background-image: url(../images/preview_video.png);
+ margin-bottom: 4px;
}
-#vplayer.inavailable p
+#oiplayer.inavailable p
{
width: 80%;
- padding-top: 90px;
+ padding-top: 100px;
text-align: center;
font-size: 1.4em;
margin: 0 auto;
}
+div.player
+{
+ margin: 0;
+ padding: 0;
+ height: 240px;
+}
-div#playercontrols li
+ul.controls
{
+ width: 320px;
+ height: 25px;
+ margin-bottom: 6px;
+ margin: 10px 0;
+ height: 25px;
+ list-style: none;
+ display: inline;
+ overflow: hidden;
+}
+
+ul.controls li
+{
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
-div#playercontrols a
+ul.controls a
{
float: left;
padding: 25px 0 0 0;
@@ -71,16 +71,16 @@
height /**/: 25px; /* for IE5/Win */
}
-div#playercontrols a:hover { background-position: 0 -25px; }
+ul.controls a:hover { background-position: 0 -25px; }
-div#playercontrols li#play a
+ul.controls li.play a
{
background-image: url(../images/controls-play.png);
width: 21px;
margin-left: 0;
}
-div#playercontrols li#play.pause a
+ul.controls li.play.pause a
{
background-image: url(../images/controls-pause.png);
width: 21px;
@@ -97,7 +97,7 @@
}
*/
-div#playercontrols li#position
+ul.controls li.position
{
width: 24px;
margin: 0 0 0 10px;
@@ -105,14 +105,9 @@
line-height: 2em;
}
-div#playercontrols li.playerinfo
-{
- margin: 0 0 0 10px;
- font-family: Monaco, Courier, monospaced;
- font-size: 0.5em;
-}
+div.playerinfo { font-size: xx-small; }
-div#playercontrols li#sound a
+ul.controls li.sound a
{
background-image: url(../images/controls-soundon.png);
width: 23px;
@@ -121,7 +116,7 @@
margin: 0 4px;
}
-div#playercontrols li#screen a
+ul.controls li.screen a
{
background-image: url(../images/controls-fullscreen.png);
width: 23px;
Modified: openimages/trunk/src/main/webapp/style/js/play.js.jsp
===================================================================
--- openimages/trunk/src/main/webapp/style/js/play.js.jsp 2009-09-12
16:48:41 UTC (rev 38566)
+++ openimages/trunk/src/main/webapp/style/js/play.js.jsp 2009-09-12
21:51:43 UTC (rev 38567)
@@ -5,70 +5,68 @@
/*
Javascript to init the player
@author: André van Toly
- @version: 0.2
- @changes: support for msie
+ @version: 0.3
+ @changes: moved methods to player.js, classes for id's
*/
-function initPlayer() {
- var id = "vplayer";
+function initPlayer(id) {
var config = {
- 'server' : '<mm:url page="/" absolute="true" />', /* msie (or
windows java) has issues with just a dir */
- 'dir' : '${mm:link('/player')}', /* the files (jar, flash) need to
be in this directory */
+ /* 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'
};
- var el = createPlayer(id, config);
- if (el != undefined ) {
- $('#' + id).empty();
-
+ var mediaEl = createPlayer(id, config);
+ if (mediaEl != undefined) {
+ $('#' + id + ' div.player').empty();
var img = $('<img src="' + player.poster + '" class="preview" alt=""
/>');
$(img).attr("width", player.width);
$(img).attr("height", player.height);
- $('#' + id).append(img);
+ $('#' + id + ' div.player').append(img);
/* click preview: play */
$('#' + id + ' img.preview').click(function(ev) {
ev.preventDefault();
- $('#' + id + ' img.preview').hide();
- $('#' + id).append(el);
+ $('#' + id + ' img.preview').remove();
+ $('#' + id + ' div.player').append(mediaEl);
player.play();
followProgress();
-
- $('#playercontrols li#play').addClass('pause');
+ $('#' + id + ' ul.controls li.play').addClass('pause');
});
- $('#playercontrols li#play').click(function(ev) {
+ /* click play/pause button */
+ $('#' + id + ' ul.controls li.play').click(function(ev) {
ev.preventDefault();
if (player.state == 'pause') {
player.play();
followProgress();
- if (! $('#playercontrols #play').is('.pause'))
- $('#playercontrols #play').addClass('pause');
+ if ($('#' + id + ' ul.controls li.pause').length == 0) {
+ $('#' + id + ' ul.controls li.play').addClass('pause');
+ }
} else if (player.state == 'play') {
player.pause();
- if ($('#playercontrols #play').is('.pause'))
- $('#playercontrols #play').removeClass('pause');
+ $('#' + id + ' ul.controls li.play').removeClass('pause');
} else {
- $('#' + id + ' img.preview').hide();
- $('#' + id).append(el);
+ $('#' + id + ' img.preview').remove();
+ $('#' + id + ' div.player').append(mediaEl);
player.play();
followProgress();
-
- if (! $('#playercontrols #play').is('.pause'))
- $('#playercontrols #play').addClass('pause');
+ if ($('#' + id + ' ul.controls li.pause').length == 0) {
+ $('#' + id + ' ul.controls li.play').addClass('pause');
+ }
}
});
- $('#playercontrols li.playerinfo').hide();
-
} else {
- $('#playercontrols').hide();
+ $('#' + id + ' ul.controls').hide();
}
}
$(document).ready(function() {
- initPlayer();
+ initPlayer('oiplayer');
});
</mm:content>
Modified: openimages/trunk/src/main/webapp/style/js/player.js
===================================================================
--- openimages/trunk/src/main/webapp/style/js/player.js 2009-09-12 16:48:41 UTC
(rev 38566)
+++ openimages/trunk/src/main/webapp/style/js/player.js 2009-09-12 21:51:43 UTC
(rev 38567)
@@ -6,7 +6,7 @@
a multitude of players (but defies MSIE ;-):
http://footage.stealthisfilm.com/
@author: André van Toly
- @version: 0.2.1
+ @version: 0.3
@params:
id - id of the element that contains the video-tag
config - configuration parameters
@@ -14,7 +14,7 @@
'jar' : JAR file of Cortado
'flash' : location of flowplayer.swf
- @changes: support for msie and Java applet detection in IE
+ @changes: audio tag, moved some methods, improved FlowPlayer support
*/
var player;
@@ -51,7 +51,7 @@
player = new Player();
}
//console.log("type/url: " + selectedPlayer.type + " / " +
selectedPlayer.url);
- //player.info = "playing: " + selectedPlayer.url + " / " +
selectedPlayer.type;
+ player.info = selectedPlayer.type + ": " + selectedPlayer.url;
return player.init(id, selectedPlayer.url, config);
}
}
@@ -66,6 +66,7 @@
this.player = $('#' + id + ' video:first'); // help ie
}
this.url = url;
+ this.id = id;
/* if (this.urls.length == 0) this.urls[0] = $(this.player).attr('src'); */
this.poster = $(this.player).attr('poster');
if ($(this.player).attr('autoplay') == undefined) { // html5 can just have
<video autoplay />
@@ -73,23 +74,22 @@
} else {
this.autoplay = $(this.player).attr('autoplay');
}
+ if ($(this.player).attr('autobuffer') == undefined) {
+ this.autobuffer = false;
+ } else {
+ this.autobuffer = $(this.player).attr('autobuffer');
+ }
this.width = $(this.player).attr('width');
this.height = $(this.player).attr('height');
this.state = 'init';
return this.player;
}
-Player.prototype.init = function(id, url, config) {
- return this._init(id, url, config);
-}
-Player.prototype.play = function() {
- this.state = 'play';
-}
-Player.prototype.pause = function() {
- this.state = 'pause';
-}
+Player.prototype.init = function(id, url, config) { }
+Player.prototype.play = function() { }
+Player.prototype.pause = function() { }
Player.prototype.position = function() { }
-Player.prototype.info = function() { return "Playing: " + this.url; }
+Player.prototype.info = function() { }
function VideoPlayer() {
this.myname = "videoplayer";
@@ -98,8 +98,6 @@
VideoPlayer.prototype.init = function(id, url, config) {
this._init(id, url, config); // just init and pass it along
this.url = url;
- //console.log("video! " + url + ", img: " + this.poster);
- //this.player.controls = true;
return this.player;
}
VideoPlayer.prototype.play = function() {
@@ -227,29 +225,37 @@
FlowPlayer.prototype = new Player();
FlowPlayer.prototype.init = function(id, url, config) {
this._init(id, url, config);
- //console.log("flash! " + url);
this.url = url;
var flwplayer = config.dir + "/" + config.flash;
- this.player = $f(id, { src : flwplayer }, {
+ var flwcontrols = 'flowplayer.controls-3.1.3.swf';
+
+ /* 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 }, {
clip: {
url: url,
- autoPlay: true,
+ autoPlay: this.autoplay,
// duration: 60,
- autoBuffering: true
+ scaling: 'fit',
+ autoBuffering: this.autobuffer
},
- plugins: { controls: null }
+ plugins: { controls: { height: 24, hideDelay: 2000, fullscreen: false
} }
});
return this.player;
}
FlowPlayer.prototype.play = function() {
- $f(0).play();
+ if (this.player.getState() == 4) {
+ this.player.resume();
+ } else if (this.player.getState() != 3) {
+ this.player.play();
+ }
this.state = 'play';
}
FlowPlayer.prototype.pause = function() {
- $f(0).pause();
+ if (this.player.getState() == 3) this.player.pause();
this.state = 'pause';
}
@@ -277,7 +283,10 @@
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() */
+ /* 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";
@@ -292,7 +301,8 @@
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) {
+ 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";
}
@@ -366,29 +376,39 @@
}
function showInfo() {
- var text = player.info();
- $('#playercontrols li.playerinfo').show();
- $('#playercontrols li.playerinfo').text(text);
+ 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 oldpos;
var pos;
+ var oldpos = -1;
var text = "00:00";
- $('li#position').text(text);
+ var id = player.id;
var progress = function() {
- //showInfo();
- oldpos = pos;
pos = player.position();
- if (pos > 0) {
+ //console.log("oldpos: " + oldpos + ", pos: " + pos)
+ 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);
- $('li#position').text(text);
+ $('#' + 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, 100);
+ if (!isNaN(pos) && pos > 0) oldpos = pos;
}
+
};
progress();
+ showInfo();
+
}
_______________________________________________
Cvs mailing list
[email protected]
http://lists.mmbase.org/mailman/listinfo/cvs
