--- a/src/js/init.js Wed Jun 27 19:03:18 2012 +0200
+++ b/src/js/init.js Wed Jun 27 19:03:37 2012 +0200
@@ -129,6 +129,9 @@
}
IriSP.Metadataplayer.prototype.onVideoDataLoaded = function() {
+
+ /* Getting video URL from metadata if it's not in the player config options */
+
if (typeof this.videoData !== "undefined" && typeof this.config.player.video === "undefined") {
var _media;
@@ -164,7 +167,129 @@
}
}
- this.configurePopcorn();
+
+ if (typeof this.config.player.video === "string" && this.config.player.url_transform === "function") {
+ this.config.player.video = this.config.player.url_transform(this.config.player.video);
+ }
+
+ var _pop,
+ _divs = this.layoutDivs("video",this.config.player.height || undefined),
+ containerDiv = _divs[0],
+ spacerDiv = _divs[1],
+ _this = this,
+ _types = {
+ "html5" : /\.(ogg|ogv|webm)$/,
+ "youtube" : /^(https?:\/\/)?(www\.)?youtube\.com/,
+ "dailymotion" : /^(https?:\/\/)?(www\.)?dailymotion\.com/
+ };
+
+ if (this.config.player.type === "auto") {
+ this.config.player.type = "jwplayer";
+ IriSP._(_types).each(function(_v, _k) {
+ if (_v.test(_this.config.player.video)) {
+ _this.config.player.type = _k
+ }
+ });
+ }
+
+ switch(this.config.player.type) {
+ case "html5":
+ var _tmpId = Popcorn.guid("video"),
+ _videoEl = IriSP.jQuery('<video>');
+
+ _videoEl.attr({
+ "src" : this.config.player.video,
+ "id" : _tmpId
+ })
+
+ if(this.config.player.hasOwnProperty("width")) {
+ _videoEl.attr("width", this.config.player.width);
+ }
+ if(this.config.player.hasOwnProperty("height")) {
+ _videoEl.attr("height", this.config.player.height);
+ }
+ IriSP.jQuery("#" + containerDiv).append(_videoEl);
+ _pop = Popcorn("#" + _tmpId);
+ break;
+
+ case "html5-audio":
+ var _tmpId = Popcorn.guid("audio"),
+ _videoEl = IriSP.jQuery('<audio>');
+
+ _videoEl.attr({
+ "src" : this.config.player.video,
+ "id" : _tmpId
+ })
+
+ if(this.config.player.hasOwnProperty("width")) {
+ _videoEl.attr("width", this.config.player.width);
+ }
+ if(this.config.player.hasOwnProperty("height")) {
+ _videoEl.attr("height", this.config.player.height);
+ }
+ IriSP.jQuery("#" + containerDiv).append(_videoEl);
+ _pop = Popcorn("#" + _tmpId);
+ break;
+
+ case "jwplayer":
+ var opts = IriSP.jQuery.extend({}, this.config.player);
+ delete opts.container;
+ delete opts.type;
+ opts.file = opts.video;
+ delete opts.video;
+
+ if(!opts.hasOwnProperty("flashplayer")) {
+ opts.flashplayer = IriSP.getLib("jwPlayerSWF");
+ }
+
+ if(!opts.hasOwnProperty("controlbar.position")) {
+ opts["controlbar.position"] = "none";
+ }
+ _pop = new IriSP.PopcornReplacement.jwplayer("#" + containerDiv, opts);
+ break;
+
+ case "youtube":
+ // Popcorn.youtube wants us to specify the size of the player in the style attribute of its container div.
+ IriSP.jQuery("#" + containerDiv).css({
+ width : this.config.player.width + "px",
+ height : this.config.player.height + "px"
+ });
+ var _urlparts = this.config.player.video.split(/[?&]/),
+ _params = {};
+ for (var _j = 1; _j < _urlparts.length; _j++) {
+ var _ppart = _urlparts[_j].split('=');
+ _params[_ppart[0]] = decodeURIComponent(_ppart[1]);
+ }
+ _params.controls = 0;
+ _params.modestbranding = 1;
+ _url = _urlparts[0] + '?' + IriSP.jQuery.param(_params);
+ _pop = Popcorn.youtube("#" + containerDiv, _url);
+ break;
+
+ case "dailymotion":
+ _pop = new IriSP.PopcornReplacement.dailymotion("#" + containerDiv, this.config.player);
+ break;
+
+ case "mashup":
+ _pop = new IriSP.PopcornReplacement.mashup("#" + containerDiv, this.config.player);
+ break;
+
+ case "allocine":
+ _pop = new IriSP.PopcornReplacement.allocine("#" + containerDiv, this.config.player);
+ break;
+
+ case "mashup-html":
+ _pop = new IriSP.PopcornReplacement.htmlMashup("#" + containerDiv, this.config.player, this.videoData);
+ break;
+
+ default:
+ _pop = undefined;
+ };
+
+ this.popcorn = _pop;
+
+ /* Now Loading Widgets */
+
this.widgets = [];
var _this = this;
for(var i = 0; i < this.config.gui.widgets.length; i++) {
@@ -201,130 +326,6 @@
}
}
-IriSP.Metadataplayer.prototype.configurePopcorn = function() {
- IriSP.log("IriSP.Metadataplayer.prototype.configurePopcorn");
- var pop,
- ret = this.layoutDivs("video",this.config.player.height || undefined),
- containerDiv = ret[0],
- spacerDiv = ret[1],
- _this = this,
- _types = {
- "html5" : /\.(ogg|ogv|webm)$/,
- "youtube" : /^(https?:\/\/)?(www\.)?youtube\.com/,
- "dailymotion" : /^(https?:\/\/)?(www\.)?dailymotion\.com/
- };
-
- if (this.config.player.type === "auto") {
- this.config.player.type = "jwplayer";
- IriSP._(_types).each(function(_v, _k) {
- if (_v.test(_this.config.player.video)) {
- _this.config.player.type = _k
- }
- });
- }
-
- switch(this.config.player.type) {
- /*
- todo : dynamically create the div/video tag which
- will contain the video.
- */
- case "html5":
- var _tmpId = Popcorn.guid("video"),
- _videoEl = IriSP.jQuery('<video>');
-
- _videoEl.attr({
- "src" : this.config.player.video,
- "id" : _tmpId
- })
-
- if(this.config.player.hasOwnProperty("width")) {
- _videoEl.attr("width", this.config.player.width);
- }
- if(this.config.player.hasOwnProperty("height")) {
- _videoEl.attr("height", this.config.player.height);
- }
- IriSP.jQuery("#" + containerDiv).append(_videoEl);
- pop = Popcorn("#" + _tmpId);
- break;
-
- case "html5-audio":
- var _tmpId = Popcorn.guid("audio"),
- _videoEl = IriSP.jQuery('<audio>');
-
- _videoEl.attr({
- "src" : this.config.player.video,
- "id" : _tmpId
- })
-
- if(this.config.player.hasOwnProperty("width")) {
- _videoEl.attr("width", this.config.player.width);
- }
- if(this.config.player.hasOwnProperty("height")) {
- _videoEl.attr("height", this.config.player.height);
- }
- IriSP.jQuery("#" + containerDiv).append(_videoEl);
- pop = Popcorn("#" + _tmpId);
- break;
-
- case "jwplayer":
- var opts = IriSP.jQuery.extend({}, this.config.player);
- delete opts.container;
- delete opts.type;
- opts.file = opts.video;
- delete opts.video;
-
- if(!opts.hasOwnProperty("flashplayer")) {
- opts.flashplayer = IriSP.getLib("jwPlayerSWF");
- }
-
- if(!opts.hasOwnProperty("controlbar.position")) {
- opts["controlbar.position"] = "none";
- }
- pop = new IriSP.PopcornReplacement.jwplayer("#" + containerDiv, opts);
- break;
-
- case "youtube":
- // Popcorn.youtube wants us to specify the size of the player in the style attribute of its container div.
- IriSP.jQuery("#" + containerDiv).css({
- width : this.config.player.width + "px",
- height : this.config.player.height + "px"
- });
- var _urlparts = this.config.player.video.split(/[?&]/),
- _params = {};
- for (var _j = 1; _j < _urlparts.length; _j++) {
- var _ppart = _urlparts[_j].split('=');
- _params[_ppart[0]] = decodeURIComponent(_ppart[1]);
- }
- _params.controls = 0;
- _params.modestbranding = 1;
- _url = _urlparts[0] + '?' + IriSP.jQuery.param(_params);
- pop = Popcorn.youtube("#" + containerDiv, _url);
- break;
-
- case "dailymotion":
- pop = new IriSP.PopcornReplacement.dailymotion("#" + containerDiv, this.config.player);
- break;
-
- case "mashup":
- pop = new IriSP.PopcornReplacement.mashup("#" + containerDiv, this.config.player);
- break;
-
- case "allocine":
- /* pass the options as-is to the allocine player and let it handle everything */
- pop = new IriSP.PopcornReplacement.allocine("#" + containerDiv, this.config.player);
- break;
-
- case "mashup-html":
- pop = new IriSP.PopcornReplacement.htmlMashup("#" + containerDiv, this.config.player, this.videoData);
- break;
-
- default:
- pop = undefined;
- };
-
- this.popcorn = pop;
-}
-
/** create a subdiv with an unique id, and a spacer div as well.
@param widgetName the name of the widget.
@return an array of the form [createdivId, spacerdivId].
--- a/src/js/widgets.js Wed Jun 27 19:03:18 2012 +0200
+++ b/src/js/widgets.js Wed Jun 27 19:03:37 2012 +0200
@@ -113,6 +113,13 @@
return typeof this.annotation_type !== "undefined" && this.annotation_type ? _curmedia.getAnnotationsByTypeTitle(this.annotation_type) : _curmedia.getAnnotations();
}
+IriSP.Widgets.Widget.prototype.getWidgetAnnotationsAtTime = function() {
+ var _time = Math.floor(this.player.popcorn.currentTime() * 1000);
+ return this.getWidgetAnnotations().filter(function(_annotation) {
+ return _annotation.begin <= _time && _annotation.end > _time;
+ });
+}
+
/**
* This method responsible of drawing a widget on screen.
*/
--- a/src/widgets/Annotation.js Wed Jun 27 19:03:18 2012 +0200
+++ b/src/widgets/Annotation.js Wed Jun 27 19:03:37 2012 +0200
@@ -55,9 +55,7 @@
IriSP.Widgets.Annotation.prototype.onTimeupdate = function() {
var _time = Math.floor(this.player.popcorn.currentTime() * 1000),
- _list = this.getWidgetAnnotations().filter(function(_annotation) {
- return _annotation.begin <= _time && _annotation.end > _time;
- });
+ _list = this.getWidgetAnnotationsAtTime();
if (_list.length) {
if (_list[0].id !== this.lastAnnotation) {
this.drawAnnotation(_list[0]);
--- a/src/widgets/Tooltip.css Wed Jun 27 19:03:18 2012 +0200
+++ b/src/widgets/Tooltip.css Wed Jun 27 19:03:37 2012 +0200
@@ -2,17 +2,21 @@
.Ldt-Tooltip {
position: absolute;
- padding : 3px;
z-index: 10000000000;
- max-width: 200px;
background: transparent url("img/white_arrow_long.png");
font-size: 12px;
- height: 115px;
- width: 180px;
padding: 15px 15px 20px;
+ color: black;
+ font-family: Arial, Helvetica, sans-serif;
overflow:hidden;
}
+.Ldt-Tooltip-Inner {
+ height: 115px;
+ width: 180px;
+ overflow: hidden;
+}
+
.Ldt-Tooltip-Color {
float: left; margin: 2px 4px 2px 0; width: 10px; height: 10px;
}
--- a/src/widgets/Tooltip.js Wed Jun 27 19:03:18 2012 +0200
+++ b/src/widgets/Tooltip.js Wed Jun 27 19:03:37 2012 +0200
@@ -5,7 +5,7 @@
IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget();
-IriSP.Widgets.Tooltip.prototype.template = '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Color"></div><div class="Ldt-Tooltip-Text"></div></div>';
+IriSP.Widgets.Tooltip.prototype.template = '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Inner"><div class="Ldt-Tooltip-Color"></div><div class="Ldt-Tooltip-Text"></div></div></div>';
IriSP.Widgets.Tooltip.prototype.draw = function() {
_this = this;
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/test/slideshare.htm Wed Jun 27 19:03:37 2012 +0200
@@ -0,0 +1,85 @@
+<!doctype html>
+<html>
+
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Metadataplayer test with JwPlayer</title>
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+ <link href='test.css' rel='stylesheet' type='text/css'>
+ <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
+ <script type="text/javascript" src="test-config.js" type="text/javascript"></script>
+ <style type="text/css">
+ #SlideShareContainer {
+ float: left;
+ width: 400px;
+ margin: 10px 0;
+ }
+ </style>
+ </head>
+
+ <body>
+ <h1>Metadataplayer test with JwPlayer</h1>
+ <div id="LdtPlayer"></div>
+ <div id="SlideShareContainer"></div>
+ <div id="AnnotationsListContainer"></div>
+ <script type="text/javascript">
+ IriSP.libFiles.locations.jwPlayerSWF = "player.swf";
+ IriSP.libFiles.defaultDir = "libs/";
+ IriSP.language = 'fr';
+ IriSP.widgetsDir = "metadataplayer";
+ var _metadata = {
+ url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/8a1a344a-7f34-11e1-9ee2-00145ea4a2be?callback=?',
+ format: 'ldt'
+ };
+ var _config = {
+ gui: {
+ width : 620,
+ container : 'LdtPlayer',
+ default_options: {
+ metadata: _metadata
+ },
+ css : 'metadataplayer/LdtPlayer-core.css',
+ widgets: [
+ { type: "Slider" },
+ { type: "Controller" },
+ { type: "Polemic" },
+ { type: "Segments" },
+ { type: "Slice" },
+ { type: "Arrow" },
+ { type: "Annotation" },
+ {
+ type: "CreateAnnotation",
+ api_endpoint_template: "http://192.168.56.101/pf/ldtplatform/api/ldt/annotations/{{id}}.json",
+ creator_name: "Metadataplayer"
+ },
+ { type: "Tweet" },
+ {
+ type: "Tagcloud"
+ },
+ {
+ type: "AnnotationsList",
+ container: "AnnotationsListContainer"
+ },
+ {
+ type: "Slideshare",
+ container: "SlideShareContainer"
+ },
+ { type: "Mediafragment"}
+ ]
+ },
+ player:{
+ type:'auto',
+ live: true,
+ height: 350,
+ width: 620,
+ provider: "rtmp",
+ autostart: true,
+ metadata: _metadata
+ }
+ };
+
+ _myPlayer = new IriSP.Metadataplayer(_config);
+
+ </script>
+ </body>
+</html>