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 ended <!> ended
@*/ @*/
(function() {
var queue = [],
queueSize = 100,
restrictedElements = [],
requiresUserGesture = mediaPlaybackRequiresUserGesture(),
unblock = [];
Ox.VideoElement = function(options, self) { Ox.VideoElement = function(options, self) {
self = self || {}; self = self || {};
@ -113,10 +120,8 @@ Ox.VideoElement = function(options, self) {
}, 30); }, 30);
// mobile browsers only allow playing media elements after user interaction // mobile browsers only allow playing media elements after user interaction
if (mediaPlaybackRequiresUserGesture()) { if (restrictedElements.length > 0) {
window.addEventListener('keydown', removeBehaviorsRestrictions); unblock.push(setSource);
window.addEventListener('mousedown', removeBehaviorsRestrictions);
window.addEventListener('touchstart', removeBehaviorsRestrictions);
setTimeout(function() { setTimeout(function() {
that.triggerEvent('requiresusergesture'); that.triggerEvent('requiresusergesture');
}) })
@ -143,7 +148,7 @@ Ox.VideoElement = function(options, self) {
} }
function getVideo() { function getVideo() {
return $('<video>') return getVideoElement()
.css({position: 'absolute'}) .css({position: 'absolute'})
.on({ .on({
ended: function() { ended: function() {
@ -184,6 +189,21 @@ Ox.VideoElement = function(options, self) {
.appendTo(that); .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) { function isReady($video, callback) {
if ($video[0].seeking) { if ($video[0].seeking) {
that.triggerEvent('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 animate <f> animate
@ -554,3 +557,41 @@ Ox.VideoElement = function(options, self) {
return that; 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);
}
})();