diff -r c9c502117eb6 -r ff4b567d51f2 web/res/metadataplayer/HtmlMashupPlayer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/res/metadataplayer/HtmlMashupPlayer.js	Sun Feb 15 00:43:16 2015 +0100
@@ -0,0 +1,345 @@
+IriSP.Widgets.HtmlMashupPlayer = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.HtmlMashupPlayer.prototype = new IriSP.Widgets.Widget();
+
+
+IriSP.Widgets.HtmlMashupPlayer.prototype.defaults = {
+    aspect_ratio: 14/9,
+    background: "#333333"
+};
+
+IriSP.Widgets.HtmlMashupPlayer.prototype.draw = function() {
+    
+    if (!this.height && this.aspect_ratio) {
+        this.height = this.width / this.aspect_ratio;
+        this.$.css("height", this.height);
+    }
+    
+    if (this.background) {
+        this.$.css("background", this.background);
+    }
+    
+    var mashup = this.media,
+        sel = this.$,
+        width = this.width,
+        height = this.height,
+        url_transform = this.url_transform;
+    
+    mashup.currentMedia = null;
+    mashup.currentAnnotation = null;
+    mashup.seeking = false;
+    var mashupSegmentBegin,
+        mashupSegmentEnd,
+        mashupTimecode = 0,
+ //       seekdiv = $(".video-wait"),
+        mashupTimedelta;
+        
+/*    
+    function showSeek() {
+        if (currentMedia.seeking) {
+            seekdiv.show();
+        }
+    }
+*/
+
+    function changeCurrentAnnotation() {
+        if (mashupTimecode >= mashup.duration) {
+            if (!mashup.paused) {
+                mashup.paused = true;
+                mashup.trigger("pause");
+            }
+            mashupTimecode = 0;
+        }
+        var _annotation = mashup.getAnnotationAtTime( mashupTimecode );
+        if (typeof _annotation === "undefined") {
+            if (mashup.currentMedia) {
+                mashup.currentMedia.pause();
+                if (!mashup.paused) {
+                    mashup.paused = true;
+                    mashup.trigger("pause");
+                }
+            }
+            return;
+        }
+        mashup.currentAnnotation = _annotation;
+        mashupSegmentBegin = mashup.currentAnnotation.annotation.begin.milliseconds;
+        mashupSegmentEnd = mashup.currentAnnotation.annotation.end.milliseconds;
+        mashupTimedelta = mashupSegmentBegin - mashup.currentAnnotation.begin.milliseconds;
+        mashup.currentMedia = mashup.currentAnnotation.getMedia();
+        mashup.getMedias().forEach(function(_media) {
+            if (_media !== mashup.currentMedia) {
+                _media.hide();
+                _media.pause();
+            } else {
+                _media.show();
+            }
+        });
+        
+        mashup.currentMedia.setCurrentTime( mashupTimecode + mashupTimedelta);
+        mashup.currentMedia.seeking = true;
+        
+        if (!mashup.paused) {
+            mashup.currentMedia.play();
+            mashup.seeking = true;
+//            setTimeout(showSeek,200);
+        }
+        mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
+
+    }
+    
+    mashup.getMedias().forEach(addMedia);
+    changeCurrentAnnotation();
+    mashup.trigger("loadedmetadata");
+    
+    function addMedia(media) {
+        if (media.has_player) {
+            return;
+        }
+        media.has_player = true;
+        var videourl = media.video;
+        if (typeof url_transform === "function") {
+            videourl = url_transform(media.video);
+        }
+        var videoid = "video_" + media.id,
+            videoElement;
+        
+        media.show = function() {
+            
+            if (document.getElementById(videoid)) {
+                return;
+            }
+            
+            media.loaded = false;
+            media.paused = true;
+            var videoSelector = $('<video>');
+            
+            videoSelector.attr({
+                id : videoid,
+                width : width,
+                height : height
+            }).css({
+                width: width,
+                height: height
+            });
+            
+            if (typeof videourl === "string") {
+                videoSelector.attr( "src", videourl );
+            } else {
+                for (var i = 0; i < videourl.length; i++) {
+                    var _srcNode = IriSP.jQuery('<source>');
+                    _srcNode.attr({
+                        src: videourl[i].src,
+                        type: videourl[i].type
+                    });
+                    videoSelector.append(_srcNode);
+                }
+            }
+            
+            sel.append(videoSelector);
+            
+            videoElement = videoSelector[0];
+            
+            // Binding DOM events to media
+            
+            function getVolume() {
+                media.muted = videoElement.muted;
+                media.volume = videoElement.volume;
+            }
+            
+            videoSelector.on("loadedmetadata", function() {
+                getVolume();
+                media.loaded = true;
+                media.trigger("loadedmetadata");
+                media.trigger("volumechange");
+            });
+            
+            videoSelector.on("timeupdate", function() {
+                media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime));
+            });
+            
+            videoSelector.on("volumechange", function() {
+                getVolume();
+                media.trigger("volumechange");
+            });
+            
+            videoSelector.on("play", function() {
+                media.trigger("play");
+            });
+            
+            videoSelector.on("pause", function() {
+                media.trigger("pause");
+            });
+            
+            videoSelector.on("seeking", function() {
+                media.trigger("seeking");
+            });
+            
+            videoSelector.on("seeked", function() {
+                media.trigger("seeked");
+            });
+        };
+        
+        media.hide = function() {
+            videoElement = undefined;
+            sel.find("#" + videoid).remove();
+        };
+        
+        // Binding functions to Media Element Functions
+        
+        var deferredTime = undefined,
+            deferredPlayPause = undefined;
+        
+        media.on("setcurrenttime", function(_milliseconds) {
+            if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
+                try {
+                    videoElement.currentTime = (_milliseconds / 1000);
+                    deferredTime = undefined;
+                } catch(err) {
+                    deferredTime = _milliseconds;
+                }
+            } else {
+                deferredTime = _milliseconds;
+            }
+        });
+        
+        media.on("setvolume", function(_vol) {
+            if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
+                media.volume = _vol;
+                videoElement.volume = _vol;
+            }
+        });
+        
+        media.on("setmuted", function(_muted) {
+            if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
+                media.muted = _muted;
+                videoElement.muted = _muted;
+            }
+        });
+        
+        media.on("setplay", function() {
+            if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
+                try {
+                    videoElement.play();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = true;
+                }
+            } else {
+                deferredPlayPause = true;
+            }
+        });
+
+        media.on("setpause", function() {
+            if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
+                try {
+                    videoElement.pause();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = false;
+                }
+            } else {
+                deferredPlayPause = false;
+            }
+        });
+        
+        media.on("loadedmetadata", function() {
+            if (typeof deferredTime !== "undefined") {
+                media.setCurrentTime(deferredTime);
+            }
+            if (typeof deferredPlayPause !== "undefined") {
+                if (deferredPlayPause) {
+                    media.play();
+                } else {
+                    media.pause();
+                }
+            }
+        });
+        
+        // Binding UI Events and Mashup Playing to Media
+        
+        media.on("play", function() {
+            if (media === mashup.currentMedia) {
+                mashup.trigger("play");
+            }
+        });
+        
+        media.on("pause", function() {
+            if (media === mashup.currentMedia) {
+                mashup.trigger("pause");
+            }
+        });
+        
+        media.on("timeupdate", function(_time) {
+            if (!mashup.paused && media === mashup.currentMedia && !media.seeking) {
+                if ( _time < mashupSegmentEnd ) {
+                    if ( _time >= mashupSegmentBegin ) {
+                        mashupTimecode = _time - mashupTimedelta;
+                    } else {
+                        mashupTimecode = mashupSegmentBegin - mashupTimedelta;
+                        media.setCurrentTime(mashupSegmentBegin);
+                    }
+                } else {
+                    mashupTimecode = mashupSegmentEnd - mashupTimedelta;
+                    media.pause();
+                    changeCurrentAnnotation();
+                }
+                mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
+            }
+        });
+        
+        media.on("seeked", function() {
+            media.seeking = false;
+            if (media === mashup.currentMedia && mashup.seeking) {
+                mashup.seeking = false;
+            }
+//            seekdiv.hide();
+        });
+        
+        media.on("volumechange", function() {
+            mashup.muted = media.muted;
+            mashup.volume = media.volume;
+            mashup.trigger("volumechange");
+        });
+        
+    }
+
+    // Mashup Events
+    
+    mashup.on("setcurrenttime", function(_milliseconds) {
+        mashupTimecode = _milliseconds;
+        changeCurrentAnnotation();
+    });
+    
+    mashup.on("setvolume", function(_vol) {
+        mashup.getMedias().forEach(function(_media) {
+            _media.setVolume(_vol);
+        });
+        mashup.volume = _vol;
+    });
+    
+    mashup.on("setmuted", function(_muted) {
+        mashup.getMedias().forEach(function(_media) {
+            _media.setMuted(_muted);
+        });
+        mashup.muted = _muted;
+    });
+    
+    mashup.on("setplay", function() {
+        mashup.paused = false;
+        changeCurrentAnnotation();
+    });
+    
+    mashup.on("setpause", function() {
+        mashup.paused = true;
+        if (mashup.currentMedia) {
+            mashup.currentMedia.pause();
+        }
+    });
+    
+    mashup.on("loadedmetadata", function() {
+        changeCurrentAnnotation();
+    });
+    
+};
\ No newline at end of file