work around mobile interaction restrictions
This commit is contained in:
parent
5a40d4ef8f
commit
af610a0df9
2 changed files with 74 additions and 7 deletions
|
@ -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
|
||||||
@*/
|
@*/
|
||||||
|
|
|
@ -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({
|
||||||
|
|
Loading…
Reference in a new issue