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

// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.VideoElement = function(options, self) {

    var self = self || {},
        that = new Ox.Element('<video>', self)
            .defaults({
                fps: 25,
                height: 0,
                loop: false,
                muted: false,
                paused: false,
                playInToOut: false,
                points: [0, 0],
                position: 0,
                poster: '',
                url: '',
                width: 0
            })
            .options(options || {})
            .attr({
                //height: self.options.height,
                poster: self.options.poster,
                preload: 'auto',
                src: self.options.url,
                //width: self.options.width
            })
            .css({
                height: self.options.height + 'px',
                width: self.options.width + 'px'
            })
            .bind({
                ended: ended,
                canplay: function() {
                    Ox.print('canplay')
                },
                durationchange: function() {
                    Ox.print('durationchange')
                },
                loadedmetadata: function() {
                    Ox.print('loadedmetadata', self.video.duration)
                    self.video.currentTime = self.options.position;
                    that.triggerEvent('loadedmetadata', {
                        video: self.video
                    })
                },
                progress: function() {
                    that.triggerEvent('progress', {
                        video: self.video
                    });
                },
                seeked: function() {
                    that.triggerEvent('seeked');
                },
                seeking: function() {
                    that.triggerEvent('seeking');
                }
            });

    $.extend(self, {
        millisecondsPerFrame: 1000 / self.options.fps,
        video: that.$element[0]
    });

    function ended() {
        that.pause()
            .triggerEvent('paused', {
                position: self.options.position
            });
    }

    function playing() {
        var event = 'playing';
        self.options.position = Math.round(self.video.currentTime * self.options.fps) / self.options.fps;
        if (self.options.playInToOut && self.options.position >= self.options.points[1])  {
            event = 'paused';
            that.position(self.options.points[1]).pause();
        }
        that.triggerEvent(event, {
            position: self.options.position
        });
    }

    self.setOption = function(key, value) {
        if (key == 'height') {
            that.size(self.options.width, value);
        } else if (key == 'muted') {
            that[value ? 'mute' : 'unmute']();
        } else if (key == 'paused') {
            that[value ? 'pause' : 'play']();
        } else if (key == 'points') {
            that.points(value);
        } else if (key == 'width') {
            that.size(value, self.options.height);
        }
    };

    that.mute = function() {
        self.options.muted = true;
        self.video.muted = true;
        return that;
    };

    that.muted = function() {
        return self.options.muted;
    }

    that.pause = function() {
        self.options.paused = true;
        self.options.playInToOut = false;
        self.video.pause();
        clearInterval(self.playInterval);
        return that;
    };

    that.paused = function() {
        return self.options.paused;
    }

    that.play = function() {
        self.options.paused = false;
        self.video.play();
        self.playInterval = setInterval(playing, self.millisecondsPerFrame);
        return that;
    };

    that.playInToOut = function() {
        self.options.playInToOut = true;
        that.position(self.options.points[0]);
        self.options.paused && that.play();
        return that;
    };

    that.points = function(points) {
        self.options.points = points;
    }

    that.position = function(pos) {
        // fixme: why not use options??
        if (arguments.length == 0) {
            return self.video.currentTime;
        } else {
            self.options.position = pos;
            self.video.currentTime = self.options.position;
            return that;
        }
    };

    that.size = function(width, height) {
        // fixme: why options? use css!
        if (arguments.length == 0) {
            return {
                width: self.options.width,
                height: self.options.height
            };
        } else {
            self.options.width = width;
            self.options.height = height;
            that.css({
                width: width + 'px',
                height: height + 'px'
            });
            return that;
        }
    };

    that.toggleMute = function() {
        self.video.muted = !self.video.muted;
        return that;
    }

    that.togglePlay = function() {
        self.options.paused = !self.options.paused;
        that[self.options.paused ? 'pause' : 'play']();
    }

    that.unmute = function() {
        self.video.muted = false;
        return that;
    };

    return that;

};