work around mobile interaction restrictions

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

View file

@ -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({