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

source/Ox.UI/js/Video/VideoElement.js

@@ -4,7 +4,7 @@
 Ox.VideoElement <f> VideoElement Object
     options <o> Options object
         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
     self <o> Shared private variable
     ([options[, self]]) -> <o:Ox.Element> 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) {
+                    if (!self.numberOfItems) {
-                        // check if current item is in new items
+                        self.video.src = '';
-                        self.items.some(function(item, i) {
+                        that.triggerEvent('durationchange', {
-                            if (item.id == self.currentItemId) {
+                            duration: that.duration()
-                                self.currentItem = i;
-                                loadNextVideo();
-                                update = false;
-                                return true;
-                            }
                         });
-                        if (update) {
+                    } else {
-                            self.currentItem = 0;
+                        if (self.currentItemId != self.items[self.currentItem].id) {
-                            self.currentItemId = self.items[self.currentItem].id;
+                            // check if current item is in new items
-                            setCurrentVideo();
+                            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
+            if (time >= item.position
-                && time < item.offset + item.duration) {
+                && 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(self.items.length) {
-        if(Ox.isUndefined(currentItem) && Ox.isUndefined(currentTime)) {
+            // Set to end of items if time > duration
-            currentItem = self.items.length -1;
+            if(Ox.isUndefined(currentItem) && Ox.isUndefined(currentTime)) {
-            currentTime = self.items[currentItem].duration + self.items[currentItem]['in'];
+                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);
     }
 
     /*@

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() {