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

// vim: et:ts=4:sw=4:sts=4:ft=javascript

Ox.VideoElement = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                autoplay: false,
                preload: 'none',
                src: []
            })
            .options(options || {});

    self.options.src = Ox.isArray(self.options.src) ? self.options.src : [self.options.src];

    Ox.print('VIDEO ELEMENT OPTIONS', self.options)

    self.currentPart = 0;
    self.duration = 0;
    self.durations = self.options.src.map(function() {
        return 0;
    });
    self.offsets = [];
    self.parts = self.options.src.length;
    self.paused = true;

    self.$videos = self.options.src.map(function(src, i) {
        return $('<video>')
            .css({position: 'absolute'})
            .bind({
                ended: function(e) {
                    alert(e);
                    if (i < self.parts - 1) {
                        setCurrentPart(self.currentPart + 1);
                        self.video.play();
                    } else {
                        self.ended = true;
                        self.paused = true;
                        that.triggerEvent('ended');
                    }
                },
                loadedmetadata: function() {
                    self.durations[i] = self.videos[i].duration;
                    Ox.print(i, 'lm', self.durations);
                    if (Ox.every(self.durations)) {
                        self.duration = Ox.sum(self.durations);
                        self.offsets = Ox.range(self.parts).map(function(i) {
                            return Ox.sum(Ox.sub(self.durations, 0, i));
                        });
                        Ox.print('s.o', self.offsets)
                        that.triggerEvent('loadedmetadata');
                    }
                },
                progress: function() {
                    
                },
                seeked: function() {
                    that.triggerEvent('seeked');
                },
                seeking: function() {
                    that.triggerEvent('seeking');
                },
                stop: function() {
                    self.video.pause();
                    that.triggerEvent('ended');
                }
            })
            .attr(Ox.extend({
                preload: 'metadata',
                src: src
            }, i == 0 && self.options.autoplay ? {
                autoplay: 'autoplay'
            } : {}))
            .hide()
            .appendTo(that.$element);
    });
    self.videos = self.$videos.map(function($video) {
        return $video[0];
    });
    self.$video = self.$videos[0].show();
    self.video = self.$video[0];

    function getCurrentTime() {
        return self.offsets[self.currentPart] + self.video.currentTime;
    }

    function getset(key, value) {
        var ret;
        if (Ox.isUndefined(value)) {
            ret = self.video[key]
        } else {
            self.video[key] = value;
            ret = that;
        }
        return ret;
    }

    function setCurrentPart(part) {
        Ox.print('sCP', part);
        var css = {};
        ['left', 'top', 'width', 'height'].forEach(function(key) {
            css[key] = self.$video.css(key);
        });
        self.$video.hide();
        self.video.pause();
        self.$video = self.$videos[part].css(css).show();
        self.video = self.$video[0];
        !self.paused && self.video.play();
        self.currentPart = part;
        Ox.print('sCP', part, self.video.src)
    }

    function setCurrentTime(time) {
        Ox.print('sCT', time);
        var currentPart, currentTime;
        Ox.loop(self.parts - 1, -1, -1, function(i) {
            if (self.offsets[i] <= time) {
                currentPart = i;
                currentTime = time - self.offsets[i];
                return false;
            }
        });
        Ox.print('sCT', time, currentPart, currentTime);
        if (currentPart != self.currentPart) {
            setCurrentPart(currentPart);
        }
        self.video.currentTime = currentTime;
    }

    that.animate = function() {
        self.$video.animate.apply(self.$video, arguments);
        return that;
    }

    that.buffered = function() {
        return self.video.buffered;
    };

    that.currentTime = function() {
        var ret;
        self.ended = false;
        if (arguments.length == 0) {
            ret = getCurrentTime();
        } else {
            setCurrentTime(arguments[0]);
            ret = that;
        }
        return ret;
    };

    that.css = function() {
        self.$video.css.apply(self.$video, arguments);
        return that;
    };

    that.duration = function() {
        return self.duration;
    };

    that.muted = function() {
        return getset('muted', arguments[0]);
    };

    that.pause = function() {
        self.paused = true;
        self.video.pause();
        return that;
    };

    that.play = function() {
        if (self.ended) {
            that.currentTime(0);
            self.ended = false;
        }
        self.paused = false;
        self.video.play();
        return that;
    };

    that.src = function() {
        var ret;
        if (arguments.length == 0) {
            ret = self.video.src;
        } else {
            self.options.src = Ox.isArray(arguments[0]) ? arguments[0] : [arguments[0]];
            self.videos[currentPart].src = self.options.src[currentPart];
            self.videos.forEach(function(video, i) {
                if (i != currentPart) {
                    video.src = self.options.src[i];
                }
            })
            ret = that;
        }
        return ret;
    };

    that.videoHeight = function() {
        return self.video.videoHeight;
    };

    that.videoWidth = function() {
        return self.video.videoWidth;
    };

    that.volume = function(value) {
        return getset('volume', arguments[0]);
    }

    return that;

};