player

gistfile1.js

var 
    $      = require("common:widget/jquery/1.7.2/jquery.js"),
    Events = require("common:widget/arale-events/events.js"),
    Utils  = require("common:widget/my-util/my-util.js")
;

var THEMES = {
    simple : {
        layout : $(__inline('./themes/simple/simple.tpl')),
        extend : __inline('./themes/simple/simple.js')
    }
};

void function(){
    function Player(container, opt){
        Events.call(this);
        
        this.container = container.addClass('is-paused');
        this.option    = opt;
        this.uiEl      = THEMES[opt.theme].layout.clone().appendTo(container);
        this.videoInfo = {};

        THEMES[opt.theme].extend(this, this.uiEl);
        $('<div class="ratio"></div>').prependTo(container).css('paddingTop', opt.ratio * 100 + '%');  

        var _this = this;
        this.on("play", function(){
            _this.switchState('is-playing');
        });
        this.on("ended pause stop", function(e){
            _this.switchState('is-paused');
            if (e.type === 'ended') {
                container.addClass('is-finish');
            }
        });
        this.on("abort", function(){
            _this.switchState('is-paused is-abort');
        });
        this.on("waiting", function(){
            _this.switchState('is-loading', 'is-playing');
        });
    };
    var api = Player.prototype = Utils.create(Events.prototype, Player);
    
    api.switchState = function(state, keep){
        var el = this.container;
        if (keep) {
            keep = keep instanceof Array ? keep : keep.split(/\s+/);
            for (var i = keep.length; --i >= 0;) {
                var cls = keep[i];
                if (!cls && !el.hasClass(cls)) continue;
                
                state += ' ' + cls;
            }
        }
        el.prop('className', el.prop('className').replace(/\bis[-\w]+\b/g, ''));
        el.addClass(state);  
    };
    api.updateBufferBar = function(v){
        _this.uiEl.find(".buffer-bar").prop('style').width = v;
    };
    api.updateProgressBar = function(v) {
        _this.uiEl.find(".progress-bar").prop('style').width = v;
    }
}

//
//api.play   = 
//api.pause  = 
//api.stop   = 
//api.seekTo = 
//api.mute   = 
//api.volume = $.noop;

var VideoTag = function(){
        
    function VideoTag(container, opt){
        Player.call(this, container, opt);
        var videoTag   = 
        (this.videoTag = $('<video class="player"/>').appendTo(container))[0];
        
        videoTag.autoplay = false;
        videoTag.preload  = false;
        videoTag.muted    = !!opt.muted;
        
        var 
            _this        = this,
            video        = this.videoTag,
            sProgressBar = this.uiEl.find('.progress-bar')[0].style,
            sBufferBar   = this.uiEl.find('.buffer-bar')[0].style
        ;
        videoTag.on("abort canplay canplaythrough durationchange emptied ended error interruptbegin interruptend loadeddata loadedmetadata loadstart mozaudioavailable pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting", function(e){
            _this.trigger.apply(_this, [e.type].concat(Array.prototype.slice.call(arguments)));
            switch(e && e.type) {
                case 'pause':
                    
                break;
                case 'ended':
                break;
            }   
        });
        videoTag.on("progress", function(){
            
        });
        videoTag.on("timeupdate", function(){
            _this.updateProgressBar((videoTag.curentTime / videoTag.duration) + '%');
        });
        function updateBufferBar() {
            var 
                buf = videoTag.buffered,
                v   = 0
            ;
            if (buf.length) {
                buf = buf.end(buf.length-1);
                
            }
            _this.updateBufferBar(v);
        }
    }
    
    var api = VideoTag.prototype = Utils.create(Player.prototype, VideoTag);
    api.load = function(){
    
    };
    api.play = function(){
        
    };
    api.pause = function(){
    
    };
    api.stop = function(){
    
    };
    api.getPlayer = function(){
        return this.videoTag;
    };
}();

var FlashSWF = function(){
    function FlashSWF(){

    }
    var api = FlashSWF.prototype = Utils.create(Player.prototype, FlashSWF);
}


var SUPPORT_VIDEO_TAG = $('<video/>')[0].play instanceof Function;

var SUPPORT_PLAYER    = SUPPORT_PLAYER ? VideoTag : FlashSWF;

function ZMPlayer(el, opt) {
    Events.call(this);
    opt = $.extend({}, DEF_OPT, opt);
    this._player = new SUPPORT_PLAYER(el, opt);
};


ZMPlayer.themes = {
    simple : 'simple'
};

var DEF_OPT = {
    theme : ZMPlayer.themes.simple,
    
};


var api = ZMPlayer.prototype = Utils.create(Events.prototype, ZMPlayer);

api.play = function(video){
    
};

api.pause = function(){

};


api.stop = function(){

};

api.seekTo = function(){

};

api.mute = function(v){

};
api.volume = function(v){

};
api.isMuted = function(){

};
api.isPlaying = function(){

};
api.isLoaded = function(){

};
api.isEnded = function(){

};
api.isError = function(){

};
//
api.play(
    {
        flash : '.flv',
        mp4   : '.mp4',
        webp  : '.webp',
        mpeg  : '.mpeg'
    }
);
api.play('.mp4');