# HG changeset patch
# User veltr
# Date 1358424699 -3600
# Node ID a2befc2110c1aca5ca4cd96c0ccd1f81fab0fff9
# Parent  46b897524cc4a03e12d6977d30b29ef88af43c8a
IE Bugfixes + Seamless HD/SD

diff -r 46b897524cc4 -r a2befc2110c1 integration/js/contentplayer.js
--- a/integration/js/contentplayer.js	Wed Jan 16 21:26:15 2013 +0100
+++ b/integration/js/contentplayer.js	Thu Jan 17 13:11:39 2013 +0100
@@ -9,7 +9,8 @@
         currentSegment,
         currentMedia,
         globalTags = {},
-        seqCount;
+        seqCount,
+        iPad = /iPad/.test(navigator.userAgent);
         
     var ratio = 2.37;
     
@@ -224,6 +225,7 @@
         currentMedia = project.currentMedia;
         
         addMedia(currentMedia);
+        currentMedia.show();
         
         $("#duration").text(currentMedia.duration.toString());
         $("h1").text(currentMedia.title); //TODO: Remove when on platform
@@ -308,134 +310,172 @@
         resizeTagsDrag(!!tagToShow);
     }
     
+    var can_play_mp4 = !!document.createElement('video').canPlayType('video/mp4');
+    
     function addMedia(media) {
-        if (media.has_player) {
+        if (media.is_added) {
             return;
         }
-        media.has_player = true;
-        media.loaded = false;
-        media.paused = true;
-        var videourl = video_url_transform(media.video),
-            videoid = "video_" + media.id,
-            videoEl = $('<video>'),
-            mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
-            webm_file = videourl.replace(/\.mp4$/i,'.webm'),
-            mediaEl = videoEl[0],
-            can_play_mp4 = !!mediaEl.canPlayType('video/mp4'),
-            can_play_webm = !!mediaEl.canPlayType('video/webm');
+        media.is_added = true;
+        
+        var videoid = "video_" + media.id,
+            mp4_file = media.video.replace(/\.webm$/i,'.mp4'),
+            webm_file = media.video.replace(/\.mp4$/i,'.webm');
         
-        videoEl.attr({
-            id : videoid
-        }).css({
-            position : "absolute",
-            left: 0,
-            top: 0,
-            width : "100%",
-            height : "100%"
-        });
-        
-        if (can_play_mp4 && can_play_webm) {
-            var mp4_src = $('<source>'),
-                webm_src = $('<source>');
-            mp4_src.attr({
-                src: mp4_file,
-                type: "video/mp4"
+        media.addToDom = function() {
+            
+            var video_file = video_url_transform(can_play_mp4 ? mp4_file : webm_file);
+            
+            if (document.getElementById(videoid)) {
+                return;
+            }
+            
+            media.loaded = false;
+            media.paused = true;
+            var videoSelector = $('<video>');
+            
+            videoSelector.attr({
+                src : video_file,
+                id : videoid
+            }).css({
+                position : "absolute",
+                left: 0,
+                top: 0,
+                width : "100%",
+                height : "100%",
+                display: "none"
             });
-            webm_src.attr({
-                src: webm_file,
-                type: "video/webm"
+    
+            $("#video_sequence").append(videoSelector);
+            
+            // Binding DOM events to media
+            
+            function getVolume() {
+                var videoElement = document.getElementById(videoid);
+                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() {
+                var videoElement = document.getElementById(videoid);
+                media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime));
             });
             
-            videoEl.append(mp4_src).append(webm_src);
-        } else {
-            videoEl.attr("src", can_play_mp4 ? mp4_file : webm_file);
+            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");
+            });
         }
-
-        $("#video_sequence").append(videoEl);
-        
+        media.removeFromDom = function() {
+            $("#" + videoid).remove();
+        }
         media.show = function() {
-            videoEl.show();
+            if (!$("#" + videoid).length) {
+                media.addToDom();
+            }
+            $("#" + videoid).show();
         }
         media.hide = function() {
-            videoEl.hide();
+            $("#" + videoid).hide();
         }
         
         // Binding functions to Media Element Functions
         
+        var deferredTime = undefined,
+            deferredPlayPause = undefined;
+        
         media.on("setcurrenttime", function(_milliseconds) {
-            try {
-                mediaEl.currentTime = (_milliseconds / 1000);
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.currentTime = (_milliseconds / 1000);
+                    deferredTime = undefined;
+                } catch(err) {
+                    deferredTime = _milliseconds;
+                }
+            } else {
+                deferredTime = _milliseconds;
             }
-            catch (err) {}
         });
         
         media.on("setvolume", function(_vol) {
-            try {
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
                 media.volume = _vol;
                 mediaEl.volume = _vol;
             }
-            catch (err) {}
         });
         
         media.on("setmuted", function(_muted) {
-            try {
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
                 media.muted = _muted;
                 mediaEl.muted = _muted;
             }
-            catch (err) {}
         });
         
         media.on("setplay", function() {
-            try {
-                mediaEl.play();
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.play();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = true;
+                }
+            } else {
+                deferredPlayPause = true;
             }
-            catch (err) {}
         });
-        
+
         media.on("setpause", function() {
-            try {
-                mediaEl.pause();
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.pause();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = false;
+                }
+            } else {
+                deferredPlayPause = false;
             }
-            catch (err) {}
         });
         
-        // Binding DOM events to media
-        
-        function getVolume() {
-            media.muted = mediaEl.muted;
-            media.volume = mediaEl.volume;
-        }
-        
-        videoEl.on("loadedmetadata", function() {
-            getVolume();
-            media.loaded = true;
-            media.trigger("loadedmetadata");
-            media.trigger("volumechange");
-        })
-        
-        videoEl.on("timeupdate", function() {
-            media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime));
-        });
-        
-        videoEl.on("volumechange", function() {
-            getVolume();
-            media.trigger("volumechange");
-        })
-        
-        videoEl.on("play", function() {
-            media.trigger("play");
-        });
-        
-        videoEl.on("pause", function() {
-            media.trigger("pause");
-        });
-        
-        videoEl.on("seeking", function() {
-            media.trigger("seeking");
-        });
-        
-        videoEl.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
@@ -452,7 +492,7 @@
             $("#current").text(_time.toString());
             timeSlider.slider("value", slidersRange * _time / media.duration);
         });
-        
+            
     }
     
     $(".sdhdgroup").addClass(resolution);
@@ -461,7 +501,13 @@
         var newres = $(this).attr("title");
         if (resolution !== newres) {
             window.localStorage.setItem("resolution", newres);
-            document.location.reload();
+             $(".sdhdgroup").removeClass(resolution).addClass(newres);
+            resolution = newres;
+            var t = currentMedia.getCurrentTime();
+            currentMedia.removeFromDom();
+            currentMedia.show();
+            currentMedia.setCurrentTime(t);
+            currentMedia.play();
         }
         return false;
     });
diff -r 46b897524cc4 -r a2befc2110c1 integration/js/tagplayer.js
--- a/integration/js/tagplayer.js	Wed Jan 16 21:26:15 2013 +0100
+++ b/integration/js/tagplayer.js	Thu Jan 17 13:11:39 2013 +0100
@@ -16,7 +16,8 @@
         globalTags = {},
         seqCount,
         mediasInDom = [],
-        MAX_LOADED_VIDEOS = 2;
+        MAX_LOADED_VIDEOS = 2,
+        iPad = /iPad/.test(navigator.userAgent);
         
     var ratio = 2.37;
 
@@ -306,7 +307,6 @@
                 m.hide();
             }
         });
-        console.log("There are now",mediasInDom.length,'~',$("video").length,"<video>s in DOM");
         $("#title_sequence li").removeClass("here");
         $("#title_sequence li[data-segment-index='" + n + "']").addClass("here");
         resizeSegmentDrag();
@@ -369,27 +369,25 @@
         }
         media.is_added = true;
         
-        var videourl = video_url_transform(media.video),
-            videoid = "video_" + media.id,
-            mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
-            webm_file = videourl.replace(/\.mp4$/i,'.webm'),
-            video_file = can_play_mp4 ? mp4_file : webm_file,
-            videoEl = undefined,
-            mediaEl = undefined;
+        var videoid = "video_" + media.id,
+            mp4_file = media.video.replace(/\.webm$/i,'.mp4'),
+            webm_file = media.video.replace(/\.mp4$/i,'.webm');
         
         media.addToDom = function() {
-            if (videoEl) {
+            
+            var video_file = video_url_transform(can_play_mp4 ? mp4_file : webm_file);
+            
+            if (document.getElementById(videoid)) {
                 return;
             }
-            console.log("Adding to DOM",media.title);
+            
             mediasInDom.push(media);
             mediasInDom = _(mediasInDom).uniq();
             media.loaded = false;
             media.paused = true;
-            videoEl = $('<video>');
-            mediaEl = videoEl[0];
+            var videoSelector = $('<video>');
             
-            videoEl.attr({
+            videoSelector.attr({
                 src : video_file,
                 id : videoid
             }).css({
@@ -401,104 +399,137 @@
                 display: "none"
             });
     
-            $("#video_sequence").append(videoEl);
+            $("#video_sequence").append(videoSelector);
             
             // Binding DOM events to media
             
             function getVolume() {
-                media.muted = mediaEl.muted;
-                media.volume = mediaEl.volume;
+                var videoElement = document.getElementById(videoid);
+                media.muted = videoElement.muted;
+                media.volume = videoElement.volume;
             }
             
-            videoEl.on("loadedmetadata", function() {
+            videoSelector.on("loadedmetadata", function() {
                 getVolume();
                 media.loaded = true;
                 media.trigger("loadedmetadata");
                 media.trigger("volumechange");
             })
             
-            videoEl.on("timeupdate", function() {
-                media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime));
+            videoSelector.on("timeupdate", function() {
+                var videoElement = document.getElementById(videoid);
+                media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime));
             });
             
-            videoEl.on("volumechange", function() {
+            videoSelector.on("volumechange", function() {
                 getVolume();
                 media.trigger("volumechange");
             })
             
-            videoEl.on("play", function() {
+            videoSelector.on("play", function() {
                 media.trigger("play");
             });
             
-            videoEl.on("pause", function() {
+            videoSelector.on("pause", function() {
                 media.trigger("pause");
             });
             
-            videoEl.on("seeking", function() {
+            videoSelector.on("seeking", function() {
                 media.trigger("seeking");
             });
             
-            videoEl.on("seeked", function() {
+            videoSelector.on("seeked", function() {
                 media.trigger("seeked");
             });
         }
-        
         media.removeFromDom = function() {
-            console.log("Removing from DOM",media.title);
-            videoEl.remove();
-            videoEl = undefined;
-            mediaEl = undefined;
+            $("#" + videoid).remove();
             mediasInDom = _(mediasInDom).without(media);
         }
         media.show = function() {
-            if (!videoEl) {
+            if (!$("#" + videoid).length) {
                 media.addToDom();
             }
-            console.log("Showing media",media.title);
-            videoEl.show();
+            $("#" + videoid).show();
         }
         media.hide = function() {
-            if (videoEl) {
-                videoEl.hide();
-            }
+            $("#" + videoid).hide();
         }
         
         // Binding functions to Media Element Functions
         
+        var deferredTime = undefined,
+            deferredPlayPause = undefined;
+        
         media.on("setcurrenttime", function(_milliseconds) {
-            try {
-                mediaEl.currentTime = (_milliseconds / 1000);
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.currentTime = (_milliseconds / 1000);
+                    deferredTime = undefined;
+                } catch(err) {
+                    deferredTime = _milliseconds;
+                }
+            } else {
+                deferredTime = _milliseconds;
             }
-            catch (err) {}
         });
+        
         media.on("setvolume", function(_vol) {
-            try {
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
                 media.volume = _vol;
                 mediaEl.volume = _vol;
             }
-            catch (err) {}
         });
+        
         media.on("setmuted", function(_muted) {
-            try {
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
                 media.muted = _muted;
                 mediaEl.muted = _muted;
             }
-            catch (err) {}
         });
+        
         media.on("setplay", function() {
-            try {
-                mediaEl.play();
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.play();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = true;
+                }
+            } else {
+                deferredPlayPause = true;
             }
-            catch (err) {}
         });
+
         media.on("setpause", function() {
-            if (!mediaEl) {
-                return;
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.pause();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = false;
+                }
+            } else {
+                deferredPlayPause = false;
             }
-            try {
-                mediaEl.pause();
+        });
+        
+        media.on("loadedmetadata", function() {
+            if (typeof deferredTime !== "undefined") {
+                media.setCurrentTime(deferredTime);
             }
-            catch (err) {}
+            if (typeof deferredPlayPause !== "undefined") {
+                if (deferredPlayPause) {
+                    media.play();
+                } else {
+                    media.pause();
+                }
+            }
         });
         
         // Binding UI Events and Mashup Playing to Media
@@ -545,7 +576,17 @@
         var newres = $(this).attr("title");
         if (resolution !== newres) {
             window.localStorage.setItem("resolution", newres);
-            document.location.reload();
+             $(".sdhdgroup").removeClass(resolution).addClass(newres);
+            resolution = newres;
+            var t = currentMedia.getCurrentTime(),
+                mediaList = mediasInDom.slice();
+            _(mediaList).each(function(m) {
+                m.removeFromDom();
+                m.addToDom();
+            });
+            currentMedia.show();
+            currentMedia.setCurrentTime(t);
+            currentMedia.play();
         }
         return false;
     });
diff -r 46b897524cc4 -r a2befc2110c1 src/theend/static/theend/js/contentplayer.js
--- a/src/theend/static/theend/js/contentplayer.js	Wed Jan 16 21:26:15 2013 +0100
+++ b/src/theend/static/theend/js/contentplayer.js	Thu Jan 17 13:11:39 2013 +0100
@@ -9,7 +9,8 @@
         currentSegment,
         currentMedia,
         globalTags = {},
-        seqCount;
+        seqCount,
+        iPad = /iPad/.test(navigator.userAgent);
         
     var ratio = 2.37;
     
@@ -224,9 +225,9 @@
         currentMedia = project.currentMedia;
         
         addMedia(currentMedia);
+        currentMedia.show();
         
         $("#duration").text(currentMedia.duration.toString());
-        $("h1").text(currentMedia.title); //TODO: Remove when on platform
         var segmentsHtml = "";
         
         project.getAnnotations().forEach(function(s) {
@@ -308,134 +309,172 @@
         resizeTagsDrag(!!tagToShow);
     }
     
+    var can_play_mp4 = !!document.createElement('video').canPlayType('video/mp4');
+    
     function addMedia(media) {
-        if (media.has_player) {
+        if (media.is_added) {
             return;
         }
-        media.has_player = true;
-        media.loaded = false;
-        media.paused = true;
-        var videourl = video_url_transform(media.video),
-            videoid = "video_" + media.id,
-            videoEl = $('<video>'),
-            mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
-            webm_file = videourl.replace(/\.mp4$/i,'.webm'),
-            mediaEl = videoEl[0],
-            can_play_mp4 = !!mediaEl.canPlayType('video/mp4'),
-            can_play_webm = !!mediaEl.canPlayType('video/webm');
+        media.is_added = true;
+        
+        var videoid = "video_" + media.id,
+            mp4_file = media.video.replace(/\.webm$/i,'.mp4'),
+            webm_file = media.video.replace(/\.mp4$/i,'.webm');
         
-        videoEl.attr({
-            id : videoid
-        }).css({
-            position : "absolute",
-            left: 0,
-            top: 0,
-            width : "100%",
-            height : "100%"
-        });
-        
-        if (can_play_mp4 && can_play_webm) {
-            var mp4_src = $('<source>'),
-                webm_src = $('<source>');
-            mp4_src.attr({
-                src: mp4_file,
-                type: "video/mp4"
+        media.addToDom = function() {
+            
+            var video_file = video_url_transform(can_play_mp4 ? mp4_file : webm_file);
+            
+            if (document.getElementById(videoid)) {
+                return;
+            }
+            
+            media.loaded = false;
+            media.paused = true;
+            var videoSelector = $('<video>');
+            
+            videoSelector.attr({
+                src : video_file,
+                id : videoid
+            }).css({
+                position : "absolute",
+                left: 0,
+                top: 0,
+                width : "100%",
+                height : "100%",
+                display: "none"
             });
-            webm_src.attr({
-                src: webm_file,
-                type: "video/webm"
+    
+            $("#video_sequence").append(videoSelector);
+            
+            // Binding DOM events to media
+            
+            function getVolume() {
+                var videoElement = document.getElementById(videoid);
+                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() {
+                var videoElement = document.getElementById(videoid);
+                media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime));
             });
             
-            videoEl.append(mp4_src).append(webm_src);
-        } else {
-            videoEl.attr("src", can_play_mp4 ? mp4_file : webm_file);
+            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");
+            });
         }
-
-        $("#video_sequence").append(videoEl);
-        
+        media.removeFromDom = function() {
+            $("#" + videoid).remove();
+        }
         media.show = function() {
-            videoEl.show();
+            if (!$("#" + videoid).length) {
+                media.addToDom();
+            }
+            $("#" + videoid).show();
         }
         media.hide = function() {
-            videoEl.hide();
+            $("#" + videoid).hide();
         }
         
         // Binding functions to Media Element Functions
         
+        var deferredTime = undefined,
+            deferredPlayPause = undefined;
+        
         media.on("setcurrenttime", function(_milliseconds) {
-            try {
-                mediaEl.currentTime = (_milliseconds / 1000);
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.currentTime = (_milliseconds / 1000);
+                    deferredTime = undefined;
+                } catch(err) {
+                    deferredTime = _milliseconds;
+                }
+            } else {
+                deferredTime = _milliseconds;
             }
-            catch (err) {}
         });
         
         media.on("setvolume", function(_vol) {
-            try {
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
                 media.volume = _vol;
                 mediaEl.volume = _vol;
             }
-            catch (err) {}
         });
         
         media.on("setmuted", function(_muted) {
-            try {
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
                 media.muted = _muted;
                 mediaEl.muted = _muted;
             }
-            catch (err) {}
         });
         
         media.on("setplay", function() {
-            try {
-                mediaEl.play();
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.play();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = true;
+                }
+            } else {
+                deferredPlayPause = true;
             }
-            catch (err) {}
         });
-        
+
         media.on("setpause", function() {
-            try {
-                mediaEl.pause();
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.pause();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = false;
+                }
+            } else {
+                deferredPlayPause = false;
             }
-            catch (err) {}
         });
         
-        // Binding DOM events to media
-        
-        function getVolume() {
-            media.muted = mediaEl.muted;
-            media.volume = mediaEl.volume;
-        }
-        
-        videoEl.on("loadedmetadata", function() {
-            getVolume();
-            media.loaded = true;
-            media.trigger("loadedmetadata");
-            media.trigger("volumechange");
-        })
-        
-        videoEl.on("timeupdate", function() {
-            media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime));
-        });
-        
-        videoEl.on("volumechange", function() {
-            getVolume();
-            media.trigger("volumechange");
-        })
-        
-        videoEl.on("play", function() {
-            media.trigger("play");
-        });
-        
-        videoEl.on("pause", function() {
-            media.trigger("pause");
-        });
-        
-        videoEl.on("seeking", function() {
-            media.trigger("seeking");
-        });
-        
-        videoEl.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
@@ -452,7 +491,7 @@
             $("#current").text(_time.toString());
             timeSlider.slider("value", slidersRange * _time / media.duration);
         });
-        
+            
     }
     
     $(".sdhdgroup").addClass(resolution);
@@ -461,7 +500,13 @@
         var newres = $(this).attr("title");
         if (resolution !== newres) {
             window.localStorage.setItem("resolution", newres);
-            document.location.reload();
+             $(".sdhdgroup").removeClass(resolution).addClass(newres);
+            resolution = newres;
+            var t = currentMedia.getCurrentTime();
+            currentMedia.removeFromDom();
+            currentMedia.show();
+            currentMedia.setCurrentTime(t);
+            currentMedia.play();
         }
         return false;
     });
diff -r 46b897524cc4 -r a2befc2110c1 src/theend/static/theend/js/tagplayer.js
--- a/src/theend/static/theend/js/tagplayer.js	Wed Jan 16 21:26:15 2013 +0100
+++ b/src/theend/static/theend/js/tagplayer.js	Thu Jan 17 13:11:39 2013 +0100
@@ -16,7 +16,8 @@
         globalTags = {},
         seqCount,
         mediasInDom = [],
-        MAX_LOADED_VIDEOS = 2;
+        MAX_LOADED_VIDEOS = 2,
+        iPad = /iPad/.test(navigator.userAgent);
         
     var ratio = 2.37;
 
@@ -306,7 +307,6 @@
                 m.hide();
             }
         });
-        console.log("There are now",mediasInDom.length,'~',$("video").length,"<video>s in DOM");
         $("#title_sequence li").removeClass("here");
         $("#title_sequence li[data-segment-index='" + n + "']").addClass("here");
         resizeSegmentDrag();
@@ -369,27 +369,25 @@
         }
         media.is_added = true;
         
-        var videourl = video_url_transform(media.video),
-            videoid = "video_" + media.id,
-            mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
-            webm_file = videourl.replace(/\.mp4$/i,'.webm'),
-            video_file = can_play_mp4 ? mp4_file : webm_file,
-            videoEl = undefined,
-            mediaEl = undefined;
+        var videoid = "video_" + media.id,
+            mp4_file = media.video.replace(/\.webm$/i,'.mp4'),
+            webm_file = media.video.replace(/\.mp4$/i,'.webm');
         
         media.addToDom = function() {
-            if (videoEl) {
+            
+            var video_file = video_url_transform(can_play_mp4 ? mp4_file : webm_file);
+            
+            if (document.getElementById(videoid)) {
                 return;
             }
-            console.log("Adding to DOM",media.title);
+            
             mediasInDom.push(media);
             mediasInDom = _(mediasInDom).uniq();
             media.loaded = false;
             media.paused = true;
-            videoEl = $('<video>');
-            mediaEl = videoEl[0];
+            var videoSelector = $('<video>');
             
-            videoEl.attr({
+            videoSelector.attr({
                 src : video_file,
                 id : videoid
             }).css({
@@ -401,104 +399,137 @@
                 display: "none"
             });
     
-            $("#video_sequence").append(videoEl);
+            $("#video_sequence").append(videoSelector);
             
             // Binding DOM events to media
             
             function getVolume() {
-                media.muted = mediaEl.muted;
-                media.volume = mediaEl.volume;
+                var videoElement = document.getElementById(videoid);
+                media.muted = videoElement.muted;
+                media.volume = videoElement.volume;
             }
             
-            videoEl.on("loadedmetadata", function() {
+            videoSelector.on("loadedmetadata", function() {
                 getVolume();
                 media.loaded = true;
                 media.trigger("loadedmetadata");
                 media.trigger("volumechange");
             })
             
-            videoEl.on("timeupdate", function() {
-                media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime));
+            videoSelector.on("timeupdate", function() {
+                var videoElement = document.getElementById(videoid);
+                media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime));
             });
             
-            videoEl.on("volumechange", function() {
+            videoSelector.on("volumechange", function() {
                 getVolume();
                 media.trigger("volumechange");
             })
             
-            videoEl.on("play", function() {
+            videoSelector.on("play", function() {
                 media.trigger("play");
             });
             
-            videoEl.on("pause", function() {
+            videoSelector.on("pause", function() {
                 media.trigger("pause");
             });
             
-            videoEl.on("seeking", function() {
+            videoSelector.on("seeking", function() {
                 media.trigger("seeking");
             });
             
-            videoEl.on("seeked", function() {
+            videoSelector.on("seeked", function() {
                 media.trigger("seeked");
             });
         }
-        
         media.removeFromDom = function() {
-            console.log("Removing from DOM",media.title);
-            videoEl.remove();
-            videoEl = undefined;
-            mediaEl = undefined;
+            $("#" + videoid).remove();
             mediasInDom = _(mediasInDom).without(media);
         }
         media.show = function() {
-            if (!videoEl) {
+            if (!$("#" + videoid).length) {
                 media.addToDom();
             }
-            console.log("Showing media",media.title);
-            videoEl.show();
+            $("#" + videoid).show();
         }
         media.hide = function() {
-            if (videoEl) {
-                videoEl.hide();
-            }
+            $("#" + videoid).hide();
         }
         
         // Binding functions to Media Element Functions
         
+        var deferredTime = undefined,
+            deferredPlayPause = undefined;
+        
         media.on("setcurrenttime", function(_milliseconds) {
-            try {
-                mediaEl.currentTime = (_milliseconds / 1000);
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.currentTime = (_milliseconds / 1000);
+                    deferredTime = undefined;
+                } catch(err) {
+                    deferredTime = _milliseconds;
+                }
+            } else {
+                deferredTime = _milliseconds;
             }
-            catch (err) {}
         });
+        
         media.on("setvolume", function(_vol) {
-            try {
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
                 media.volume = _vol;
                 mediaEl.volume = _vol;
             }
-            catch (err) {}
         });
+        
         media.on("setmuted", function(_muted) {
-            try {
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
                 media.muted = _muted;
                 mediaEl.muted = _muted;
             }
-            catch (err) {}
         });
+        
         media.on("setplay", function() {
-            try {
-                mediaEl.play();
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.play();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = true;
+                }
+            } else {
+                deferredPlayPause = true;
             }
-            catch (err) {}
         });
+
         media.on("setpause", function() {
-            if (!mediaEl) {
-                return;
+            var mediaEl = document.getElementById(videoid);
+            if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+                try {
+                    mediaEl.pause();
+                    deferredPlayPause = undefined;
+                } catch(err) {
+                    deferredPlayPause = false;
+                }
+            } else {
+                deferredPlayPause = false;
             }
-            try {
-                mediaEl.pause();
+        });
+        
+        media.on("loadedmetadata", function() {
+            if (typeof deferredTime !== "undefined") {
+                media.setCurrentTime(deferredTime);
             }
-            catch (err) {}
+            if (typeof deferredPlayPause !== "undefined") {
+                if (deferredPlayPause) {
+                    media.play();
+                } else {
+                    media.pause();
+                }
+            }
         });
         
         // Binding UI Events and Mashup Playing to Media
@@ -545,7 +576,17 @@
         var newres = $(this).attr("title");
         if (resolution !== newres) {
             window.localStorage.setItem("resolution", newres);
-            document.location.reload();
+             $(".sdhdgroup").removeClass(resolution).addClass(newres);
+            resolution = newres;
+            var t = currentMedia.getCurrentTime(),
+                mediaList = mediasInDom.slice();
+            _(mediaList).each(function(m) {
+                m.removeFromDom();
+                m.addToDom();
+            });
+            currentMedia.show();
+            currentMedia.setCurrentTime(t);
+            currentMedia.play();
         }
         return false;
     });