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

rewrite Ox.VideoElement

Browse source
This commit is contained in:
j 2013-07-09 22:48:22 +00:00
parent 708aff64e4
commit f938f281f1
2 changed files with 227 additions and 296 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

503
source/Ox.UI/js/Video/VideoElement.js
View file

@ -3,10 +3,13 @@
/*@
Ox.VideoElement <f> VideoElement Object
options <o> Options object
autoplay <b|false> autoplay
items <a|[]> array of objects with src,in,out,duration,offset
look <b|false> loop playback
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> VideoElement Object
loadedmetadata <!> loadedmetadata
pointschange <!> pointschange
itemchange <!> itemchange
seeked <!> seeked
seeking <!> seeking
sizechange <!> sizechange
@ -19,50 +22,58 @@ Ox.VideoElement = function(options, self) {
var that = Ox.Element({}, self)
.defaults({
autoplay: false,
preload: 'none',
src: []
loop: false,
items: []
})
.options(options || {})
.update({
items: function() {
self.loadedMetadata = false;
loadItems(function() {
if (self.items.length != self.numberOfItems) {
self.numberOfItems = self.items.lenth;
if (self.currentItem > self.numberOfItems) {
self.currentItem = 0;
}
}
var item = self.items[self.currentItem];
if (self.$video.attr('src') != item.src) {
setCurrentVideo();
}
});
}
})
.css({width: '100%', height: '100%'});
Ox.Log('Video', 'VIDEO ELEMENT OPTIONS', self.options);
self.currentPart = 0;
self.items = [];
self.currentItem = 0;
self.currentTime = 0;
self.currentVideo = 0;
self.loadedMetadata = false;
self.paused = true;
self.$video = $('<div>');
self.seeking = false;
self.$videos = [getVideo(), getVideo()];
self.$video = self.$videos[self.currentVideo];
self.video = self.$video[0];
self.$brightness = $('<div>').css({
width: '100%',
height: '100%',
background: 'rgb(0, 0, 0)',
opacity: 0
})
.appendTo(that);
if (Ox.isFunction(self.options.src)) {
self.isPlaylist = true;
self.currentItem = 0;
self.currentPage = 0;
self.loadedMetadata = false;
self.pageLength = 2;
self.options.src(function(items) {
self.numberOfItems = items;
self.numberOfPages = Math.ceil(self.numberOfItems / self.pageLength);
loadPages(function() {
Ox.Log('Video', 'VIDEO PAGES LOADED');
setCurrentItem(0);
if (!self.loadedMedatata) {
self.loadedMetadata = true;
that.triggerEvent('loadedmetadata');
that.triggerEvent('pointschange'); // fixme: needs to be triggered again, loadedmetadata messes with duration
}
});
});
} else {
self.numberOfItems = 1;
self.items.push(loadItem(self.options.src));
}
function getCurrentPage() {
return Math.floor(self.currentItem / self.pageLength);
}
loadItems(function() {
setCurrentItem(0);
self.options.autoplay && play();
});
function getCurrentTime() {
return self.items[self.currentItem].offsets[self.currentPart] + self.video.currentTime;
var item = self.items[self.currentItem];
return self.seeking
? self.currentTime
: item.offset + self.video.currentTime - item['in'];
}
function getset(key, value) {
@ -76,232 +87,216 @@ Ox.VideoElement = function(options, self) {
return ret;
}
function loadItem(src, points, callback) {
src = Ox.isArray(src) ? src : [src];
var item = {
currentPart: 0,
duration: 0,
durations: src.map(function() {
return 0;
}),
offsets: [],
parts: src.length
};
if (points) {
item.points = points;
}
item.$videos = src.map(function(src, i) {
//fixme: get rid of this to make use of browser caching
// but in all browsers except firefox,
// loadedmetadata fires only once per src
if (src.length > 0 && Ox.startsWith(Ox.parseURL(src).protocol, 'http')) {
src += '?' + Ox.uid();
}
return $('<video>')
.css({position: 'absolute'})
.on({
ended: function() {
if (i < item.parts - 1) {
setCurrentPart(self.currentPart + 1);
self.video.play();
} /*else if (self.isPlaylist) {
setCurrentItem(self.currentItem + 1);
self.video.play();
}*/ else {
self.ended = true;
self.paused = true;
that.triggerEvent('ended');
}
},
loadedmetadata: function() {
item.durations[i] = item.videos[i].duration;
if (self.isPlaylist && i == 0) {
item.videos[0].currentTime = item.points[0];
}
if (Ox.every(item.durations)) {
item.duration = Ox.sum(item.durations);
item.offsets = Ox.range(item.parts).map(function(i) {
return Ox.sum(item.durations.slice(0, i));
});
//Ox.Log('Video', 'METADATA OF', src, 'LOADED', item)
if (self.isPlaylist) {
callback && callback();
} else {
setCurrentItem(0);
self.loadedMetadata = true;
that.triggerEvent('loadedmetadata');
}
}
},
progress: function() {
// not implemented
},
seeked: function() {
function getVideo() {
return $('<video>')
.css({position: 'absolute'})
.on({
ended: function() {
if (self.video == this) {
setCurrentItem(self.currentItem + 1);
}
},
loadedmetadata: function() {
// metadata loaded in loadItems
},
progress: function() {
// not implemented
},
seeked: function() {
if (self.video == this) {
that.triggerEvent('seeked');
},
seeking: function() {
that.triggerEvent('seeking');
},
stop: function() {
// custom event to be triggered on removal from the DOM
if (self.video) {
self.video.pause();
}
self.seeking = false;
}
},
seeking: function() {
//seeking event triggered in setCurrentTime
},
stop: function() {
if (self.video == this) {
self.video.pause();
that.triggerEvent('ended');
}
})
.attr(Ox.extend({
preload: 'metadata',
src: src
}, i == 0 && self.options.autoplay ? {
autoplay: 'autoplay'
} : {}))
.hide()
.appendTo(that);
});
item.videos = item.$videos.map(function($video) {
return $video[0];
});
self.$brightness = $('<div>').css({
width: '100%',
height: '100%',
background: 'rgb(0, 0, 0)',
opacity: 0
},
timeupdate: function() {
if (self.video == this) {
if (self.items[self.currentItem].out && this.currentTime >= self.items[self.currentItem].out) {
setCurrentItem(self.currentItem + 1);
}
}
}
})
.attr({
preload: 'auto'
})
.hide()
.appendTo(that);
return item;
}
function loadPage(page, callback) {
Ox.Log('Video', 'VIDEO loadPage', page);
//page = Ox.mod(page, self.numberOfPages);
var loadedmetadata = 0,
start = page * self.pageLength,
stop = Math.min(start + self.pageLength, self.numberOfItems),
pageLength = stop - start;
if (!self.items[start]) {
self.options.src([start, stop], function(data) {
data.forEach(function(data, i) {
self.items[start + i] = loadItem(data.parts, data.points, function(item) {
if (++loadedmetadata == pageLength) {
Ox.Log('Video', 'VIDEO page', page, 'loaded');
callback && callback();
}
});
});
function loadItems(callback) {
var currentTime = 0, i =0,
items = self.options.items.map(function(item) {
return Ox.isObject(item) ? Ox.clone(item, true) : {src: item};
});
} else {
Ox.Log('Video', 'PAGE IN CACHE');
callback && callback();
next();
function next() {
var item;
if (i < items.length) {
item = items[i];
item['in'] = item['in'] || 0;
item.offset = currentTime;
if (item.out) {
item.duration = item.out - item['in'];
}
if (item.duration) {
if(!item.out) {
item.out = item.duration - item['in'];
}
console.log('add item', item);
currentTime += item.duration;
i++;
next()
} else {
Ox.Log('VIDEO', 'getVideoInfo', item.src);
Ox.getVideoInfo(item.src, function(info) {
item.duration = info.duration;
if(!item.out) {
item.out = item['in'] + item.duration;
}
currentTime += item.duration;
i++;
next();
});
}
} else {
self.loadedMetadata = true;
self.items = items;
self.numberOfItems = self.items.length;
callback && callback();
onLoadedMetadata(self.$video, function() {
that.triggerEvent('loadedmetadata');
});
}
}
}
function loadPages(callback) {
var currentPage = self.currentPage,
nextPage = Ox.mod(currentPage + 1, self.numberOfPages),
previousPage = Ox.mod(currentPage - 1, self.numberOfPages);
loadPage(currentPage, function() {
if (nextPage != currentPage) {
loadPage(nextPage, function() {
if (previousPage != currentPage && previousPage != nextPage) {
unloadPage(previousPage);
}
});
}
callback && callback();
function loadNextVideo() {
var item = self.items[self.currentItem],
nextItem = Ox.mod(self.currentItem + 1, self.numberOfItems),
next = self.items[nextItem],
$nextVideo = self.$videos[Ox.mod(self.currentVideo + 1, self.$videos.length)],
nextVideo = $nextVideo[0];
nextVideo.src = next.src;
onLoadedMetadata($nextVideo, function() {
nextVideo.currentTime = next['in'] || 0;
});
}
function onLoadedMetadata($video, callback) {
if ($video[0].readyState) {
callback();
} else {
$video.one('loadedmetadata', function(event) {
callback();
});
}
}
function setCurrentItem(item) {
Ox.Log('Video', 'scI', item);
Ox.Log('Video', 'sCI', item, self.numberOfItems);
var interval;
item = Ox.mod(item, self.numberOfItems);
self.video && self.video.pause();
if (self.items[item]) {
set();
} else {
that.triggerEvent('seeking');
interval = setInterval(function() {
Ox.Log('Video', 'ITEM', item, 'NOT AVAILABLE');
if (self.items[item]) {
clearInterval(interval);
that.triggerEvent('seeked');
set();
}
}, 250);
if(item >= self.numberOfItems) {
if (self.options.loop) {
item = Ox.mod(item, self.numberOfItems);
} else {
self.ended = true;
self.paused = true;
self.video && self.video.pause();
that.triggerEvent('ended');
return;
}
}
self.video && self.video.pause();
//fixme always sync now?
set();
function set() {
self.currentItem = item;
setCurrentPart(self.currentPart);
if (self.isPlaylist) {
that.triggerEvent('pointschange');
setCurrentVideo();
onLoadedMetadata(self.$video, function() {
that.triggerEvent('sizechange');
self.currentPage = getCurrentPage();
loadPages();
}
that.triggerEvent('itemchange', {
item: self.currentItem
});
});
}
}
function setCurrentPart(part) {
Ox.Log('Video', 'sCP', part);
function setCurrentVideo() {
var css = {},
muted = false,
volume = 1;
volume = 1,
item = self.items[self.currentItem],
next;
Ox.Log('Video', 'sCV', item);
['left', 'top', 'width', 'height'].forEach(function(key) {
css[key] = self.$video.css(key);
css[key] = self.$videos[self.currentVideo].css(key);
});
if (self.video) {
self.$video.hide();
self.$videos[self.currentVideo].hide();
self.video.pause();
if(self.video.readyState >= self.video.HAVE_METADATA) {
self.video.currentTime = 0;
}
volume = self.video.volume;
muted = self.video.muted;
}
self.$video = self.items[self.currentItem].$videos[part].css(css).show();
self.currentVideo = Ox.mod(self.currentVideo + 1, self.$videos.length);
self.$video = self.$videos[self.currentVideo];
self.video = self.$video[0];
if (self.$video.attr('src') != item.src) {
self.video.src = item.src;
}
self.video.volume = volume;
self.video.muted = muted;
self.$video.css(css).show();
!self.paused && self.video.play();
self.currentPart = part;
Ox.Log('Video', 'sCP', part, self.video.src);
Ox.Log('Video', 'sCV', self.video.src);
if (item['in']) {
setCurrentItemTime(item['in']);
}
loadNextVideo();
}
function setCurrentItemTime(currentTime) {
Ox.Log('Video', 'sCIT', currentTime);
onLoadedMetadata(self.$video, function() {
self.video.currentTime = currentTime;
});
}
function setCurrentTime(time) {
Ox.Log('Video', 'sCT', time);
var currentPart, currentTime,
item = self.items[self.currentItem];
Ox.loop(item.parts - 1, -1, -1, function(i) {
if (item.offsets[i] <= time) {
currentPart = i;
currentTime = time - item.offsets[i];
return false; // break
var currentTime, currentItem;
self.items.forEach(function(item, i) {
if (time >= item.offset
&& time < item.offset + item.duration) {
currentItem = i;
currentTime = time - item.offset + item['in'];
return false;
}
});
Ox.Log('Video', 'sCT', time, currentPart, currentTime);
if (currentPart != self.currentPart) {
setCurrentPart(currentPart);
// Set to end of items if time > duration
if(Ox.isUndefined(currentItem) && Ox.isUndefined(currentTime)) {
currentItem = self.items.length -1;
currentTime = self.items[currentItem].duration + self.items[currentItem]['in'];
}
if (self.video && self.video.readyState) {
self.video.currentTime = currentTime;
Ox.Log('Video', 'sCT', time, '=>', currentItem, currentTime);
if (currentItem != self.currentItem) {
setCurrentItem(currentItem);
}
}
function unloadPage(page) {
//page = Ox.mod(page, self.numberOfPages);
Ox.Log('Video', 'unloadPage', page);
var start = page * self.pageLength,
stop = Math.min(start + self.pageLength, self.numberOfItems);
Ox.range(start, stop).forEach(function(i) {
if (self.items[i]) {
self.items[i].$videos.forEach(function($video) {
$video[0].src = '';
$video.remove();
});
delete self.items[i];
}
});
self.seeking = true;
self.currentTime = time;
that.triggerEvent('seeking');
setCurrentItemTime(currentTime);
}
/*@
@ -352,18 +347,7 @@ Ox.VideoElement = function(options, self) {
css <f> css
@*/
that.css = function() {
var interval;
if (self.$video) {
self.$video.css.apply(self.$video, arguments);
} else {
interval = setInterval(function() {
Ox.Log('Video', 'VIDEO NOT YET AVAILABLE');
if (self.$video) {
clearInterval(interval);
self.$video.css.apply(self.$video, arguments);
}
}, 250);
}
self.$video.css.apply(self.$video, arguments);
return that;
};
@ -371,8 +355,9 @@ Ox.VideoElement = function(options, self) {
duration <f> duration
@*/
that.duration = function() {
// 86399
return self.items[self.currentItem].duration;
return self.items ? Ox.sum(self.items.map(function(item) {
return item.duration;
})) : NaN;
};
/*@
@ -382,13 +367,6 @@ Ox.VideoElement = function(options, self) {
return getset('muted', arguments[0]);
};
/*@
points <f> get points
@*/
that.points = function() {
return self.items[self.currentItem].points;
};
/*@
pause <f> pause
@*/
@ -404,8 +382,8 @@ Ox.VideoElement = function(options, self) {
that.play = function() {
if (self.ended) {
that.currentTime(0);
self.ended = false;
}
self.ended = false;
self.paused = false;
self.video.play();
return that;
@ -424,54 +402,9 @@ Ox.VideoElement = function(options, self) {
playPrevious <f> play previous
@*/
that.playPrevious = function() {
Ox.Log('Video', 'PLAY PREVIOUS');
setCurrentItem(self.currentItem - 1);
};
/*@
src <f> get/set source
@*/
that.src = function() {
var ret, src;
if (arguments.length == 0) {
ret = self.video.src;
} else {
self.options.src = Ox.isArray(arguments[0]) ? arguments[0] : [arguments[0]];
if (self.loadedMetadata) {
//fixme: get rid of this to make use of browser caching
// but in all browsers except firefox,
// loadedmetadata fires only once per src
src = self.options.src[self.currentPart];
if (src.length > 0 && Ox.startsWith(Ox.parseURL(src).protocol, 'http')) {
src += '?' + Ox.uid();
}
self.$video[0].src = src;
self.items[0].$videos.forEach(function($video, i) {
if (i != self.currentPart) {
var src = self.options.src[i];
//fixme: get rid of this to make use of browser caching
// but in all browsers except firefox,
// loadedmetadata fires only once per src
if (src.length > 0 && Ox.startsWith(Ox.parseURL(src).protocol, 'http')) {
src += '?' + Ox.uid();
}
$video[0].src = src;
}
});
} else {
self.items[0].$videos.forEach(function($video, i) {
var src = self.options.src[i];
//fixme: get rid of this to make use of browser caching
// but in all browsers except firefox,
// loadedmetadata fires only once per src
if (src.length > 0 && Ox.startsWith(Ox.parseURL(src).protocol, 'http')) {
src += '?' + Ox.uid();
}
$video[0].src = src;
});
}
ret = that;
}
return ret;
self.video.play();
};
/*@

20
source/Ox.UI/js/Video/VideoPlayer.js
View file

@ -400,7 +400,7 @@ Ox.VideoPlayer = function(options, self) {
// and poster doesn't seem to work at all
Ox.extend({
preload: self.options.preload,
src: self.video
items: self.video,
}, !self.options.paused && !self.options.playInToOut ? {
/*autoplay: 'autoplay'*/
} : {}/*, self.options.poster ? {
@ -410,7 +410,7 @@ Ox.VideoPlayer = function(options, self) {
.bindEvent(Ox.extend({
ended: ended,
loadedmetadata: loadedmetadata,
pointschange: pointschange,
itemchange: itemchange,
seeked: seeked,
seeking: seeking,
sizechange: sizechange
@ -1780,7 +1780,7 @@ Ox.VideoPlayer = function(options, self) {
//self.options.position = Ox.limit(self.options.position, self['in'], self.out);
//self.$video.currentTime(self.options.position);
setPosition(self.options.position);
!self.isPlaylist && setPosition(self.options.position);
self.$video.muted(self.options.muted).volume(self.options.volume);
if (!self.options.paused) {
@ -1859,13 +1859,9 @@ Ox.VideoPlayer = function(options, self) {
}
}
function pointschange() {
var points = self.$video.points();
self['in'] = points[0];
self.out = points[1];
self.options.duration = self.out - self['in'];
setPosition(self['in']);
Ox.Log('Video', 'POINTSCHANGE', self['in'], self.out, self.options.position, self.options.duration)
function itemchange(data) {
var item = self.$video.options('items')[data.item];
Ox.Log('Video', 'ITEMCHANGE', item);
}
function progress() {
@ -2104,7 +2100,9 @@ Ox.VideoPlayer = function(options, self) {
}
self.loadedMetadata = false;
showLoadingIcon();
self.$video.src(self.options.video[self.options.resolution]);
self.$video.options({
items: self.options.video[self.options.resolution]
});
self.$playButton && self.$playButton.options({disabled: true});
that.triggerEvent('resolution', {
resolution: self.options.resolution