diff -r 729a6ee4ea1c -r f1b68efb360a integration/js/mashupcore.js
--- a/integration/js/mashupcore.js	Thu Dec 06 17:07:49 2012 +0100
+++ b/integration/js/mashupcore.js	Thu Jan 17 17:20:23 2013 +0100
@@ -297,6 +297,8 @@
 
     }
     
+    var can_play_mp4 = !!document.createElement('video').canPlayType('video/mp4');
+    
     function addMedia(media) {
         if (media.has_player) {
             return;
@@ -310,116 +312,155 @@
             videoEl = $('<video>'),
             width = $(".video").width(),
             height = $(".video").height(),
-/*
             mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
             webm_file = videourl.replace(/\.mp4$/i,'.webm'),
-*/
-            mp4_src = $('<source>');
-/*
-            webm_src = $('<source>'),
-*/
-        mp4_src.attr({
-            src: videourl, //mp4_file,
-            type: "video/mp4"
-        });
-/*
-        webm_src.attr({
-            src: webm_file,
-            type: "video/webm"
-        });
-*/
-        videoEl.attr({
-            id : videoid,
-            width : width,
-            height : height
-        }).css({
-            position : "absolute",
-            left: 0,
-            top: 0,
-            width : width,
-            height : height
-        });
-        videoEl.append(mp4_src); //.append(webm_src);
-        $(".video").append(videoEl);
+            videourl = (can_play_mp4 ? mp4_file : webm_file);
         
         media.show = function() {
-            videoEl.show();
-        }
-        media.hide = function() {
-            videoEl.hide();
+            
+            if (document.getElementById(videoid)) {
+                return;
+            }
+            
+            media.loaded = false;
+            media.paused = true;
+            var videoSelector = $('<video>');
+            
+            videoSelector.attr({
+                id : videoid,
+                src : videourl,
+                width : width,
+                height : height
+            }).css({
+                position : "absolute",
+                left: 0,
+                top: 0,
+                width : "100%",
+                height : "100%"
+            });
+            
+            $(".video").append(videoSelector);
+            
+            var videoElement = document.getElementById(videoid);
+            
+            // 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");
+            });
         }
         
-        var popcorn = Popcorn("#" + videoid);
+        media.hide = function() {
+            $("#" + videoid).remove();
+        }
         
-        // Binding functions to Popcorn
+        // Binding functions to Media Element Functions
+        
+        var deferredTime = undefined,
+            deferredPlayPause = undefined;
         
         media.on("setcurrenttime", function(_milliseconds) {
-            if (media.loaded) {
-                popcorn.currentTime(_milliseconds / 1000);
-                media.seeking = true;
-                setTimeout(showSeek,200);
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) {
+                try {
+                    mediaEl.currentTime = (_milliseconds / 1000);
+                    deferredTime = undefined;
+                } catch(err) {
+                    deferredTime = _milliseconds;
+                }
+            } else {
+                deferredTime = _milliseconds;
             }
         });
         
         media.on("setvolume", function(_vol) {
-            media.volume = _vol;
-            if (media.loaded) {
-                popcorn.volume(_vol);
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) {
+                media.volume = _vol;
+                mediaEl.volume = _vol;
             }
         });
         
         media.on("setmuted", function(_muted) {
-            media.muted = _muted;
-            if (media.loaded) {
-                popcorn.muted(_muted);
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) {
+                media.muted = _muted;
+                mediaEl.muted = _muted;
             }
         });
         
         media.on("setplay", function() {
-            if (media.loaded) {
-                popcorn.play();
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) {
+                try {
+                    mediaEl.play();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = true;
+                }
+            } else {
+                deferredPlayPause = true;
             }
         });
-        
+
         media.on("setpause", function() {
-            if (media.loaded) {
-                popcorn.pause();
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) {
+                try {
+                    mediaEl.pause();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = false;
+                }
+            } else {
+                deferredPlayPause = false;
             }
         });
         
-        // Binding Popcorn events to media
-        
-        function getVolume() {
-            media.muted = popcorn.muted();
-            media.volume = popcorn.volume();
-        }
-        
-        popcorn.on("loadedmetadata", function() {
-            getVolume();
-            media.loaded = true;
-            media.trigger("loadedmetadata");
-            media.trigger("volumechange");
-        })
-        
-        popcorn.on("timeupdate", function() {
-            media.trigger("timeupdate", new IriSP.Model.Time(1000*popcorn.currentTime()));
-        });
-        
-        popcorn.on("volumechange", function() {
-            getVolume();
-            media.trigger("volumechange");
-        })
-        
-        popcorn.on("play", function() {
-            media.trigger("play");
-        });
-        
-        popcorn.on("pause", function() {
-            media.trigger("pause");
-        });
-        
-        popcorn.on("seeked", function() {
-            media.trigger("seeked");
+        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