rewrite Ox.VideoElement

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

@@ -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',
+            loop: false,
-            src: []
+            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.currentItem = 0;
-    self.items = [];
+    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)) {
+    loadItems(function() {
-        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.options.autoplay && play();
-                    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);
-    }
 
     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) {
+    function getVideo() {
-        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) {
+                    if (self.video == this) {
-                            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;
+                    // metadata loaded in loadItems
-                        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() {
+                    if (self.video == this) {
                         that.triggerEvent('seeked');
+                        self.seeking = false;
+                    }
                 },
                 seeking: function() {
-                        that.triggerEvent('seeking');
+                    //seeking event triggered in setCurrentTime
                 },
                 stop: function() {
-                        // custom event to be triggered on removal from the DOM
+                    if (self.video == this) {
-                        if (self.video) {
                         self.video.pause();
-                        }
                         that.triggerEvent('ended');
                     }
+                },
+                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'
             })
-                .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
-            })
-            .appendTo(that);
-        return item;
     }
 
-    function loadPage(page, callback) {
+    function loadItems(callback) {
-        Ox.Log('Video', 'VIDEO loadPage', page);
+        var currentTime = 0, i =0,
-        //page = Ox.mod(page, self.numberOfPages);
+            items = self.options.items.map(function(item) {
-        var loadedmetadata = 0,
+                return Ox.isObject(item) ? Ox.clone(item, true) : {src: item};
-            start = page * self.pageLength,
+            });
-            stop = Math.min(start + self.pageLength, self.numberOfItems),
+
-            pageLength = stop - start;
+        next();
-        if (!self.items[start]) {
+
-            self.options.src([start, stop], function(data) {
+        function next() {
-                data.forEach(function(data, i) {
+            var item;
-                    self.items[start + i] = loadItem(data.parts, data.points, function(item) {
+            if (i < items.length) {
-                        if (++loadedmetadata == pageLength) {
+                item = items[i];
-                            Ox.Log('Video', 'VIDEO page', page, 'loaded');
+                item['in'] = item['in'] || 0;
-                            callback && callback();
+                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', 'PAGE IN CACHE');
+                    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) {
+    function loadNextVideo() {
-        var currentPage = self.currentPage,
+        var item = self.items[self.currentItem],
-            nextPage = Ox.mod(currentPage + 1, self.numberOfPages),
+            nextItem = Ox.mod(self.currentItem + 1, self.numberOfItems),
-            previousPage = Ox.mod(currentPage - 1, self.numberOfPages);
+            next = self.items[nextItem],
-        loadPage(currentPage, function() {
+            $nextVideo = self.$videos[Ox.mod(self.currentVideo + 1, self.$videos.length)],
-            if (nextPage != currentPage) {
+            nextVideo = $nextVideo[0];
-                loadPage(nextPage, function() {
+
-                    if (previousPage != currentPage && previousPage != nextPage) {
+        nextVideo.src = next.src;
-                        unloadPage(previousPage);
+        onLoadedMetadata($nextVideo, function() {
-                    }
+            nextVideo.currentTime = next['in'] || 0;
         });
     }
-            callback && callback();
+
+    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;
+        if(item >= self.numberOfItems) {
+            if (self.options.loop) {
                 item = Ox.mod(item, self.numberOfItems);
-        self.video && self.video.pause();
-        if (self.items[item]) {
-            set();
             } else {
-            that.triggerEvent('seeking');
+                self.ended = true;
-            interval = setInterval(function() {
+                self.paused = true;
-                Ox.Log('Video', 'ITEM', item, 'NOT AVAILABLE');
+                self.video && self.video.pause();
-                if (self.items[item]) {
+                that.triggerEvent('ended');
-                    clearInterval(interval);
+                return;
-                    that.triggerEvent('seeked');
+            }
+        }
+        self.video && self.video.pause();
+        //fixme always sync now?
         set();
-                }
-            }, 250);
-        }
         function set() {
             self.currentItem = item;
-            setCurrentPart(self.currentPart);
+            setCurrentVideo();
-            if (self.isPlaylist) {
+            onLoadedMetadata(self.$video, function() {
-                that.triggerEvent('pointschange');
                 that.triggerEvent('sizechange');
-                self.currentPage = getCurrentPage();
+                that.triggerEvent('itemchange', {
-                loadPages();
+                    item: self.currentItem
-            }
+                });
+            });
         }
     }
 
-    function setCurrentPart(part) {
+    function setCurrentVideo() {
-        Ox.Log('Video', 'sCP', part);
         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', 'sCV', self.video.src);
-        Ox.Log('Video', 'sCP', part, 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,
+        var currentTime, currentItem;
-            item = self.items[self.currentItem];
+        self.items.forEach(function(item, i) {
-        Ox.loop(item.parts - 1, -1, -1, function(i) {
+            if (time >= item.offset
-            if (item.offsets[i] <= time) {
+                && time < item.offset + item.duration) {
-                currentPart = i;
+                currentItem = i;
-                currentTime = time - item.offsets[i];
+                currentTime = time - item.offset + item['in'];
-                return false; // break
+                return false;
             }
         });
-        Ox.Log('Video', 'sCT', time, currentPart, currentTime);
+        // Set to end of items if time > duration
-        if (currentPart != self.currentPart) {
+        if(Ox.isUndefined(currentItem) && Ox.isUndefined(currentTime)) {
-            setCurrentPart(currentPart);
+            currentItem = self.items.length -1;
+            currentTime = self.items[currentItem].duration + self.items[currentItem]['in'];
         }
-        if (self.video && self.video.readyState) {
+        Ox.Log('Video', 'sCT', time, '=>', currentItem, currentTime);
-            self.video.currentTime = currentTime;
+        if (currentItem != self.currentItem) {
+            setCurrentItem(currentItem);
         }
-    }
+        self.seeking = true;
-
+        self.currentTime = time;
-    function unloadPage(page) {
+        that.triggerEvent('seeking');
-        //page = Ox.mod(page, self.numberOfPages);
+        setCurrentItemTime(currentTime);
-        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];
-            }
-        });
     }
 
     /*@
@@ -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);
-        }
         return that;
     };
 
@@ -371,8 +355,9 @@ Ox.VideoElement = function(options, self) {
     duration <f> duration
     @*/
     that.duration = function() {
-        // 86399
+        return self.items ? Ox.sum(self.items.map(function(item) {
-        return self.items[self.currentItem].duration;
+            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);
-    };
+        self.video.play();
-
-    /*@
-    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;
     };
 
     /*@

source/Ox.UI/js/Video/VideoPlayer.js

@@ -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() {
+    function itemchange(data) {
-        var points = self.$video.points();
+        var item = self.$video.options('items')[data.item];
-        self['in'] = points[0];
+        Ox.Log('Video', 'ITEMCHANGE', item);
-        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 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