diff --git a/source/Ox.UI/js/Video/VideoElement.js b/source/Ox.UI/js/Video/VideoElement.js index cacbf2eb..5cbfb8bb 100644 --- a/source/Ox.UI/js/Video/VideoElement.js +++ b/source/Ox.UI/js/Video/VideoElement.js @@ -4,7 +4,7 @@ Ox.VideoElement VideoElement Object options Options object autoplay autoplay - items array of objects with src,in,out,duration,offset + items array of objects with src,in,out,duration look loop playback self Shared private variable ([options[, self]]) -> VideoElement Object @@ -34,23 +34,34 @@ Ox.VideoElement = function(options, self) { if (self.currentItem >= self.numberOfItems) { self.currentItem = 0; } - if (self.currentItemId != self.items[self.currentItem].id) { - // check if current item is in new items - self.items.some(function(item, i) { - if (item.id == self.currentItemId) { - self.currentItem = i; - loadNextVideo(); - update = false; - return true; - } + if (!self.numberOfItems) { + self.video.src = ''; + that.triggerEvent('durationchange', { + duration: that.duration() }); - if (update) { - self.currentItem = 0; - self.currentItemId = self.items[self.currentItem].id; - setCurrentVideo(); + } else { + if (self.currentItemId != self.items[self.currentItem].id) { + // check if current item is in new items + self.items.some(function(item, i) { + if (item.id == self.currentItemId) { + self.currentItem = i; + loadNextVideo(); + update = false; + return true; + } + }); + if (update) { + self.currentItem = 0; + self.currentItemId = self.items[self.currentItem].id; + setCurrentVideo(); + } } + onLoadedMetadata(self.$video, function() { + that.triggerEvent('durationchange', { + duration: that.duration() + }); + }); } - that.triggerEvent('durationchange'); }); } }) @@ -78,13 +89,16 @@ Ox.VideoElement = function(options, self) { loadItems(function() { setCurrentItem(0); self.options.autoplay && play(); + onLoadedMetadata(self.$video, function() { + that.triggerEvent('loadedmetadata'); + }); }); function getCurrentTime() { var item = self.items[self.currentItem]; return self.seeking ? self.currentTime - : item.offset + self.video.currentTime - item['in']; + : item ? item.position + self.video.currentTime - item['in'] : 0; } function getset(key, value) { @@ -130,7 +144,9 @@ Ox.VideoElement = function(options, self) { }, timeupdate: function() { 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); } } @@ -159,7 +175,7 @@ Ox.VideoElement = function(options, self) { if (i < items.length) { item = items[i]; item['in'] = item['in'] || 0; - item.offset = currentTime; + item.position = currentTime; if (item.out) { item.duration = item.out - item['in']; } @@ -189,9 +205,6 @@ Ox.VideoElement = function(options, self) { self.items = items; self.numberOfItems = self.items.length; callback && callback(); - onLoadedMetadata(self.$video, function() { - that.triggerEvent('loadedmetadata'); - }); } } } @@ -292,26 +305,30 @@ Ox.VideoElement = function(options, self) { Ox.Log('Video', 'sCT', time); var currentTime, currentItem; self.items.forEach(function(item, i) { - if (time >= item.offset - && time < item.offset + item.duration) { + if (time >= item.position + && time < item.position + item.duration) { currentItem = i; - currentTime = time - item.offset + item['in']; + currentTime = time - item.position + item['in']; return false; } }); - // 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.items.length) { + // 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']; + } + Ox.Log('Video', 'sCT', time, '=>', currentItem, currentTime); + if (currentItem != self.currentItem) { + setCurrentItem(currentItem); + } + self.seeking = true; + self.currentTime = time; + that.triggerEvent('seeking'); + setCurrentItemTime(currentTime); + } else { + self.currentTime = 0; } - Ox.Log('Video', 'sCT', time, '=>', currentItem, currentTime); - if (currentItem != self.currentItem) { - setCurrentItem(currentItem); - } - self.seeking = true; - self.currentTime = time; - that.triggerEvent('seeking'); - setCurrentItemTime(currentTime); } /*@ diff --git a/source/Ox.UI/js/Video/VideoPlayer.js b/source/Ox.UI/js/Video/VideoPlayer.js index 866ac611..08d6d2aa 100644 --- a/source/Ox.UI/js/Video/VideoPlayer.js +++ b/source/Ox.UI/js/Video/VideoPlayer.js @@ -1255,12 +1255,25 @@ Ox.VideoPlayer = function(options, self) { } 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.$video.duration(); self.options.duration = self.out - self['in']; self.$timeline && self.$timeline.replaceWith( self.$timeline = getTimeline() ); + setPosition(self.$video.currentTime()); + that.triggerEvent('durationchange', { + duration:self.options.duration + }); } function ended() {