queue unlocked video elements asap
This commit is contained in:
parent
eac7a05584
commit
72a7d54025
1 changed files with 63 additions and 22 deletions
|
@ -17,6 +17,13 @@ Ox.VideoElement <f> VideoElement Object
|
|||
ended <!> ended
|
||||
@*/
|
||||
|
||||
(function() {
|
||||
var queue = [],
|
||||
queueSize = 100,
|
||||
restrictedElements = [],
|
||||
requiresUserGesture = mediaPlaybackRequiresUserGesture(),
|
||||
unblock = [];
|
||||
|
||||
Ox.VideoElement = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
|
@ -113,10 +120,8 @@ Ox.VideoElement = function(options, self) {
|
|||
}, 30);
|
||||
|
||||
// mobile browsers only allow playing media elements after user interaction
|
||||
if (mediaPlaybackRequiresUserGesture()) {
|
||||
window.addEventListener('keydown', removeBehaviorsRestrictions);
|
||||
window.addEventListener('mousedown', removeBehaviorsRestrictions);
|
||||
window.addEventListener('touchstart', removeBehaviorsRestrictions);
|
||||
if (restrictedElements.length > 0) {
|
||||
unblock.push(setSource);
|
||||
setTimeout(function() {
|
||||
that.triggerEvent('requiresusergesture');
|
||||
})
|
||||
|
@ -143,7 +148,7 @@ Ox.VideoElement = function(options, self) {
|
|||
}
|
||||
|
||||
function getVideo() {
|
||||
return $('<video>')
|
||||
return getVideoElement()
|
||||
.css({position: 'absolute'})
|
||||
.on({
|
||||
ended: function() {
|
||||
|
@ -184,6 +189,21 @@ Ox.VideoElement = function(options, self) {
|
|||
.appendTo(that);
|
||||
}
|
||||
|
||||
function getVideoElement() {
|
||||
var video;
|
||||
if (requiresUserGesture) {
|
||||
if (queue.length) {
|
||||
video = queue.pop();
|
||||
} else {
|
||||
video = document.createElement('video');
|
||||
restrictedElements.push(video);
|
||||
}
|
||||
} else {
|
||||
video = document.createElement('video');
|
||||
}
|
||||
return $(video);
|
||||
};
|
||||
|
||||
function isReady($video, callback) {
|
||||
if ($video[0].seeking) {
|
||||
that.triggerEvent('seeking');
|
||||
|
@ -407,23 +427,6 @@ Ox.VideoElement = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
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
|
||||
|
@ -554,3 +557,41 @@ Ox.VideoElement = function(options, self) {
|
|||
return that;
|
||||
|
||||
};
|
||||
|
||||
// mobile browsers only allow playing media elements after user interaction
|
||||
|
||||
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);
|
||||
if (restrictedElements.length > 0) {
|
||||
var rElements = restrictedElements;
|
||||
restrictedElements = [];
|
||||
rElements.forEach(function(video) {
|
||||
video.load();
|
||||
});
|
||||
setTimeout(function() {
|
||||
var u = unblock;
|
||||
unblock = [];
|
||||
u.forEach(function(callback) { callback(); });
|
||||
}, 1000);
|
||||
}
|
||||
while (queue.length < queueSize) {
|
||||
var video = document.createElement('video');
|
||||
video.load();
|
||||
queue.push(video);
|
||||
}
|
||||
}
|
||||
|
||||
if (requiresUserGesture) {
|
||||
window.addEventListener('keydown', removeBehaviorsRestrictions);
|
||||
window.addEventListener('mousedown', removeBehaviorsRestrictions);
|
||||
window.addEventListener('touchstart', removeBehaviorsRestrictions);
|
||||
}
|
||||
})();
|
||||
|
|
Loading…
Reference in a new issue