UseStudio.CloudFront/controls/pc/Video/video.js

Namespace.register("U.Control.video");    //谢茵怡   吕坤城


U.Control.video = (function () {

    var VIO, _VO = function (OPT) {
        return new VIO.init(OPT);
    }

    VIO = _VO.prototype = {
        // 初始化函数
        init: function (OPT) {
            this.config(OPT);
            return this.Lview();

        },

        // 配置文件
        config: function (OPT) {
            this.width = OPT.width || ""; this.height = OPT.height || ""; this.src = OPT.src || underfind; this.play = OPT.autoplay || false;
            this.tool = OPT.controls || false; this.pos = OPT.pos || $("body"); this.time = 1;
        },

        //播放器视图
        Lview: function () {

            var _this = this;
            var vstorage, vbox, vbar, vplay, vpause, vreplay, vprogem, vprogfp, vtime, vstime, vetime, vshu, vsound, vsoundpb, vsoundem, vsoundfp, vfull;
            var isMute;//判断是否静音的功能

            vbox = $$("div", { "className": "vbox" }, this.pos);
            this.elm = $$("video", { "src": this.src, "controls": this.tool, "height": "1px", "autoplay": this.play, "width": "1px" }, vbox);

            var o = this.Oapi();

            vbar = $$("div", { "className": "vbar" }, vbox);
            vplay = $$("div", { "className": "vicon vplay", "onclick": [[o.play]] }, vbar);
            vreplay = $$("div", { "className": "vicon vreplay", "onclick": [[o.replay]] }, vbar);
            this.vprog = $$("div", { "className": "vicon vprog" }, vbar);
            vprogem = $$("div", { "className": "vprogem" }, this.vprog);
            vprogfp = $$("div", { "className": "vicon vprogfp" }, vprogem);
            vtime = $$("div", { "className": "vtime" }, vbar);
            vstime = $$("span", { "className": "vstime", "innerHTML": "00:00" }, vtime);
            vshu = $$("span", { "className": "vshu", "innerHTML": "/" }, vtime);
            vetime = $$("span", { "className": "vetime", "innerHTML": "04:10" }, vtime);
            vsound = $$("div", { "className": "vicon vsound" }, vbar);
            vsoundpb = $$("div", { "className": "vsoundpb" }, vbar);
            vsoundem = $$("div", { "className": "vsoundem" }, vsoundpb);
            vsoundfp = $$("div", { "className": "vicon vsoundfp" }, vsoundem);
            vfull = $$("div", { "className": "vicon vfull" }, vbar);

            a = this.AFun();
            a.ratioVideo(this.elm, this.width, this.height, vbox, vfull);   //视频加载
            o.metadata(vstime, vetime, vprogem);                            //加载视频状态
            o.scheduleRef(this.vprog, 1);                                   //进度条功能
            isMute = o.loudspeakerMuteInit(vsound, "loudspeakerMute", vsoundpb);     //静音功能
            o.scheduleRef(vsoundpb, 2,isMute);                                     //声音功能
            return vbox;
        },


        AFun: function () {

            var _this = this;
            var time = null, time2 = null, canvas = null, inbox = 0, eX, eY, aX, aY, n = 0, m = 0;

            //绘制画布
            var drawVideo = function (ELMC, ELM, EW, EH) {
                var content = ELMC.getContext("2d");
                clearInterval(time);
                time = setInterval(function () { content.drawImage(ELM, 0, 0, EW, EH); }, 20);
            }

            //视频比例
            var ratioVideo = function (ELM, EWH, EHI, EVB, EFULL) {
                var cw = $("body").width(), bw = window.screen.width;
                var ch = $("body").height(), bh = window.screen.height;

                U.M.AddEvent("loadedmetadata", ELM, function () {

                    var gw = 0, gh = 0, gv = 0;
                    var w = _this.otime = this.videoWidth;   //426
                    var h = this.videoHeight;  //240 
                    var p = h / w;     //比例  0.56

                    //如果只给了宽
                    if (EWH && EHI == "") {
                        EWH >= cw ? (gw = cw, gh = ch) : (gw = EWH, gh = gw * p);
                    }

                    //如果只给了高
                    if (EHI && EWH == "") {
                        EHI >= ch ? (gh = ch, gw = cw) : (gh = EHI, gw = gh / p);
                    }

                    //如果给了宽高  
                    if (EWH && EHI) {

                        //如果宽大。。250   比例是  0.58
                        //如果高大。。436   比例是  0.55

                        gh = EHI; gw = gh / p;

                        if (gh >= ch) {
                            gh = ch;
                            gw = gh / p;
                        }

                        if (gw >= cw) {
                            gw = cw;
                            gh = gw * p;
                        }
                    }

                    if (EWH == "" && EHI == "") {
                        gw = 300; gh = 300;
                    }


                    if (gw >= 1000) {
                        gv = (gw - 1000) / 100;
                        $(_this.vprog).css({ "width": 55 + gv + "%" });
                    } else {
                        gv = (1000 - gw) / 25;
                        $(_this.vprog).css({ "width": 55 - gv + "%" });
                    }

                    $(EVB).css({ "width": gw + "px", "height": gh + "px" });         //大框

                    if (!$("canvas")[0]) {
                        canvas = $$("canvas", { "width": gw, "height": gh }, EVB);       //canvas
                    } else {
                        canvas = $("canvas");
                    }

                    drawVideo(canvas, ELM, gw, gh);

                    EFULL.onclick = function () {
                        if (m % 2 == 0) {
                            gv = (bw - 1000) / 100;
                            $(_this.vprog).css({ "width": 55 + gv + "%" });
                            $(EVB).css({ "width": bw + "px", "height": bh + "px" }); canvas.width = bw; canvas.height = bh;
                            drawVideo(canvas, ELM, bw, bh);
                            U.M.fullScreen(EVB);
                        } else {
                            gv = (gw - 1000) / 100;
                            $(_this.vprog).css({ "width": 55 + gv + "%" });
                            $(EVB).css({ "width": gw + "px", "height": gh + "px" }); canvas.width = gw; canvas.height = gh;
                            drawVideo(canvas, ELM, gw, gh);
                            document.webkitCancelFullScreen();
                        }
                        m++;
                    }


                    U.M.AddEvent("mousemove", EVB, function (e) {
                        eX = e.clientX;
                        eY = e.clientY;
                        if (aX != eX && aY != eY) {
                            inbox = 1;
                            $(".vbar").show();
                        }
                    })

                    U.M.AddEvent("mouseover", EVB, function (e) {
                        time2 = setInterval(function () {
                            aX = eX;
                            aY = eY;
                            if (inbox == 0) {
                                $(".vbar").hide();
                            }
                            inbox = 0;
                        }, 3000);

                    })
                    U.M.AddEvent("mouseout", EVB, function () {
                        clearInterval(time2);
                    })
                });
            }

            return {
                drawVideo: drawVideo,    //绘制画布
                ratioVideo: ratioVideo
            }

        },

        //视频播放api
        Oapi: function () {

            var _this = this, n = 0;

            //可播放的类型
            var type = { "ogg": 'video/ogg; codecs="theora, vorbis"', "mp4": 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"', "webm": 'audio/webm; codecs="vorbis"' };

            //转换分
            var timeStom = function (TIME) {
                var m = Math.floor(TIME / 60);
                m < 10 && (m = '0' + m);
                return m + ':' + (TIME % 60 / 100).toFixed(2).slice(-2);
            }

            //元数据事件
            var metadata = function (SVUl, EVUl, VEM) {
                U.M.AddEvent("timeupdate", _this.elm, function () {
                    $(SVUl)[0].innerHTML = timeStom(this.currentTime);
                    $(VEM).css('width', this.currentTime / this.duration * 100 + "%");
                });
                U.M.AddEvent("loadedmetadata", _this.elm, function () {
                    $(EVUl)[0].innerHTML = timeStom(this.duration);
                    this.volume = 0.5;
                });
            };

            //更改数据
            var updatabar = function (ELM, SHIF, snum) {
                var endtime = _this.elm.duration;
                var postion = SHIF - U.M.GetElementInfo(ELM).BCRL;
                var percent = postion / $(ELM).width() * 100;
                percent >= 100 ? percent = 100 : (percent <= 0 ? percent = 0 : percent = percent);
                $(ELM.childNodes).css("width", percent + "%");
                if (snum == 1) {
                    _this.elm.currentTime = endtime * percent / 100;
                } else {
                    _this.elm.volume = percent / 100;
                }
            }

            //进度调整
            var scheduleRef = function (ELM, SEL,isMute) {
                var state = false, snum;
                SEL == 1 ? snum = 1 : snum = 2;
                U.M.AddEvent("mousedown", ELM, function (e) {
                    state = true; updatabar(ELM, e.pageX, snum);
                    isMute&&isMute();
                });
                U.M.AddEvent("mouseup", document, function (e) {
                    if (state) { state = false; updatabar(ELM, e.pageX, snum); }
                    isMute&&isMute();
                });
                U.M.AddEvent("mousemove", document, function (e) {
                    if (state) { updatabar(ELM, e.pageX, snum); }
                    isMute&&isMute();
                });
            }

            //播放速度
            var backRate = function (UVE) {
                return _this.elm.playbackRate = UVE;
            }

            /* 是否可以播放
            *  apply: probably  and maybe 
            *  "" 空串表示不支持
            */
            var isPaly = function (UTF, UDOD) {
                return _this.elm.canPlayType(type[UTF.toLowerCase()]);
            }

            var play = function () {
                if (n % 2 == 0) {
                    _this.elm.play();
                    $(this).removeClass("vplay").addClass("vpause");
                } else {
                    pause();
                    $(this).removeClass("vpause").addClass("vplay");
                }
                n++;

            }

            var pause = function () {
                _this.elm.pause();

            }

            var load = function () {
                _this.elm.load();

            }

            var replay = function () {
                _this.elm.currentTime = 0;
            }

            var canPlayType = function () {
                if (_this.elm.canPlayType) { return true; } else { return false; }
            }

            //全屏
            var full = function (CLM) {
                U.M.fullScreen(CLM);
            }

            var exitfull = function (a) {
                U.M.fullScreen(true);
            }
            /*
            @function loudspeakerMuteInit 静音函数初始化
            @ele   {htmlObj}  静音的图标 
            @class  {string} 改变的class 
            @boolean   {boolen} 是否静音
            @ELM    {htmlObj}  静音的进度条 
            */
            var loudspeakerMuteInit = function (ele, className, ELM) {
                var beforeVoice = 0.3;//记录之前的声音大小，默认0.3
                var isMute = function(){//判断是否改变图片
                    _this.elm.volume == 0?
                    $(ele).addClass(className):
                    $(ele).removeClass(className);
                }
                $(ele).bind("click", function () {
                    if (_this.elm.volume == 0) {
                        _this.elm.volume = beforeVoice;
                    } else {
                        beforeVoice = _this.elm.volume;
                        _this.elm.volume = 0;
                    }
                    isMute();
                    $(ELM.childNodes).css("width", _this.elm.volume * 100 + "%");
                })
                return isMute;
            }
            return {
                play: play,                                                //播放
                pause: pause,                                              //暂停
                load: load,                                                //重新加载视频元素 
                replay: replay,                                            //重播
                backRate: backRate,                                       //速度
                canPlayType: canPlayType,                                 //判断是否支持浏览器 
                isPaly: isPaly,                                           //判断是否可以播放
                full: full,                                                //是否全屏
                exitfull: exitfull,
                metadata: metadata,                                        //视频长度
                scheduleRef: scheduleRef,                                  //调整进度  
                loudspeakerMuteInit: loudspeakerMuteInit                  //静音初始化

            };
        }


    }

    VIO.init.prototype = VIO; return _VO;

})();