integration/js/tagplayer.js
changeset 81 a2befc2110c1
parent 76 4bdadca1cd5a
child 118 124f7745a3d6
--- 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;
     });