work around mobile interaction restrictions

This commit is contained in:
j 2016-05-17 17:40:31 +02:00
parent 5a40d4ef8f
commit af610a0df9
2 changed files with 74 additions and 7 deletions

View file

@ -112,12 +112,17 @@ Ox.VideoElement = function(options, self) {
} }
}, 30); }, 30);
loadItems(function() { // mobile browsers only allow playing media elements after user interaction
setCurrentItem(0); if (mediaPlaybackRequiresUserGesture()) {
self.options.autoplay && setTimeout(function() { window.addEventListener('keydown', removeBehaviorsRestrictions);
that.play(); window.addEventListener('mousedown', removeBehaviorsRestrictions);
}); window.addEventListener('touchstart', removeBehaviorsRestrictions);
}); setTimeout(function() {
that.triggerEvent('requiresusergesture');
})
} else {
setSource();
}
function getCurrentTime() { function getCurrentTime() {
var item = self.items[self.currentItem]; var item = self.items[self.currentItem];
@ -327,6 +332,7 @@ Ox.VideoElement = function(options, self) {
self.video.currentTime, self.video.seeking); self.video.currentTime, self.video.seeking);
isReady(self.$video, function(video) { isReady(self.$video, function(video) {
self.$video.one('seeked', function() { self.$video.one('seeked', function() {
Ox.Log('Video', 'sCV', 'seeked callback');
self.loading = false; self.loading = false;
!self.paused && self.video.play(); !self.paused && self.video.play();
self.$video.show(); self.$video.show();
@ -336,6 +342,10 @@ Ox.VideoElement = function(options, self) {
if (!self.seeking) { if (!self.seeking) {
Ox.Log('Video', 'sCV set in', video.src, item['in'] || 0, video.currentTime, video.seeking); Ox.Log('Video', 'sCV set in', video.src, item['in'] || 0, video.currentTime, video.seeking);
video.currentTime = item['in'] || 0; 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 animate <f> animate
@*/ @*/

View file

@ -443,8 +443,9 @@ Ox.VideoPlayer = function(options, self) {
.bindEvent(Ox.extend({ .bindEvent(Ox.extend({
durationchange: durationchange, durationchange: durationchange,
ended: ended, ended: ended,
loadedmetadata: loadedmetadata,
itemchange: itemchange, itemchange: itemchange,
loadedmetadata: loadedmetadata,
requiresusergesture: requiresusergesture,
seeked: seeked, seeked: seeked,
seeking: seeking, seeking: seeking,
sizechange: sizechange sizechange: sizechange
@ -1889,6 +1890,33 @@ Ox.VideoPlayer = function(options, self) {
Ox.Log('Video', 'ITEMCHANGE', item); 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() { function loadImage() {
self.$image self.$image
.one({ .one({