0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

queue unlocked video elements asap

Browse source
This commit is contained in:
j 2016-07-26 18:55:55 +02:00
parent eac7a05584
commit 72a7d54025
1 changed files with 63 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
source/UI/js/Video/VideoElement.js
View file

@ -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);
}
})();