durationchange no longer calles loadedmetadata; support updating video element to no items
This commit is contained in:
parent
a0b92c16e5
commit
76fc986e97
2 changed files with 66 additions and 36 deletions
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
Loading…
Reference in a new issue