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

durationchange no longer calles loadedmetadata; support updating video element to no items

Browse source
This commit is contained in:
j 2013-07-14 09:16:39 +00:00
parent a0b92c16e5
commit 76fc986e97
2 changed files with 66 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@
Ox.VideoElement <f> VideoElement Object Ox.VideoElement <f> VideoElement Object
options <o> Options object options <o> Options object
autoplay <b|false> autoplay autoplay <b|false> autoplay
items <a|[]> array of objects with src,in,out,duration,offset items <a|[]> array of objects with src,in,out,duration
look <b|false> loop playback look <b|false> loop playback
self <o> Shared private variable self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> VideoElement Object ([options[, self]]) -> <o:Ox.Element> VideoElement Object
@ -34,6 +34,12 @@ Ox.VideoElement = function(options, self) {
if (self.currentItem >= self.numberOfItems) { if (self.currentItem >= self.numberOfItems) {
self.currentItem = 0; self.currentItem = 0;
} }
if (!self.numberOfItems) {
self.video.src = '';
that.triggerEvent('durationchange', {
duration: that.duration()
});
} else {
if (self.currentItemId != self.items[self.currentItem].id) { if (self.currentItemId != self.items[self.currentItem].id) {
// check if current item is in new items // check if current item is in new items
self.items.some(function(item, i) { self.items.some(function(item, i) {
@ -50,7 +56,12 @@ Ox.VideoElement = function(options, self) {
setCurrentVideo(); setCurrentVideo();
} }
} }
that.triggerEvent('durationchange'); onLoadedMetadata(self.$video, function() {
that.triggerEvent('durationchange', {
duration: that.duration()
});
});
}
}); });
} }
}) })
@ -78,13 +89,16 @@ Ox.VideoElement = function(options, self) {
loadItems(function() { loadItems(function() {
setCurrentItem(0); setCurrentItem(0);
self.options.autoplay && play(); self.options.autoplay && play();
onLoadedMetadata(self.$video, function() {
that.triggerEvent('loadedmetadata');
});
}); });
function getCurrentTime() { function getCurrentTime() {
var item = self.items[self.currentItem]; var item = self.items[self.currentItem];
return self.seeking return self.seeking
? self.currentTime ? self.currentTime
: item.offset + self.video.currentTime - item['in']; : item ? item.position + self.video.currentTime - item['in'] : 0;
} }
function getset(key, value) { function getset(key, value) {
@ -130,7 +144,9 @@ Ox.VideoElement = function(options, self) {
}, },
timeupdate: function() { timeupdate: function() {
if (self.video == this) { if (self.video == this) {
if (self.items[self.currentItem].out && this.currentTime >= self.items[self.currentItem].out) { if (self.items[self.currentItem]
&& self.items[self.currentItem].out
&& this.currentTime >= self.items[self.currentItem].out) {
setCurrentItem(self.currentItem + 1); setCurrentItem(self.currentItem + 1);
} }
} }
@ -159,7 +175,7 @@ Ox.VideoElement = function(options, self) {
if (i < items.length) { if (i < items.length) {
item = items[i]; item = items[i];
item['in'] = item['in'] || 0; item['in'] = item['in'] || 0;
item.offset = currentTime; item.position = currentTime;
if (item.out) { if (item.out) {
item.duration = item.out - item['in']; item.duration = item.out - item['in'];
} }
@ -189,9 +205,6 @@ Ox.VideoElement = function(options, self) {
self.items = items; self.items = items;
self.numberOfItems = self.items.length; self.numberOfItems = self.items.length;
callback && callback(); callback && callback();
onLoadedMetadata(self.$video, function() {
that.triggerEvent('loadedmetadata');
});
} }
} }
} }
@ -292,13 +305,14 @@ Ox.VideoElement = function(options, self) {
Ox.Log('Video', 'sCT', time); Ox.Log('Video', 'sCT', time);
var currentTime, currentItem; var currentTime, currentItem;
self.items.forEach(function(item, i) { self.items.forEach(function(item, i) {
if (time >= item.offset if (time >= item.position
&& time < item.offset + item.duration) { && time < item.position + item.duration) {
currentItem = i; currentItem = i;
currentTime = time - item.offset + item['in']; currentTime = time - item.position + item['in'];
return false; return false;
} }
}); });
if(self.items.length) {
// Set to end of items if time > duration // Set to end of items if time > duration
if(Ox.isUndefined(currentItem) && Ox.isUndefined(currentTime)) { if(Ox.isUndefined(currentItem) && Ox.isUndefined(currentTime)) {
currentItem = self.items.length -1; currentItem = self.items.length -1;
@ -312,6 +326,9 @@ Ox.VideoElement = function(options, self) {
self.currentTime = time; self.currentTime = time;
that.triggerEvent('seeking'); that.triggerEvent('seeking');
setCurrentItemTime(currentTime); setCurrentItemTime(currentTime);
} else {
self.currentTime = 0;
}
} }
/*@ /*@

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

@ -1255,12 +1255,25 @@ Ox.VideoPlayer = function(options, self) {
} }
function durationchange() { function durationchange() {
self.videoWidth = self.$video.videoWidth();
self.videoHeight = self.$video.videoHeight();
self.videoCSS = getVideoCSS();
self.posterMarkerCSS = getPosterMarkerCSS();
self.$video.css(self.videoCSS);
self.$poster && self.$poster.css(self.videoCSS);
self.$posterMarker && Ox.forEach(self.$posterMarker, function(marker, position) {
marker.css(self.posterMarkerCSS[position]);
});
self.out = self.options.playInToOut && self.out < self.$video.duration() self.out = self.options.playInToOut && self.out < self.$video.duration()
? self.out : self.$video.duration(); ? self.out : self.$video.duration();
self.options.duration = self.out - self['in']; self.options.duration = self.out - self['in'];
self.$timeline && self.$timeline.replaceWith( self.$timeline && self.$timeline.replaceWith(
self.$timeline = getTimeline() self.$timeline = getTimeline()
); );
setPosition(self.$video.currentTime());
that.triggerEvent('durationchange', {
duration:self.options.duration
});
} }
function ended() { function ended() {