Mashup Player and Dailymotion are now widgets players-as-widgets
authorveltr
Tue, 18 Sep 2012 15:39:28 +0900
branchplayers-as-widgets
changeset 959 ee11ed1b739e
parent 958 2aa7fdb0762a
child 960 9a278b9e3b05
Mashup Player and Dailymotion are now widgets
sbin/build/client.xml
src/js/defaults.js
src/js/init.js
src/js/model.js
src/js/players/player.dailymotion.js
src/js/players/player.jwplayer.js
src/js/players/player.mashup-html.js
src/js/pop.js
src/js/widgets.js
src/widgets/Annotation.js
src/widgets/AnnotationsList.js
src/widgets/AutoPlayer.js
src/widgets/DailymotionPlayer.js
src/widgets/JwpPlayer.js
src/widgets/MashupPlayer.js
src/widgets/Polemic.js
src/widgets/PopcornPlayer.js
src/widgets/Segments.js
test/dailymotion.htm
test/jwplayer.htm
test/mashup/moon.htm
test/mashup/player-html.htm
test/mashup/player-local-html.htm
test/oggvideo.htm
test/test-config.js
test/vimeo.htm
test/youtube.htm
--- a/sbin/build/client.xml	Mon Sep 17 22:44:59 2012 +0900
+++ b/sbin/build/client.xml	Tue Sep 18 15:39:28 2012 +0900
@@ -23,10 +23,6 @@
             <filelist dir="../../src/js/libs" files="LAB.min.js" />
             <!-- core files -->
             <filelist dir="../../src/js" files="init.js utils.js pop.js model.js defaults.js widgets.js" />
-            <!-- players -->
-            <fileset dir="../../src/js/players" casesensitive="yes">
-                <include name="**/*.js"/>
-            </fileset>
             <!-- serializers -->
             <fileset dir="../../src/js/serializers" casesensitive="yes">
                 <include name="**/*.js"/>
--- a/src/js/defaults.js	Mon Sep 17 22:44:59 2012 +0900
+++ b/src/js/defaults.js	Tue Sep 18 15:39:28 2012 +0900
@@ -48,7 +48,11 @@
     },
     JwpPlayer: {
         noCss: true,
-        requires: [ "swfObject", "jwplayer" ]
+        requires: [ "jwplayer" ]
+    },
+    DailymotionPlayer: {
+        noCss: true,
+        requires: [ "swfObject" ]
     },
     Sparkline: {
         noCss: true,
--- a/src/js/init.js	Mon Sep 17 22:44:59 2012 +0900
+++ b/src/js/init.js	Tue Sep 18 15:39:28 2012 +0900
@@ -82,7 +82,6 @@
     IriSP.loadCss(IriSP.getLib("cssjQueryUI"));
     IriSP.loadCss(this.config.css);
     
-//    this.videoData = this.loadMetadata(this.config.player.metadata);
     this.$ = IriSP.jQuery('#' + this.config.container);
     this.$.css({
         "width": this.config.width,
@@ -100,11 +99,6 @@
         });
     };
     this.$.find('.Ldt-Loader').detach();
-/*
-    this.videoData.onLoad(function() {
-        _this.onVideoDataLoaded();
-    });
-*/
 }
 
 IriSP.Metadataplayer.prototype.loadMetadata = function(_metadataInfo) {
@@ -121,197 +115,6 @@
     }
 }
 
-// TODO: REMOVE !
-IriSP.Metadataplayer.prototype.onVideoDataLoaded = function() {
-    
-    /* Setting default media from metadata */
-   
-    if (typeof this.videoData !== "undefined") {
-        
-        var _media;
-        
-        if (typeof this.videoData.mainMedia !== "undefined") {
-            _media = this.videoData.getElement(this.videoData.mainMedia);
-        }
-        
-        if (this.config.player.type === "mashup" || this.config.player.type === "mashup-html") {
-            if (typeof _media === "undefined" || _media.elementType !== "mashup") {
-                var _mashups = this.videoData.getMashups();
-                if (_mashups.length) {
-                    _media = _mashups[0];
-                }
-            }
-        } else {
-            if (typeof _media === "undefined" || _media.elementType !== "media") {
-                var _medias = this.videoData.getMedias();
-                if (_medias.length) {
-                    _media = _medias[0];
-                }
-            }
-        }
-        
-        this.videoData.currentMedia = _media;
-        
-        /* Getting video URL from metadata if it's not in the player config options */
-        
-        if (typeof _media !== "undefined" && typeof _media.video !== "undefined" && typeof this.config.player.video === "undefined") {
-            this.config.player.video = _media.video;
-            if (typeof this.config.player.streamer == "undefined" && typeof _media.streamer !== "undefined") {
-                this.config.player.streamer = _media.streamer;
-            }
-        }
-        
-    }
-    
-    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/,
-            "vimeo" : /^(https?:\/\/)?(www\.)?vimeo\.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;
-            if (typeof opts.streamer === "function") {
-                opts.streamer = opts.streamer(opts.video);
-            }
-            if (typeof opts.streamer === "string") {
-                opts.video = opts.video.replace(opts.streamer,"");
-            }
-            opts.file = opts.video;
-            delete opts.video;
-            delete opts.metadata;
-
-            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 "vimeo":
-            // Popcorn.vimeo 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"
-            });
-            _pop = Popcorn.vimeo("#" + containerDiv, this.config.player.video);
-            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.widgets.length; i++) {
-        this.loadWidget(this.config.widgets[i], function(_widget) {
-            _this.widgets.push(_widget)
-        });
-    };
-    this.$.find('.Ldt-Loader').detach();
-}
-
 IriSP.Metadataplayer.prototype.loadWidget = function(_widgetConfig, _callback) {
     /* Creating containers if needed */
     if (typeof _widgetConfig.container === "undefined") {
@@ -371,5 +174,3 @@
 
     return [newDiv, spacerDiv];
 };
-
-IriSP.Metadataplayer.prototype.on
--- a/src/js/model.js	Mon Sep 17 22:44:59 2012 +0900
+++ b/src/js/model.js	Tue Sep 18 15:39:28 2012 +0900
@@ -452,7 +452,7 @@
 
 /* Default functions to be overriden by players */
 
-IriSP.Model.Media.prototype.getCurrentTime = function() { return 0; }
+IriSP.Model.Media.prototype.getCurrentTime = function() {  return new IriSP.Model.Time(0); }
 
 IriSP.Model.Media.prototype.getVolume = function() { return .5; }
 
@@ -664,6 +664,23 @@
     }
 }
 
+/* Default functions to be overriden by players */
+
+IriSP.Model.Mashup.prototype.getCurrentTime = function() { return new IriSP.Model.Time(0); }
+
+IriSP.Model.Mashup.prototype.getVolume = function() { return .5; }
+
+IriSP.Model.Mashup.prototype.getPaused = function() { return true; }
+
+IriSP.Model.Mashup.prototype.getMuted = function() { return false; }
+
+IriSP.Model.Mashup.prototype.setCurrentTime
+    = IriSP.Model.Mashup.prototype.setVolume
+    = IriSP.Model.Mashup.prototype.setMuted
+    = IriSP.Model.Mashup.prototype.play
+    = IriSP.Model.Mashup.prototype.pause
+    = function() {}
+
 /* */
 
 IriSP.Model.Source = function(_config) {
@@ -786,11 +803,8 @@
 }
 
 IriSP.Model.Source.prototype.getCurrentMedia = function(_opts) {
-    if (typeof _opts === "undefined") {
-        var _opts = {};
-    }
-    if (typeof this.currentMedia === "undefined" || _opts.override) {
-        if (_opts.mashup) {
+    if (typeof this.currentMedia === "undefined") {
+        if (_opts.is_mashup) {
             var _mashups = this.getMashups();
             if (_mashups.length) {
                 this.currentMedia = _mashups[0];
--- a/src/js/players/player.dailymotion.js	Mon Sep 17 22:44:59 2012 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,137 +0,0 @@
-//TODO: Remove and replace by Player Widget
-
-/* To wrap a player the develop should create a new class derived from
-the IriSP.PopcornReplacement.player and defining the correct functions */
-
-/** jwplayer player wrapper */
-IriSP.PopcornReplacement.dailymotion = function(container, options) {
-    /* Appel du constructeur de la classe parente */
-    IriSP.PopcornReplacement.player.call(this, container, options);   
-    
-    var _this = this;
-
-    /* Définition des fonctions de commande :
-     this.playerFns.play, .pause, .getPosition, .seek,
-     .getMute, .setMute, .getVolume, .setVolume
-     doivent être rattachés aux fonctions du player
-     * */
-
-    this.playerFns = {
-        play : function() {
-            if (_this.player) {
-                return _this.player.playVideo();
-            } else {
-                return false;
-            }
-        },
-        pause : function() {
-            if (_this.player) {
-                return _this.player.pauseVideo();
-            } else {
-                return false;
-            }
-        },
-        getPosition : function() {
-            if (_this.player) {
-                return _this.player.getCurrentTime();
-            } else {
-                return 0;
-            }
-        },
-        seek : function(pos) {
-            if (_this.player) {
-                return _this.player.seekTo(pos);
-            } else {
-                return false;
-            }
-        },
-        getMute : function() {
-            if (_this.player) {
-                return _this.player.isMuted();
-            } else {
-                return false;
-            }
-        },
-        setMute : function(p) {
-            if (_this.player) {
-                if (p) {
-                    _this.player.mute();
-                }
-                else {
-                    _this.player.unMute();
-                }
-            }
-        },
-        getVolume : function() {
-            if (_this.player) {
-                return _this.player.getVolume() / 100;
-            } else {
-                return false;
-            }
-        },
-        setVolume : function(p) {
-            if (_this.player) {
-                _this.player.setVolume(Math.floor(100 * p));
-            }
-        },
-    }
-    
-    /* Dailymotion utilise un système de fonctions référencées dans
-     * des variables globales pour la gestion des événements.
-     */
-    
-    window.onDailymotionPlayerReady = function() {
-        _this.onReady();
-    };
-    window.onDailymotionStateChange = function(_state) {
-        _this.onStateChange(_state);
-    }
-    window.onDailymotionVideoProgress = function(_progress) {
-        _this.onProgress(_progress);
-    }
-
-    var params = {
-        "allowScriptAccess" : "always",
-        "wmode": "opaque"
-    };
-    var atts = {
-        id : this.container
-    };
-    swfobject.embedSWF("http://www.dailymotion.com/swf?chromeless=1&enableApi=1", this.container, options.width, options.height, "8", null, null, params, atts);
-
-};
-
-IriSP.PopcornReplacement.dailymotion.prototype = new IriSP.PopcornReplacement.player("", {});
-
-IriSP.PopcornReplacement.dailymotion.prototype.onReady = function() {
-    
-    this.player = document.getElementById(this.container);
-    
-    this.player.addEventListener("onStateChange", "onDailymotionStateChange");
-    this.player.addEventListener("onVideoProgress", "onDailymotionVideoProgress");
-    this.player.cueVideoByUrl(this._options.video);
-    
-    this.trigger("loadedmetadata");
-};
-
-IriSP.PopcornReplacement.dailymotion.prototype.onProgress = function(progressInfo) {
-    this.trigger("timeupdate");
-}
-
-IriSP.PopcornReplacement.dailymotion.prototype.onStateChange = function(state) {
-    
-    switch(state) {
-        case 1:
-            this.trigger("play");
-            break;
-
-        case 2:
-            this.trigger("pause");
-            break;
-
-        case 3:
-            this.trigger("seeked");
-            break;
-    }
-    
-};
\ No newline at end of file
--- a/src/js/players/player.jwplayer.js	Mon Sep 17 22:44:59 2012 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,69 +0,0 @@
-//TODO: Remove and replace by Player Widget
-
-/* To wrap a player the develop should create a new class derived from 
-   the IriSP.PopcornReplacement.player and defining the correct functions */
-
-/** jwplayer player wrapper */
-IriSP.PopcornReplacement.jwplayer = function(container, options) {
-    /* appel du parent pour initialiser les structures communes à tous les players */
-    IriSP.PopcornReplacement.player.call(this, container, options);
-    
-    if (options.autostart) {
-        this.media.paused = false;
-        this.trigger("play");
-    }
- 
-    var _player = jwplayer(this.$[0]),
-        _this = this,
-        _seekPause = false;
-  
-  /* Définition des fonctions de l'API -  */
-    this.playerFns = {
-        play: function() { return _player.play(true); },
-        pause: function() { return _player.pause(true); },
-        getPosition: function() { return _player.getPosition(); },
-        seek: function(pos) {
-            _seekPause = _this.media.paused;
-            return _player.seek(pos);
-        },
-        getMute: function() { return _player.getMute() },
-        setMute: function(p) { return _player.setMute(p); },
-        getVolume: function() { return _player.getVolume() / 100; },
-        setVolume: function(p) { return _player.setVolume(Math.floor(100*p)); }
-    }
-
-    options.events = {
-        onReady:  function() {
-            _this.trigger("loadedmetadata");
-        },
-        onTime:   function() {
-            if (_seekPause) {
-                _player.pause(true);
-                _seekPause = false;
-            } else {
-                if (_this.media.paused && _player.getState() === "PLAYING") {
-                    _this.media.paused = false;
-                    _this.trigger("play");
-                }
-            }
-            _this.trigger("timeupdate");
-        },
-        onPlay:   function() {
-            if (!_seekPause) {
-                _this.media.paused = false;
-                _this.trigger("play");
-            }
-        },
-        onPause:  function() {
-            _this.media.paused = true;
-            _this.trigger("pause");
-        },
-        onSeek:   function() {
-            _this.trigger("seeked");
-        }
-    };
-
-    _player.setup(options);
-};
-
-IriSP.PopcornReplacement.jwplayer.prototype = new IriSP.PopcornReplacement.player("", {});
--- a/src/js/players/player.mashup-html.js	Mon Sep 17 22:44:59 2012 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,195 +0,0 @@
-//TODO: Remove and replace by Player Widget
-
-/* To wrap a player the develop should create a new class derived from 
-   the IriSP.PopcornReplacement.player and defining the correct functions */
-
-/** jwplayer player wrapper */
-IriSP.PopcornReplacement.htmlMashup = function(container, options, metadata) {
-    /* appel du parent pour initialiser les structures communes à tous les players */
-    IriSP.PopcornReplacement.player.call(this, container, options);
-    
-    this.mashup = metadata.currentMedia;
-    this.$ = IriSP.jQuery(container);
-    
-    var _w = this.$.width(),
-        _h = this.$.height(),
-        _this = this;
-    
-    IriSP._(metadata.currentMedia.medias).each(function(_media) {
-        var _tmpId = Popcorn.guid("video"),
-            _videoEl = IriSP.jQuery('<video>'),
-            _videoUrl = _media.video;
-        if (typeof options.url_transform === "function") {
-            _videoUrl = options.url_transform(_videoUrl);
-        }
-		
-        _videoEl
-            .attr({
-                //src : _videoUrl,
-                id : _tmpId,
-                width : _w,
-                height : _h
-            })
-            .css({
-                position: "absolute",
-                top: 0,
-                left: 0
-            });
-        
-        if(typeof _videoUrl === "string"){
-        	_videoEl.attr({src : _videoUrl});
-	    }
-        else{
-        	// _videoUrl is an array of {src:"u",type:"m"}
-        	l = _videoUrl.length;
-        	for (var _i = 0; _i < l; _i++) {
-        		var srcNode = IriSP.jQuery('<source>');
-        		srcNode.attr({src:_videoUrl[_i]["src"], type:_videoUrl[_i]["type"]});
-        		_videoEl.append(srcNode);
-            }
-	    }
-        _this.$.append(_videoEl);
-        _media.videoEl = _videoEl;
-        _media.popcorn = Popcorn("#" + _tmpId);
-        _media.loadedMetadata = false;
-        _media.popcorn.on("loadedmetadata", function() {
-            _media.loadedMetadata = true;
-            var _allLoaded = true;
-            for (var _i = 0; _i < metadata.currentMedia.medias.length; _i++) {
-                _allLoaded = _allLoaded && metadata.currentMedia.medias[_i].loadedMetadata;
-            }
-            if (_allLoaded) {
-                _this.changeCurrentAnnotation();
-                _this.trigger("loadedmetadata");
-            }
-        });
-        _media.popcorn.on("timeupdate", function() {
-            if (!_this.media.paused && _media === _this.currentMedia) {
-                var _time = Math.round( 1000 * _media.popcorn.currentTime() );
-//                var _status = "Timeupdate from " + _media.id + " at time " + _time;
-                if ( _time < _this.segmentEnd ) {
-                    if ( _time >= _this.segmentBegin ) {
-                        _this.timecode = _time - _this.timedelta;
-//                        _status += " within segment";
-                    } else {
-                        _this.timecode = _this.segmentBegin - _this.timedelta;
-                        _media.popcorn.currentTime(_this.segmentBegin / 1000);
-//                        _status += " before segment";
-                    }
-                } else {
-                    _this.timecode = _this.segmentEnd - _this.timedelta;
-                    _media.popcorn.pause();
-                    _this.changeCurrentAnnotation();
-//                    _status += " after segment";
-                }
-//                _status += " (" + _this.segmentBegin + " to " + _this.segmentEnd + ")" + ", translated to " + _this.timecode;
-//                console.log(_status);
-                _this.trigger("timeupdate");
-            }
-        });
-    });
-    
-    this.timecode = 0;
-  
-  /* Définition des fonctions de l'API */
-    this.playerFns = {
-        play: function() {
-            _this.changeCurrentAnnotation();
-        },
-        pause: function() {
-            _this.currentMedia.popcorn.pause();
-        },
-        getPosition: function() {
-            return _this.timecode / 1000;
-        },
-        seek: function(pos) {
-            _this.timecode = Math.round(pos * 1000);
-            _this.changeCurrentAnnotation();
-        },
-        getMute: function() {
-            var _res = (
-                typeof _this.currentMedia !== "undefined"
-                ? _this.currentMedia.popcorn.muted()
-                : false
-            );
-            return _res;
-        },
-        setMute: function(p) {
-            var _mute = !!p;
-            for (var _i = 0; _i < _this.mashup.medias.length; _i++) {
-                _this.mashup.medias[_i].popcorn.muted(_mute);
-            }
-        },
-        getVolume: function() {
-            var _res = (
-                typeof _this.currentMedia !== "undefined"
-                ? _this.currentMedia.popcorn.volume()
-                : .5
-            );
-            return _res;
-        },
-        setVolume: function(_vol) {
-            for (var _i = 0; _i < _this.mashup.medias.length; _i++) {
-                _this.mashup.medias[_i].popcorn.volume(_vol);
-            }
-        }
-    }
-    
-};
-
-IriSP.PopcornReplacement.htmlMashup.prototype = new IriSP.PopcornReplacement.player("", {});
-
-IriSP.PopcornReplacement.htmlMashup.prototype.changeCurrentAnnotation = function() {
-    var _annotation = this.mashup.getAnnotationAtTime( this.timecode );
-    if (typeof _annotation == "undefined") {
-        if (typeof this.currentMedia !== "undefined") {
-            this.currentMedia.popcorn.pause();
-            if (!this.media.paused) {
-                this.media.paused = true;
-                this.trigger("pause");
-            }
-        }
-        return;
-    }
-    if (_annotation !== this.currentAnnotation) {
-        this.currentAnnotation = _annotation;
-        this.segmentBegin = this.currentAnnotation.annotation.begin.milliseconds;
-        this.segmentEnd = this.currentAnnotation.annotation.end.milliseconds;
-        this.timedelta = this.segmentBegin - this.currentAnnotation.begin.milliseconds;
-        this.currentMedia = this.currentAnnotation.getMedia();
-        
-        for (var _i = 0; _i < this.mashup.medias.length; _i++) {
-            if (this.mashup.medias[_i].id !== this.currentMedia.id) {
-                this.mashup.medias[_i].videoEl.hide();
-                this.mashup.medias[_i].popcorn.pause();
-            } else {
-                this.mashup.medias[_i].videoEl.show();
-            }
-        }
-/* PRELOADING */
-        var _this = this,
-            _preloadedMedias = [],
-            _toPreload = this.mashup.getAnnotations().filter(function(_a) {
-            return (_a.begin >= _this.currentAnnotation.end && _a.getMedia().id !== _this.currentMedia.id);
-        });
-        IriSP._(_toPreload).each(function(_a) {
-            var _media = _a.getMedia();
-            if (IriSP._(_preloadedMedias).indexOf(_media.id) === -1) {
-                _preloadedMedias.push(_media.id);
-                _media.popcorn.currentTime(_a.annotation.begin.getSeconds());
-                //console.log("Preloading ", _media.id, " at t=", _a.annotation.begin.getSeconds());
-            }
-        });
-        
-//        console.log("Changed segment: media="+ this.currentMedia.id + ", from=" + this.segmentBegin + " to=" + this.segmentEnd +", timedelta = ", this.timedelta)
-//    } else {
-//        console.log("changeCurrentAnnotation called, but segment hasn't changed");
-    }
-    if (this.currentMedia.popcorn.readyState()) {
-        this.currentMedia.popcorn.currentTime( (this.timecode + this.timedelta) / 1000);
-        this.trigger("timeupdate");
-    }
-    if (!this.media.paused) {
-        this.currentMedia.popcorn.play();
-    }
-}
--- a/src/js/pop.js	Mon Sep 17 22:44:59 2012 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,150 +0,0 @@
-//TODO: Remove Popcorn replacement, replace it by Media Events
-
-/* wrapper that simulates popcorn.js because
-   popcorn is a bit unstable at the time */
-
-/* Popcorn.code replacement has been disabled. It didn't work properly and was not even used  */
-
-IriSP.PopcornReplacement = {  
-};
-
-/** base class for our popcorn-compatible players.
- */
-IriSP.PopcornReplacement.player = function(container, options) {
-  
-    this.media = { 
-        "paused": true,
-        "muted": false
-    };
-    
-    this.container = container.replace(/^#/,''); //remove '#' at beginning
-    this.msgPump = {}; /* dictionnary used to receive and send messages */
-    this._options = options;
-
-};
-
-IriSP.PopcornReplacement.player.prototype.listen = function(msg, callback) {
-    if (!this.msgPump.hasOwnProperty(msg)) {
-        this.msgPump[msg] = [];
-    }
-    this.msgPump[msg].push(callback);
-};
-
-IriSP.PopcornReplacement.player.prototype.on = IriSP.PopcornReplacement.player.prototype.listen;
-
-IriSP.PopcornReplacement.player.prototype.trigger = function(msg, params) {
-    if (!this.msgPump.hasOwnProperty(msg)) {
-        return;
-    }
-    var d = this.msgPump[msg];
-    for(var i = 0; i < d.length; i++) {
-        d[i].call(window, params);
-    }
-};
-
-IriSP.PopcornReplacement.player.prototype.emit = IriSP.PopcornReplacement.player.prototype.trigger;
-/*
-IriSP.PopcornReplacement.player.prototype.guid = function(prefix) {
-  var str = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-      return v.toString(16);
-   });
-
-  return prefix + str;
-};
-
-/** init the api after that flash player has been setup - called by the callback
-    defined by the embedded flash player 
-
-IriSP.PopcornReplacement.player.prototype.__initApi = function() {
-  this.trigger("loadedmetadata"); // we've done more than loading metadata of course,
-                                                      // but popcorn doesn't need to know more.
-  this.media.muted = this.playerFns.getMute();
-  /* some programmed segments are supposed to be run at the beginning 
-  var i = 0;
-  for(i = 0; i < this.__codes.length; i++) {
-    var c = this.__codes[i];
-    if (0 == c.start) {
-      c.onStart();
-    }
-    
-    if (0 == c.end) {
-      c.onEnd();
-    }
-  }
-  
-};
-*/
-
-IriSP.PopcornReplacement.player.prototype.currentTime = function(time) {
-  if (typeof(time) === "undefined") {        
-      return this.playerFns.getPosition();            
-  } else {
-     var currentTime = +time;
-     this.playerFns.seek(currentTime);              
-     return currentTime;
-  }
-};
-
-IriSP.PopcornReplacement.player.prototype.play = function() {
-  this.media.paused = false;
-  this.trigger("play");
-  this.playerFns.play();
-};
-    
-IriSP.PopcornReplacement.player.prototype.pause = function() {
-    this.media.paused = true;
-    this.trigger("pause");
-    this.playerFns.pause();
-};
-
-IriSP.PopcornReplacement.player.prototype.muted = function(val) {
-  if (typeof(val) !== "undefined") {
-
-    if (this.playerFns.getMute() !== val) {
-      if (val) {
-        this.playerFns.setMute(true);
-        this.media.muted = true;
-      } else {
-        this.playerFns.setMute(false);
-        this.media.muted = false;
-      }
-
-      this.trigger( "volumechange" );
-    }
-    
-    return this.playerFns.getMute();
-  } else {
-    return this.playerFns.getMute();
-  }
-};
-
-IriSP.PopcornReplacement.player.prototype.volume = function(val) {
-    if (typeof this.playerFns.getVolume == "undefined" || typeof this.playerFns.setVolume == "undefined") {
-        return false;
-    }
-    var _vol = this.playerFns.getVolume();
-    if (typeof(val) !== "undefined" && parseFloat(val) !== NaN) {
-        val = Math.max(0, Math.min(1, val));
-        if (parseFloat(val) != parseFloat(_vol)) {
-            this.playerFns.setVolume(val);
-            this.trigger("volumechange");
-            _vol = this.playerFns.getVolume();
-        }
-    }
-    return _vol;
-};
-
-IriSP.PopcornReplacement.player.prototype.mute = function() {
-    this.muted(true);
-}
-
-IriSP.PopcornReplacement.player.prototype.unmute = function() {
-    this.muted(false);
-}
-
-
-IriSP.PopcornReplacement.player.prototype.roundTime = function() {
-  var currentTime = this.currentTime();
-  return Math.round(currentTime);
-};
\ No newline at end of file
--- a/src/js/widgets.js	Mon Sep 17 22:44:59 2012 +0900
+++ b/src/js/widgets.js	Tue Sep 18 15:39:28 2012 +0900
@@ -47,7 +47,15 @@
     
     /* Call draw when loaded */
     this.source.onLoad(function() {
-        _this.media = this.getCurrentMedia();
+        if (_this.media_id) {
+            _this.media = this.getElement(_this.media_id);
+        } else {
+            var _mediaopts = {
+                is_mashup: _this.is_mashup || false
+            }
+            _this.media = this.getCurrentMedia(_mediaopts);
+        }
+        
         _this.draw();
     });
    
@@ -109,9 +117,6 @@
 }
 
 IriSP.Widgets.Widget.prototype.onMediaEvent = function(_eventName, _functionOrName) {
-    if (typeof this.media === "undefined" || typeof this.media.on === "undefined") {
-        console.log("Error on widget "+this.type, this.media);
-    }
     this.media.on(_eventName, this.getFunctionOrName(_functionOrName));
 }
 
@@ -126,7 +131,7 @@
     });
 }
 
-IriSP.Widgets.Widget.prototype.insertSubwidget = function(_selector, _propname, _widgetoptions) {
+IriSP.Widgets.Widget.prototype.insertSubwidget = function(_selector, _widgetoptions, _propname) {
     var _id = _selector.attr("id"),
         _this = this,
         _type = _widgetoptions.type,
@@ -143,7 +148,9 @@
     }
     $L.wait(function() {
         _this.player.loadWidget(_widgetoptions, function(_widget) {
-            _this[_propname] = _widget;
+            if (_propname) {
+                _this[_propname] = _widget;
+            }
         });
     });
 }
--- a/src/widgets/Annotation.js	Mon Sep 17 22:44:59 2012 +0900
+++ b/src/widgets/Annotation.js	Tue Sep 18 15:39:28 2012 +0900
@@ -50,7 +50,7 @@
 
 IriSP.Widgets.Annotation.prototype.draw = function() {
     this.renderTemplate();
-    this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), "socialWidget", { type: "Social" });
+    this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");
     this.onMediaEvent("timeupdate","onTimeupdate");
     this.onMdpEvent("Annotation.hide","hide");
     this.onMdpEvent("Annotation.show","show");
--- a/src/widgets/AnnotationsList.js	Mon Sep 17 22:44:59 2012 +0900
+++ b/src/widgets/AnnotationsList.js	Tue Sep 18 15:39:28 2012 +0900
@@ -6,7 +6,6 @@
     this.throttledRefresh = IriSP._.throttle(function() {
         _this.refresh(false);
     }, 1500);
-    this.mashupMode = (this.source.currentMedia.elementType === "mashup");
 };
 
 IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();
@@ -263,6 +262,8 @@
 
 IriSP.Widgets.AnnotationsList.prototype.draw = function() {
     
+    this.mashupMode = (this.media.elementType === "mashup");
+    
     this.renderTemplate();
     
     this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/AutoPlayer.js	Tue Sep 18 15:39:28 2012 +0900
@@ -0,0 +1,57 @@
+IriSP.Widgets.AutoPlayer = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.AutoPlayer.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.AutoPlayer.prototype.defaults = {
+    default_type: "JwpPlayer"
+}
+
+IriSP.Widgets.AutoPlayer.prototype.draw = function() {
+    
+    if (typeof this.video === "undefined") {
+        this.video = this.media.video;
+    }
+    
+    var _props = [ "live", "provider", "autostart", "streamer", "video", "height", "width", "url_transform" ],
+        _opts = {},
+        _types = [
+            {
+                regexp: /\.(ogg|ogv|webm)$/,
+                type: "PopcornPlayer"
+            },
+            {
+                regexp: /^(https?:\/\/)?(www\.)?youtube\.com/,
+                type: "PopcornPlayer"
+            },
+            {
+                regexp: /^(https?:\/\/)?(www\.)?vimeo\.com/,
+                type: "PopcornPlayer"
+            },
+            {
+                regexp: /^(https?:\/\/)?(www\.)?dailymotion\.com/,
+                type: "DailymotionPlayer"
+            }
+        ];
+    
+    for (var i = 0; i < _types.length; i++) {
+        if (_types[i].regexp.test(this.video)) {
+            _opts.type =  _types[i].type
+        }
+    }
+    
+    if (typeof _opts.type === "undefined") {
+        _opts.type = this.default_type
+    }
+    
+    for (var i = 0; i < _props.length; i++) {
+        if (typeof this[_props[i]] !== "undefined") {
+            _opts[_props[i]] = this[_props[i]];
+        }
+    }
+    
+
+    this.insertSubwidget(this.$, _opts);
+    
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/DailymotionPlayer.js	Tue Sep 18 15:39:28 2012 +0900
@@ -0,0 +1,104 @@
+IriSP.Widgets.DailymotionPlayer = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.DailymotionPlayer.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.DailymotionPlayer.prototype.defaults = {
+    aspect_ratio: 14/9
+}
+
+IriSP.Widgets.DailymotionPlayer.prototype.draw = function() {
+    
+    if (typeof this.video === "undefined") {
+        this.video = this.media.video;
+    }
+
+    this.height = this.height || Math.floor(this.width / this.aspect_ratio);
+    
+    var _media = this.media,
+        _this = this,
+        _pauseState = true;
+    
+    /* Dailymotion utilise un système de fonctions référencées dans
+     * des variables globales pour la gestion des événements.
+     */
+    
+    window.onDailymotionPlayerReady = function() {
+
+        var _player = document.getElementById(_this.container);
+        
+        _media.getCurrentTime = function() {
+            return new IriSP.Model.Time(1000*_player.getCurrentTime());
+        }
+        _media.getVolume = function() {
+            return _player.getVolume() / 100;
+        }
+        _media.getPaused = function() {
+            return _pauseState;
+        }
+        _media.getMuted = function() {
+            return _player.isMuted();
+        }
+        _media.setCurrentTime = function(_milliseconds) {
+            _seekPause = _pauseState;
+            return _player.seekTo(_milliseconds / 1000);
+        }
+        _media.setVolume = function(_vol) {
+            return _player.setVolume(Math.floor(_vol*100));
+        }
+        _media.mute = function() {
+            return _player.mute();
+        }
+        _media.unmute = function() {
+            return _player.unMute();
+        }
+        _media.play = function() {
+            return _player.playVideo();
+        }
+        _media.pause = function() {
+            return _player.pauseVideo();
+        }
+        
+        _player.addEventListener("onStateChange", "onDailymotionStateChange");
+        _player.addEventListener("onVideoProgress", "onDailymotionVideoProgress");
+        
+        _player.cueVideoByUrl(_this.video);
+        
+        _media.trigger("loadedmetadata");
+    }
+    
+    window.onDailymotionStateChange = function(_state) {
+        switch(_state) {
+            case 1:
+                _media.trigger("play");
+                _pauseState = false;
+                break;
+    
+            case 2:
+                _media.trigger("pause");
+                _pauseState = true;
+                break;
+    
+            case 3:
+                _media.trigger("seeked");
+                break;
+        }
+    }
+    
+    window.onDailymotionVideoProgress = function(_progress) {
+        _media.trigger("timeupdate", new IriSP.Model.Time(_progress.mediaTime * 1000));
+    }
+    
+    var params = {
+        "allowScriptAccess" : "always",
+        "wmode": "opaque"
+    };
+    
+    var atts = {
+        id : this.container
+    };
+
+    swfobject.embedSWF("http://www.dailymotion.com/swf?chromeless=1&enableApi=1", this.container, this.width, this.height, "8", null, null, params, atts);
+    
+}
\ No newline at end of file
--- a/src/widgets/JwpPlayer.js	Mon Sep 17 22:44:59 2012 +0900
+++ b/src/widgets/JwpPlayer.js	Tue Sep 18 15:39:28 2012 +0900
@@ -8,9 +8,9 @@
 }
 
 IriSP.Widgets.JwpPlayer.prototype.draw = function() {
-
+    
     var _opts = {},
-        _player = jwplayer("#" + this.container),
+        _player = jwplayer(this.$[0]),
         _seekPause = false,
         _pauseState = true,
         _props = [ "live", "provider", "autostart" ];
@@ -31,6 +31,8 @@
     _opts.file = this.video;
     _opts.flashplayer = IriSP.getLib("jwPlayerSWF");
     _opts["controlbar.position"] = "none";
+    _opts.width = this.width;
+    _opts.height = this.height || Math.floor(.643*this.width);
     
     for (var i = 0; i < _props.length; i++) {
         if (typeof this[_props[i]] !== "undefined") {
@@ -84,7 +86,7 @@
         onReady: function() {
             _media.trigger("loadedmetadata");
         },
-        onTime: function() {
+        onTime: function(_progress) {
             if (_seekPause) {
                 _player.pause(true);
                 _seekPause = false;
@@ -94,7 +96,7 @@
                     _media.trigger("play");
                 }
             }
-            _this.trigger("timeupdate", _media.getCurrentTime());
+            _media.trigger("timeupdate", new IriSP.Model.Time(_progress.position * 1000));
         },
         onPlay: function() {
             if (!_seekPause) {
@@ -110,11 +112,8 @@
             _media.trigger("seeked");
         }
     }
-    console.log("Before Setup", _opts);
     _player.setup(_opts);
     
-    console.log("OK");
-    
     this.jwplayer = _player;
     
 }
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/MashupPlayer.js	Tue Sep 18 15:39:28 2012 +0900
@@ -0,0 +1,207 @@
+IriSP.Widgets.MashupPlayer = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+    this.is_mashup = true;
+};
+
+IriSP.Widgets.MashupPlayer.prototype = new IriSP.Widgets.Widget();
+
+/* A Popcorn-based player for HTML5 Video, Youtube and Vimeo */
+
+IriSP.Widgets.MashupPlayer.prototype.defaults = {
+    aspect_ratio: 14/9,
+    player_type: "PopcornPlayer"
+}
+
+IriSP.Widgets.MashupPlayer.prototype.draw = function() {
+    var _this = this,
+        _mashup = this.media,
+        _pauseState = true,
+        _currentMedia = null,
+        _currentAnnotation = null,
+        _segmentBegin,
+        _segmentEnd,
+        _timecode = 0,
+        _timedelta;
+    
+    function changeCurrentAnnotation() {
+        var _annotation = _mashup.getAnnotationAtTime( _timecode );
+        if (typeof _annotation === "undefined") {
+            if (_currentMedia) {
+                _currentMedia.pause();
+                if (!_pauseState) {
+                    _pauseState = true;
+                    _mashup.trigger("pause");
+                }
+            }
+            return;
+        }
+        if (_annotation !== _currentAnnotation) {
+            _currentAnnotation = _annotation;
+            _segmentBegin = _currentAnnotation.annotation.begin.milliseconds;
+            _segmentEnd = _currentAnnotation.annotation.end.milliseconds;
+            _timedelta = _segmentBegin - _currentAnnotation.begin.milliseconds;
+            _currentMedia = _currentAnnotation.getMedia();
+            
+            for (var _i = 0; _i < _mashup.medias.length; _i++) {
+                if (_mashup.medias[_i].id !== _currentMedia.id) {
+                    _mashup.medias[_i].hide();
+                    _mashup.medias[_i].pause();
+                } else {
+                    _mashup.medias[_i].show();
+                }
+            }
+            
+    /* PRELOADING */
+            var _preloadedMedias = [],
+                _toPreload = _mashup.getAnnotations().filter(function(_a) {
+                return (_a.begin >= _currentAnnotation.end && _a.getMedia() !== _currentMedia);
+            });
+            IriSP._(_toPreload).each(function(_a) {
+                var _media = _a.getMedia();
+                if (IriSP._(_preloadedMedias).indexOf(_media.id) === -1) {
+                    _preloadedMedias.push(_media.id);
+                    _media.setCurrentTime(_a.annotation.begin.getSeconds());
+                    //console.log("Preloading ", _media.id, " at t=", _a.annotation.begin.getSeconds());
+                }
+            });
+            
+    //        console.log("Changed segment: media="+ this.currentMedia.id + ", from=" + this.segmentBegin + " to=" + this.segmentEnd +", timedelta = ", this.timedelta)
+    //    } else {
+    //        console.log("changeCurrentAnnotation called, but segment hasn't changed");
+        }
+
+        _currentMedia.setCurrentTime( _timecode + _timedelta);
+        _mashup.trigger("timeupdate", new IriSP.Model.Time(_timecode));
+
+        if (!_pauseState) {
+            _currentMedia.play();
+        }
+    }
+    
+    if (!this.height) {
+        this.height = Math.floor(this.width/this.aspect_ratio);
+        this.$.css({
+            height: this.height
+        });
+    }
+
+    IriSP._(_mashup.medias).each(function(_media) {
+        var _el = IriSP.jQuery('<div>');
+        _el.css({
+            position: "absolute",
+            top: 0,
+            left: 0,
+            height: _this.height,
+            width: _this.width
+        });
+        _this.$.append(_el);
+        
+        _this.insertSubwidget(
+            _el,
+            {
+                type: _this.player_type,
+                media_id: _media.id,
+                height: _this.height,
+                width: _this.width,
+                url_transform: _this.url_transform
+            }
+        );
+        
+        _media.loadedMetadata = false;
+        _media.show = function() {
+            _el.show();
+        };
+        _media.hide = function() {
+            _el.hide();
+        };
+        _media.on("loadedmetadata", function() {
+            _media.loadedMetadata = true;
+            var _allLoaded = true;
+            for (var _i = 0; _i < _mashup.medias.length; _i++) {
+                _allLoaded = _allLoaded && _mashup.medias[_i].loadedMetadata;
+            }
+            if (_allLoaded) {
+                changeCurrentAnnotation();
+                _mashup.trigger("loadedmetadata");
+            }
+        });
+        _media.on("timeupdate", function(_time) {
+            if (!_pauseState && _media === _currentMedia) {
+//                var _status = "Timeupdate from " + _media.id + " at time " + _time;
+                if ( _time < _segmentEnd ) {
+                    if ( _time >= _segmentBegin ) {
+                        _timecode = _time - _timedelta;
+//                        _status += " within segment";
+                    } else {
+                        _timecode = _segmentBegin - _timedelta;
+                        _media.setCurrentTime(_segmentBegin);
+//                        _status += " before segment";
+                    }
+                } else {
+                    _timecode = _segmentEnd - _timedelta;
+                    _media.pause();
+                    changeCurrentAnnotation();
+//                    _status += " after segment";
+                }
+//                _status += " (" + _this.segmentBegin + " to " + _this.segmentEnd + ")" + ", translated to " + _this.timecode;
+//                console.log(_status);
+                _mashup.trigger("timeupdate", new IriSP.Model.Time(_timecode));
+            }
+        });
+        _media.on("play", function() {
+            if (_media === _currentMedia) {
+                _mashup.trigger("play");
+            }
+        });
+        _media.on("pause", function() {
+            if (_media === _currentMedia) {
+                _mashup.trigger("pause");
+            }
+        });
+    });
+  
+    _mashup.getCurrentTime = function() {
+        return new IriSP.Model.Time(_timecode);
+    }
+    _mashup.getVolume = function() {
+        return ( _currentMedia ? _currentMedia.getVolume() : .5 );
+    }
+    _mashup.getPaused = function() {
+        return _pauseState;
+    }
+    _mashup.getMuted = function() {
+        return ( _currentMedia ? _currentMedia.getMuted() : false );
+    }
+    _mashup.setCurrentTime = function(_milliseconds) {
+        _timecode = _milliseconds;
+        changeCurrentAnnotation();
+    }
+    _mashup.setVolume = function(_vol) {
+        for (var _i = 0; _i < _mashup.medias.length; _i++) {
+            _mashup.medias[_i].setVolume(_vol);
+        }
+    }
+    _mashup.mute = function() {
+        for (var _i = 0; _i < _mashup.medias.length; _i++) {
+            _mashup.medias[_i].mute();
+        }
+    }
+    _mashup.unmute = function() {
+        for (var _i = 0; _i < _mashup.medias.length; _i++) {
+            _mashup.medias[_i].unmute();
+        }
+    }
+    _mashup.play = function() {
+        _pauseState = false;
+        changeCurrentAnnotation();
+    }
+    _mashup.pause = function() {
+        _pauseState = true;
+        if (_currentMedia) {
+            _currentMedia.pause();
+        }
+    }
+    
+    changeCurrentAnnotation();
+   
+}
\ No newline at end of file
--- a/src/widgets/Polemic.js	Mon Sep 17 22:44:59 2012 +0900
+++ b/src/widgets/Polemic.js	Tue Sep 18 15:39:28 2012 +0900
@@ -308,7 +308,7 @@
     
     this.$.append('<div class="Ldt-Polemic-Tooltip"></div>');
     
-    this.insertSubwidget(this.$.find(".Ldt-Polemic-Tooltip"), "tooltip", { type: "Tooltip" });
+    this.insertSubwidget(this.$.find(".Ldt-Polemic-Tooltip"), { type: "Tooltip" }, "tooltip");
 }
 
 IriSP.Widgets.Polemic.prototype.onTimeupdate = function(_time) {
--- a/src/widgets/PopcornPlayer.js	Mon Sep 17 22:44:59 2012 +0900
+++ b/src/widgets/PopcornPlayer.js	Tue Sep 18 15:39:28 2012 +0900
@@ -4,12 +4,14 @@
 
 IriSP.Widgets.PopcornPlayer.prototype = new IriSP.Widgets.Widget();
 
+/* A Popcorn-based player for HTML5 Video, Youtube and Vimeo */
+
 IriSP.Widgets.PopcornPlayer.prototype.defaults = {
+    aspect_ratio: 14/9
 }
 
 IriSP.Widgets.PopcornPlayer.prototype.draw = function() {
-    var _tmpId = Popcorn.guid("video"),
-        _videoEl = IriSP.jQuery('<video>');
+
     
     if (typeof this.video === "undefined") {
         this.video = this.media.video;
@@ -19,19 +21,61 @@
         this.video = this.url_transform(this.video);
     }
     
-    _videoEl.attr({
-        "src" : this.video,
-        "id" : _tmpId
-    })
-
-    if(this.width) {
-        _videoEl.attr("width", this.width);
+    if (!this.height) {
+        this.height = Math.floor(this.width/this.aspect_ratio);
+        this.$.css({
+                height: this.height
+            });
     }
-    if(this.height) {
-        _videoEl.attr("height", this.height);
+    
+    if (/^(https?:\/\/)?(www\.)?vimeo\.com/.test(this.video)) {
+        
+        /* VIMEO */
+        
+        var _popcorn = Popcorn.vimeo(this.container, this.video);
+        
+    } else if (/^(https?:\/\/)?(www\.)?youtube\.com/.test(this.video)) {
+        
+        /* YOUTUBE */
+       
+        var _urlparts = this.video.split(/[?&]/),
+            _params = {};
+        for (var i = 1; i < _urlparts.length; i++) {
+            var _ppart = _urlparts[i].split('=');
+            _params[_ppart[0]] = decodeURIComponent(_ppart[1]);
+        }
+        _params.controls = 0;
+        _params.modestbranding = 1;
+        _url = _urlparts[0] + '?' + IriSP.jQuery.param(_params);
+        
+        var _popcorn = Popcorn.youtube(this.container, _url);
+        
+    } else {
+        
+        /* DEFAULT HTML5 */
+        
+        var _tmpId = IriSP._.uniqueId("popcorn"),
+            _videoEl = IriSP.jQuery('<video>');
+        _videoEl.attr({
+            id : _tmpId,
+            width : this.width,
+            height : this.height
+        });
+        if(typeof this.video === "string"){
+            _videoEl.attr("src",this.video);
+        } else {
+            for (var i = 0; i < this.video.length; i++) {
+                var _srcNode = IriSP.jQuery('<source>');
+                _srcNode.attr({
+                    src: this.video[i].src,
+                    type: this.video[i].type
+                });
+                _videoEl.append(_srcNode);
+            }
+        }
+        this.$.html(_videoEl);
+        var _popcorn = Popcorn("#" + _tmpId);
     }
-    this.$.append(_videoEl);
-    var _popcorn = Popcorn("#" + _tmpId);
 
     // Binding functions to Popcorn
     
--- a/src/widgets/Segments.js	Mon Sep 17 22:44:59 2012 +0900
+++ b/src/widgets/Segments.js	Tue Sep 18 15:39:28 2012 +0900
@@ -76,7 +76,7 @@
             _this.$segments.removeClass("inactive active");
         });
     });
-    this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), "tooltip", { type: "Tooltip" });
+    this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), { type: "Tooltip" }, "tooltip");
     this.$segments = this.$.find('.Ldt-Segments-Segment');
 }
 
--- a/test/dailymotion.htm	Mon Sep 17 22:44:59 2012 +0900
+++ b/test/dailymotion.htm	Tue Sep 18 15:39:28 2012 +0900
@@ -15,7 +15,40 @@
         <div id="LdtPlayer"></div>
         <div id="AnnotationsListContainer"></div>
         <script type="text/javascript">
-            testConfig('json/ldt-dailymotion.json', true, 'http://www.dailymotion.com/video/xodjrx_data-expression_creation');
+IriSP.libFiles.defaultDir = "libs/";
+IriSP.widgetsDir = "metadataplayer";
+var _metadata = {
+    url: "json/ldt-dailymotion.json",
+    format: 'ldt'
+};
+var _config = {
+    width : 620,
+    container : 'LdtPlayer',
+    default_options: {
+        metadata: _metadata
+    },
+    css : 'metadataplayer/LdtPlayer-core.css',
+    widgets: [
+        { type: "AutoPlayer" },
+        { type: "Sparkline" },
+        { type: "Slider" },
+        { type: "Controller" },
+        { type: "Polemic" },
+        { type: "Segments" },
+        { type: "Slice" },
+        { type: "Arrow" },
+        { type: "Annotation" },
+        { type: "CreateAnnotation" },
+        { type: "Tweet" },
+        { type: "Tagcloud" },
+        {
+            type: "AnnotationsList",
+            container: "AnnotationsListContainer"
+        },
+        { type: "Mediafragment"}
+    ]
+};
+_myPlayer = new IriSP.Metadataplayer(_config);
         </script>
     </body>
 </html>
--- a/test/jwplayer.htm	Mon Sep 17 22:44:59 2012 +0900
+++ b/test/jwplayer.htm	Tue Sep 18 15:39:28 2012 +0900
@@ -32,9 +32,8 @@
         css : 'metadataplayer/LdtPlayer-core.css',
         widgets: [
             {
-                type: "JwpPlayer",
-                live: true, 
-                height: 350, 
+                type: "AutoPlayer",
+                live: true,
                 width: 550, 
                 provider: "rtmp",
                 streamer: function(_url) {
--- a/test/mashup/moon.htm	Mon Sep 17 22:44:59 2012 +0900
+++ b/test/mashup/moon.htm	Tue Sep 18 15:39:28 2012 +0900
@@ -54,53 +54,47 @@
     format: 'ldt'
 };
 var _canPlayMp4 = document.createElement('video').canPlayType('video/mp4');
-var _config = {            
-    gui: {
-        width : 630,
-        container : 'LdtPlayer',
-        default_options: {
-            metadata: _metadata
+var _config = {
+    width : 630,
+    container : 'LdtPlayer',
+    default_options: {
+        metadata: _metadata
+    },
+    css : '../metadataplayer/LdtPlayer-core.css',
+    widgets: [
+        {
+            type: "MashupPlayer",
+            url_transform: function(_url) {
+                if (_canPlayMp4 == "maybe" || _canPlayMp4 == "probably") {
+                    return _url.replace(/\.webm$/i,'.mp4');
+                } else {
+                    return _url.replace(/\.mp4$/i,'.webm');
+                }
+                
+            }
         },
-        css : '../metadataplayer/LdtPlayer-core.css',
-        widgets: [
-            { type: "Slider" },
-            { type: "Controller" },
-            {
-                type: "Segments",
-                annotation_type: false
-            },
-            { type: "Arrow" },
-            {
-                type: "Annotation",
-                annotation_type: false
-            },
-            {
-                type: "MediaList",
-                container: "mediaList"
-            },
-            {
-                type: "AnnotationsList",
-                container: "AnnotationsListContainer",
-                default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png"
-            },
-            { type: "Mediafragment" }
-        ]
-    },
-    player:{
-        type: 'mashup-html',
-        url_transform: function(_url) {
-            if (_canPlayMp4 == "maybe" || _canPlayMp4 == "probably") {
-                return _url.replace(/\.webm$/i,'.mp4');
-            } else {
-                return _url.replace(/\.mp4$/i,'.webm');
-            }
-            
+        { type: "Slider" },
+        { type: "Controller" },
+        {
+            type: "Segments",
+            annotation_type: false
+        },
+        { type: "Arrow" },
+        {
+            type: "Annotation",
+            annotation_type: false
         },
-        height: 350,
-        width: 630,
-        autostart: true,
-        metadata: _metadata
-    }
+        {
+            type: "MediaList",
+            container: "mediaList"
+        },
+        {
+            type: "AnnotationsList",
+            container: "AnnotationsListContainer",
+            default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png"
+        },
+        { type: "Mediafragment" }
+    ]
 };
 
 _myPlayer = new IriSP.Metadataplayer(_config);
--- a/test/mashup/player-html.htm	Mon Sep 17 22:44:59 2012 +0900
+++ b/test/mashup/player-html.htm	Tue Sep 18 15:39:28 2012 +0900
@@ -72,61 +72,55 @@
 IriSP.widgetsDir = "../metadataplayer";
 IriSP.language = 'fr';
 var _metadata = {
-//    url: 'bab_files/mashup.json',
+    url: 'bab_files/mashup.json',
 //    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/b2754186-a0c9-11e0-b8bd-00145ea49a02?callback=?',
 //    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/5afd8bbe-9b75-11e1-9e5d-00145ea4a2be?callback=?',
 //	  url: 'http://localhost/pf/ldtplatform/ldt/mashupbytag/?tag=projection',
-    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/mashupbytag/?tag=mashuptag&callback=?',
+//    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/mashupbytag/?tag=mashuptag&callback=?',
 //    url: 'http://localhost/pf/ldtplatform/ldt/mashupbytag/?tag=mashuptag&in=240000&out=1860000',
     format: 'ldt'
 };
-var _canPlayMp4 = document.createElement('video').canPlayType('video/mp4');
 var _config = {
-    gui: {
-        width : 630,
-        container : 'LdtPlayer',
-        default_options: {
-            metadata: _metadata
+    width : 630,
+    container : 'LdtPlayer',
+    default_options: {
+        metadata: _metadata
+    },
+    css : '../metadataplayer/LdtPlayer-core.css',
+    widgets: [
+        {
+            type: "MashupPlayer",
+            url_transform: url_transform_func
+        },
+        { type: "Slider" },
+        { type: "Controller" },
+        {
+            type: "Segments",
+            annotation_type: false
         },
-        css : '../metadataplayer/LdtPlayer-core.css',
-        widgets: [
-            { type: "Slider" },
-            { type: "Controller" },
-            {
-                type: "Segments",
-                annotation_type: false
-            },
-            { type: "Arrow" },
-            {
-                type: "Annotation",
-                annotation_type: false
-            },
-            {
-                type: "Tagger",
-                api_endpoint: "../post-test.php",
-                tags: ["actif","amour","bonheur","captif","charité","désir","dieu","doute","famille","idéal","internationale","passif","patrie","peur","politique","président","spleen","travail"]
-            },
-            {
-                type: "MediaList",
-                container: "mediaList"
-            },
-            {
-                type: "AnnotationsList",
-                container: "annotationList",
-                //ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?",
-                //ajax_granularity: 30000,
-                //limit_count: 3
-            },
-            { type: "Mediafragment" }
-        ]
-    },
-    player:{
-        type:'mashup-html',
-        url_transform: url_transform_func,
-        height: 350,
-        width: 630,
-        metadata: _metadata
-    }
+        { type: "Arrow" },
+        {
+            type: "Annotation",
+            annotation_type: false
+        },
+        {
+            type: "Tagger",
+            api_endpoint: "../post-test.php",
+            tags: ["actif","amour","bonheur","captif","charité","désir","dieu","doute","famille","idéal","internationale","passif","patrie","peur","politique","président","spleen","travail"]
+        },
+        {
+            type: "MediaList",
+            container: "mediaList"
+        },
+        {
+            type: "AnnotationsList",
+            container: "annotationList",
+            //ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?",
+            //ajax_granularity: 30000,
+            //limit_count: 3
+        },
+        { type: "Mediafragment" }
+    ]
 };
 
 _myPlayer = new IriSP.Metadataplayer(_config);
--- a/test/mashup/player-local-html.htm	Mon Sep 17 22:44:59 2012 +0900
+++ b/test/mashup/player-local-html.htm	Tue Sep 18 15:39:28 2012 +0900
@@ -55,46 +55,39 @@
     url: 'bab_files/mashup-local-html.json',
     format: 'ldt'
 };
-var _config = {            
-    gui: {
-        width : 630,
-        container : 'LdtPlayer',
-        default_options: {
-            metadata: _metadata
+var _config = {
+    width : 630,
+    container : 'LdtPlayer',
+    default_options: {
+        metadata: _metadata
+    },
+    css : '../metadataplayer/LdtPlayer-core.css',
+    widgets: [
+        { type: "MashupPlayer" },
+        { type: "Slider" },
+        { type: "Controller" },
+        {
+            type: "Segments",
+            annotation_type: false
         },
-        css : '../metadataplayer/LdtPlayer-core.css',
-        widgets: [
-            { type: "Slider" },
-            { type: "Controller" },
-            {
-                type: "Segments",
-                annotation_type: false
-            },
-            { type: "Arrow" },
-            {
-                type: "Annotation",
-                annotation_type: false
-            },
-            {
-                type: "MediaList",
-                container: "mediaList"
-            },
-            {
-                type: "AnnotationsList",
-                container: "annotationList",
-                ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?",
-                ajax_granularity: 30000,
-                limit_count: 3
-            },
-            { type: "Mediafragment" }
-        ]
-    },
-    player:{
-        type:'mashup-html',
-        height: 350,
-        width: 630,
-        metadata: _metadata
-    }
+        { type: "Arrow" },
+        {
+            type: "Annotation",
+            annotation_type: false
+        },
+        {
+            type: "MediaList",
+            container: "mediaList"
+        },
+        {
+            type: "AnnotationsList",
+            container: "annotationList",
+            ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?",
+            ajax_granularity: 30000,
+            limit_count: 3
+        },
+        { type: "Mediafragment" }
+    ]
 };
 
 _myPlayer = new IriSP.Metadataplayer(_config);
--- a/test/oggvideo.htm	Mon Sep 17 22:44:59 2012 +0900
+++ b/test/oggvideo.htm	Tue Sep 18 15:39:28 2012 +0900
@@ -29,7 +29,7 @@
     },
     css : 'metadataplayer/LdtPlayer-core.css',
     widgets: [
-        { type: "PopcornPlayer" },
+        { type: "AutoPlayer" },
         { type: "Sparkline" },
         { type: "Slider" },
         { type: "Controller" },
--- a/test/test-config.js	Mon Sep 17 22:44:59 2012 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,60 +0,0 @@
-function testConfig(_urlMetadata, _useLocalBuild, _video, _playerType) {
-    document.getElementById('LdtPlayer').innerHTML = '';
-    _useLocalBuild = (typeof _useLocalBuild !== "undefined" && _useLocalBuild)
-    IriSP.libFiles.defaultDir = _useLocalBuild ? "libs/" : "../src/js/libs/";
-    IriSP.widgetsDir = _useLocalBuild ? "metadataplayer" : "../src/widgets";
-    var _metadata = {
-        url: _urlMetadata,
-        format: 'ldt'
-    };
-    var _config = {            
-        gui: {
-            width : 620,
-            container : 'LdtPlayer',
-            default_options: {
-                metadata: _metadata
-            },
-            css : _useLocalBuild ? 'metadataplayer/LdtPlayer-core.css' : '../src/css/LdtPlayer-core.css',
-            widgets: [
-                { type: "Sparkline" },
-                { type: "Slider" },
-                { type: "Controller" },
-                { type: "Polemic" },
-                { type: "Segments" },
-                { type: "Slice" },
-                { type: "Arrow" },
-                { type: "Annotation" },
-                { type: "CreateAnnotation" },
-                { type: "Tweet" },
-                { type: "Tagcloud" },
-                {
-                    type: "AnnotationsList",
-                    container: "AnnotationsListContainer"
-                },
-                { type: "Mediafragment"}
-/*                {
-                    type: "Trace",
-                    default_subject: "tests-iri",
-                    js_console: true
-            } */
-            ]
-        },
-        player:{
-            type:'auto',
-            live: true, 
-            height: 350, 
-            width: 620, 
-            provider: "rtmp",
-            autostart: true,
-            metadata: _metadata
-        }
-    };
-    if (typeof _playerType != "undefined") {
-        _config.player.type = _playerType;
-    }
-    if (typeof _video != "undefined") {
-        _config.player.video = _video;
-    }
-    
-    return new IriSP.Metadataplayer(_config);
-}
\ No newline at end of file
--- a/test/vimeo.htm	Mon Sep 17 22:44:59 2012 +0900
+++ b/test/vimeo.htm	Tue Sep 18 15:39:28 2012 +0900
@@ -15,7 +15,40 @@
         <div id="LdtPlayer"></div>
         <div id="AnnotationsListContainer"></div>
         <script type="text/javascript">
-            testConfig('json/ldt-vimeo.json', true);
+IriSP.libFiles.defaultDir = "libs/";
+IriSP.widgetsDir = "metadataplayer";
+var _metadata = {
+    url: "json/ldt-vimeo.json",
+    format: 'ldt'
+};
+var _config = {
+    width : 620,
+    container : 'LdtPlayer',
+    default_options: {
+        metadata: _metadata
+    },
+    css : 'metadataplayer/LdtPlayer-core.css',
+    widgets: [
+        { type: "AutoPlayer" },
+        { type: "Sparkline" },
+        { type: "Slider" },
+        { type: "Controller" },
+        { type: "Polemic" },
+        { type: "Segments" },
+        { type: "Slice" },
+        { type: "Arrow" },
+        { type: "Annotation" },
+        { type: "CreateAnnotation" },
+        { type: "Tweet" },
+        { type: "Tagcloud" },
+        {
+            type: "AnnotationsList",
+            container: "AnnotationsListContainer"
+        },
+        { type: "Mediafragment"}
+    ]
+};
+_myPlayer = new IriSP.Metadataplayer(_config);
         </script>
     </body>
 </html>
--- a/test/youtube.htm	Mon Sep 17 22:44:59 2012 +0900
+++ b/test/youtube.htm	Tue Sep 18 15:39:28 2012 +0900
@@ -7,7 +7,6 @@
         <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="../build/LdtPlayer-core.js" type="text/javascript"></script>
-        <script type="text/javascript" src="test-config.js" type="text/javascript"></script>
     </head>
 
     <body>
@@ -15,7 +14,40 @@
         <div id="LdtPlayer"></div>
         <div id="AnnotationsListContainer"></div>
         <script type="text/javascript">
-            testConfig('json/ldt-youtube.json', true);
+IriSP.libFiles.defaultDir = "libs/";
+IriSP.widgetsDir = "metadataplayer";
+var _metadata = {
+    url: "json/ldt-youtube.json",
+    format: 'ldt'
+};
+var _config = {
+    width : 620,
+    container : 'LdtPlayer',
+    default_options: {
+        metadata: _metadata
+    },
+    css : 'metadataplayer/LdtPlayer-core.css',
+    widgets: [
+        { type: "AutoPlayer" },
+        { type: "Sparkline" },
+        { type: "Slider" },
+        { type: "Controller" },
+        { type: "Polemic" },
+        { type: "Segments" },
+        { type: "Slice" },
+        { type: "Arrow" },
+        { type: "Annotation" },
+        { type: "CreateAnnotation" },
+        { type: "Tweet" },
+        { type: "Tagcloud" },
+        {
+            type: "AnnotationsList",
+            container: "AnnotationsListContainer"
+        },
+        { type: "Mediafragment"}
+    ]
+};
+_myPlayer = new IriSP.Metadataplayer(_config);
         </script>
     </body>
 </html>