work around mobile interaction restrictions

source/UI/js/Video/VideoElement.js

@@ -112,12 +112,17 @@ Ox.VideoElement = function(options, self) {
         }
     }, 30);
 
-    loadItems(function() {
-        setCurrentItem(0);
-        self.options.autoplay && setTimeout(function() {
-            that.play();
-        });
-    });
+    // mobile browsers only allow playing media elements after user interaction
+    if (mediaPlaybackRequiresUserGesture()) {
+        window.addEventListener('keydown', removeBehaviorsRestrictions);
+        window.addEventListener('mousedown', removeBehaviorsRestrictions);
+        window.addEventListener('touchstart', removeBehaviorsRestrictions);
+        setTimeout(function() {
+            that.triggerEvent('requiresusergesture');
+        })
+    } else {
+        setSource();
+    }
 
     function getCurrentTime() {
         var item = self.items[self.currentItem];
@@ -327,6 +332,7 @@ Ox.VideoElement = function(options, self) {
             self.video.currentTime, self.video.seeking);
         isReady(self.$video, function(video) {
             self.$video.one('seeked', function() {
+                Ox.Log('Video', 'sCV', 'seeked callback');
                 self.loading = false;
                 !self.paused && self.video.play();
                 self.$video.show();
@@ -336,6 +342,10 @@ Ox.VideoElement = function(options, self) {
             if (!self.seeking) {
                 Ox.Log('Video', 'sCV set in', video.src, item['in'] || 0, video.currentTime, video.seeking);
                 video.currentTime = item['in'] || 0;
+                if (self.paused) {
+                    self.video.play();
+                    self.video.pause();
+                }
             }
         });
     }
@@ -386,6 +396,35 @@ Ox.VideoElement = function(options, self) {
         }
     }
 
+    function setSource() {
+        Ox.Log('Video', 'self.loadedMetadata', self.loadedMetadata);
+        self.loadedMetadata = false;
+        loadItems(function() {
+            setCurrentItem(0);
+            self.options.autoplay && setTimeout(function() {
+                that.play();
+            });
+        });
+    }
+
+    function mediaPlaybackRequiresUserGesture() {
+        // test if play() is ignored when not called from an input event handler
+        var video = document.createElement('video');
+        video.play();
+        return video.paused;
+    }
+
+    function removeBehaviorsRestrictions() {
+        Ox.Log('Video', 'remove restrictions on video', self.$video);
+        self.$videos.forEach(function(video) {
+            video.load();
+        });
+        window.removeEventListener('keydown', removeBehaviorsRestrictions);
+        window.removeEventListener('mousedown', removeBehaviorsRestrictions);
+        window.removeEventListener('touchstart', removeBehaviorsRestrictions);
+        setTimeout(setSource, 1000);
+    }
+
     /*@
     animate <f> animate
     @*/

source/UI/js/Video/VideoPlayer.js

@@ -443,8 +443,9 @@ Ox.VideoPlayer = function(options, self) {
             .bindEvent(Ox.extend({
                 durationchange: durationchange,
                 ended: ended,
-                loadedmetadata: loadedmetadata,
                 itemchange: itemchange,
+                loadedmetadata: loadedmetadata,
+                requiresusergesture: requiresusergesture,
                 seeked: seeked,
                 seeking: seeking,
                 sizechange: sizechange
@@ -1889,6 +1890,33 @@ Ox.VideoPlayer = function(options, self) {
         Ox.Log('Video', 'ITEMCHANGE', item);
     }
 
+    function requiresusergesture() {
+        Ox.Log('Video', 'requires user gesture');
+        var $playIcon;
+        function removeBehaviorsRestrictions() {
+            window.removeEventListener('keydown', removeBehaviorsRestrictions);
+            window.removeEventListener('mousedown', removeBehaviorsRestrictions);
+            window.removeEventListener('touchstart', removeBehaviorsRestrictions);
+            $playIcon.remove();
+            showLoadingIcon();
+        }
+        window.addEventListener('keydown', removeBehaviorsRestrictions);
+        window.addEventListener('mousedown', removeBehaviorsRestrictions);
+        window.addEventListener('touchstart', removeBehaviorsRestrictions);
+        hideLoadingIcon();
+        //FIXME: also load frame at current position?
+        $playIcon = $('<img>')
+            .addClass('OxPlayIcon OxVideo OxInterface')
+            .attr({
+                src: Ox.UI.getImageURL('symbolPlay', 'videoIcon')
+            })
+            .css(getCSS('playIcon'))
+            .css({
+                opacity: 1
+            })
+            .appendTo(self.$videoContainer);
+    }
+
     function loadImage() {
         self.$image
             .one({