lightplayer.VideoElement = function (options) {
    var options = options;
    var tracks = options.tracks;
    var captions = [];
    var chapters = [];
    var element = options.element;
    var $element = $(element);
    //$element.find("*").remove();
    var $media = $('<video>').appendTo($('<div>', { 'class': 'media' }).appendTo($element));
    var media = $media[0];
    //media.element = media;
    media.setSources = function (srcs) {
        this.sources = srcs;
        var $media = $(this);
        $media.find('source').remove();
        for (var i = 0, il = this.sources.length; i < il; i++) {
            var source = this.sources[i];
            var extension = lightplayer.utilies.getExtension(source);
            var format = 'video/' + (extension == 'ogv' ? 'ogg' : extension);
            if ($media.find('source[src="' + source + '"').length <= 0) {
                $media.append('<source src="' + source + '" type="' + format + '" />');
                if (lightplayer.platform.isIE && extension == 'mp4' && !$media.attr('src')) {
                    $media.attr('src', source);
                    $media.attr('type', format);
                }
            }
        }
    };

    media.setSources(options.sources);

    media.isFullScreen = false;
    var docOrigOverflow, docOrigScrollTop, docOrigScrollLeft,
    onFullScreenEscKeyDown = function (e) {
        if (e.keyCode == 27) {
            media.setFullScreen(false);
        }
    };
    media.supportNativeFullScreen = function () {
        if (typeof this.webkitEnterFullScreen == 'function') {
            // Seems to be broken in Chromium/Chrome
            if (!navigator.userAgent.match("Chrome") && !navigator.userAgent.match("Mac OS X 10.5")) {
                return true;
            }
        }
        return false;
    };
    media.setFullScreen = function (f) {
        if (!this.supportNativeFullScreen()) {
            this.isFullScreen = f;
            if (this.isFullScreen) {
                // Storing original doc overflow value to return to when fullscreen is off
                docOrigOverflow = document.documentElement.style.overflow;
                docOrigScrollTop = $(document).scrollTop();
                docOrigScrollLeft = $(document).scrollLeft();
                // Add listener for a window resize
                //$(window).bind("resize", this.fullScreenOnWindowResize);
                // Hide any scroll bars
                $(document).css('overflow', 'hidden');
                // Apply fullscreen styles
                $element.addClass("fullscreen");
                $element.css('width', '').css('height', '');
                $media.css('width', '100%').css('height', '100%');

                // Add listener for esc key to exit fullscreen
                $(document).bind('keydown', onFullScreenEscKeyDown);
            } else {
                $element.removeClass("fullscreen");
                $element.css('width', this.width + 'px');
                $element.css('height', this.height + 'px');
                document.documentElement.style.overflow = docOrigOverflow;
                $(document).scrollTop(docOrigScrollTop);
                $(document).scrollLeft(docOrigScrollLeft);
                $(document).unbind('keydown', onFullScreenEscKeyDown);
                $media.css('width', $media.attr('width') + 'px').css('height', $media.attr('height') + 'px');
            }
            $media.trigger(f ? 'fullscreen' : 'unfullscreen');
        } else {
            try {
                if (f) {
                    this.webkitEnterFullScreen();
                } else {
                    this.webkitExitFullScreen();
                }
            } catch (e) {
            }
        }
    };

    options.loop = options.loop || ($media.attr('loop') && $media.attr('loop').toLowerCase() == 'loop');
    if (options.loop) {
        $media.attr('loop', 'loop');
    }
    options.autoPlay = options.autoPlay || ($media.attr('autoplay') && $media.attr('autoplay').toLowerCase() == 'autoplay');
    if (options.autoPlay) {
        //$media.attr('autoplay', 'autoplay');
        media.play();
    }
    options.autoBuffer = options.autoBuffer || ($media.attr('autobuffer') && $media.attr('autobuffer').toLowerCase() == 'autobuffer');
    if (options.autoBuffer) {
        $media.attr('autobuffer', 'autobuffer');
    }
    options.preload = options.preload || ($media.attr('preload') && $media.attr('preload').toLowerCase() == 'preload');
    if (options.preload) {
        $media.attr('preload', 'preload');
    }
    options.poster = options.poster || $media.attr('poster');
    if (options.poster) {
        $media.attr('poster', options.poster);
    } else {
        $media.removeAttr('poster');
    }

    options.width = options.width || lightplayer.defaultVideoWidth;
    options.height = options.height || lightplayer.defaultVideoHeight;

    $media.attr('width', options.width);
    $media.attr('height', options.height);
    if (this.tracks != null) {
        for (var i = 0, il = this.tracks.length; i < il; i++) {
            var track = this.tracks[i];
            var $track = $('<track></track>');
            $media.append($track);
            $track.attr('src', track.src);
            if (track.kind) $track.attr('kind', track.kind);
            if (track.srclang) $track.attr('srclang', track.srclang);
            if (track.label) $track.attr('label', track.label);
            if (track['default']) $track.attr('default', track['default']);

            if (track.kind == 'subtitles') {
                this.captions.push(track);
            } else if (track.kind == 'chapters') {
                this.chapters.push(track);
            }
        }
    }

    if (options.enableAutosize) {
        media.addEventListener('loadedmetadata', function (e) {
            $media.attr('width', e.target.videoWidth);
            $media.attr('height', e.target.videoHeight);
            $element.css('width', options.width + 'px');
            $element.css('height', options.height + 'px');
        }, false);
    }

    $element.css('width', options.width + 'px');
    $element.css('height', options.height + 'px');

    if (media.prototype === undefined) media.prototype = {};

    media.isMuted = function () {
        return media.muted;
    };
    media.isPaused = function () {
        return media.paused;
    };
    media.isEnded = function () {
        return media.ended;
    };
    //    media.load = function () {
    //    };
    //    media.play = function () {
    //        media.play();
    //    };
    //    media.stop = function () {
    //        media.stop();
    //    };
    //    media.pause = function () {
    //        media.pause();
    //    };
    //    media.prototype.seek = function (time) {
    //    };
    media.buffered = function () {
        var percent = 0;

        // newest HTML5 spec has buffered array (FF4, Webkit)
        if (media && media.buffered && media.buffered.length > 0 && media.buffered.end && media.duration) {
            // TODO: account for a real array with multiple values (only Firefox 4 has this so far) 
            percent = media.buffered.end(0) / media.duration;
        }
        // Some browsers (e.g., FF3.6 and Safari 5) cannot calculate media.bufferered.end()
        // to be anything other than 0. If the byte count is available we use this instead.
        // Browsers that support the else if do not seem to have the bufferedBytes value and
        // should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
        else if (media && media.bytesTotal != undefined && media.bytesTotal > 0 && media.bufferedBytes != undefined) {
            percent = media.bufferedBytes / media.bytesTotal;
        }
        // Firefox 3 with an Ogg file seems to go this way
        //        else if (e.lengthComputable && e.total != 0) {
        //            percent = e.loaded / e.total;
        //        }
        //console.log(media.bufferedBytes);
        return Math.min(1, Math.max(0, percent));
    };
    media.getDuration = function () {
        return media.duration;
    };
    media.getVolume = function () {
        return this.volume;
    };
    media.setVolume = function (vol) {
        this.volume = vol;
    };
    media.setMute = function (m) {
        this.muted = m;
    };
    return media;
};
lightplayer.VideoElement.supportTypes = ['video/mp4', 'video/webm', 'video/ogg', 'video/wmv'];