Author: andre
Date: 2009-11-17 22:47:16 +0100 (Tue, 17 Nov 2009)
New Revision: 39754
Modified:
openimages/trunk/src/main/webapp/player/player.html
openimages/trunk/src/main/webapp/style/js/jquery.oiplayer.js
openimages/trunk/src/main/webapp/style/js/play.js.jsp
Log:
fixes .oiplayer(); issue, except for MSIE need something clever for that, can
add one mediatag per element for MSIE though that works
Modified: openimages/trunk/src/main/webapp/player/player.html
===================================================================
--- openimages/trunk/src/main/webapp/player/player.html 2009-11-17 20:01:24 UTC
(rev 39753)
+++ openimages/trunk/src/main/webapp/player/player.html 2009-11-17 21:47:16 UTC
(rev 39754)
@@ -56,15 +56,17 @@
<div id="clientcaps"> </div>
<h2>Media item</h2>
- <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>
+ <div class="sometest">
+ <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>
+ </div>
<h3 class="subtitle">Man met grote bril</h3>
Modified: openimages/trunk/src/main/webapp/style/js/jquery.oiplayer.js
===================================================================
--- openimages/trunk/src/main/webapp/style/js/jquery.oiplayer.js
2009-11-17 20:01:24 UTC (rev 39753)
+++ openimages/trunk/src/main/webapp/style/js/jquery.oiplayer.js
2009-11-17 21:47:16 UTC (rev 39754)
@@ -22,7 +22,7 @@
return this.each(function() {
var self = this;
var config = jQuery.extend({ // example configuration
- server : 'http://localhost',
+ server : 'http://www.openimages.eu',
jar : '/player/cortado-ovt-stripped-wm_r38710.jar',
flash : '/player/flowplayer-3.1.1.swf',
controls : 'true'
@@ -30,80 +30,72 @@
var mediatags = $(this).find('video, audio');
$.each(mediatags, function(i, t) {
- alert("t: " + t + " tag: " + t.tagName.toLowerCase() + " nr: " +
i);
+ //console.log("t: " + t + " tag: " + t.tagName.toLowerCase() + "
nr: " + i);
var sources = $(t).find('source');
if (sources.length == 0) {
- alert("no sources found");
+ alert("no sources found in mediatag, will use first
available");
/* at least this works in MSIE (and other browsers that don't
know html5 video or audio ?) */
sources = $(self).find('source');
}
- var urls = $.map(sources, function(s) {
- return $(s).attr('src');
- });
- var types = $.map(sources, function(s) {
- return $(s).attr('type');
- });
- });
+ $(t).wrap('<div class="oiplayer"></div>');
+ var div = $(t).parent('div.oiplayer');
+ var player = createPlayer(t, sources, config);
+ //console.log("info: " + player.info);
- $(this).append('<div class="oiplayer" />');
- var div = $(this).find('div.oiplayer');
+ $(div).css("border", "2px solid #c00")
+ if (player.myname != 'flowplayer') {
+ $(div).html(player.player);
+ }
-
- //var player = createPlayer(tag, config);
+ var poster = createPoster(this, player);
+ $(div).prepend(poster);
+ $(div).after(createControls());
- //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');
-// }
-// });
+ /* 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');
+ }
+ });
+
+ });
+
});
/*
@@ -112,10 +104,9 @@
* @param config configuration
* @return Player
*/
- function createPlayer(el, config) {
+ function createPlayer(el, sources, config) {
var player;
- var sources = $(el).find('source');
- //alert("el type: " + el);
+
var types = $.map(sources, function(i) {
return $(i).attr('type');
});
@@ -304,7 +295,7 @@
var pos = player.duration;
var progress = null;
clearInterval(progress);
- progres = setInterval(function() {
+ progress = setInterval(function() {
pos = player.position();
if (!isNaN(pos) && pos > 0) {
$(el).text(toTime(pos));
@@ -534,8 +525,8 @@
var flwplayer = config.flash;
var duration = (this.duration == undefined ? 0 :
Math.round(this.duration));
- var div = document.createElement('div');
- $(el).replaceWith(div);
+ var div = document.createElement('div'); // adding flowplayer and
returning it impossible without id
+ $(el).parent('div.oiplayer').html(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
20:01:24 UTC (rev 39753)
+++ openimages/trunk/src/main/webapp/style/js/play.js.jsp 2009-11-17
21:47:16 UTC (rev 39754)
@@ -12,7 +12,7 @@
*/
function initPlayer() {
- $('.main-column').oiplayer({
+ $('.sometest').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 */
_______________________________________________
Cvs mailing list
[email protected]
http://lists.mmbase.org/mailman/listinfo/cvs
