videobox：video视频播放（弹出框）

//支持多视频播放，可拖动视频弹出框

//视频弹框拖动
function videoBoxDrag(m){
    var v = $(m),
        mx = 0,
        my = 0,   //鼠标的X/y坐标
        dx = 0, 
        dy = 0,   //对话框的X/Y坐标
        isDraging = false;      //标记对话框是否可拖动
    //自动居中对话框
    function autoCenter(el){
        var bodyW = $(window).width();
        var bodyH = $(window).height();
        var elW = el.width();
        var elH = el.height();
        v.css({"left":(bodyW-elW)/2 + 'px',"top":(bodyH-elH)/2 + 'px'}); 
        $(window).width() < 800 ?  v.css({"left":'0'}) : '';      
    };
    autoCenter(v);
    //窗口大小改变时，对话框始终居中
    _window.onresize = function(){
        autoCenter(v);
    };
    //禁止选中对话框内容
    if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
        m.attachEvent('onselectstart', function() {
          return false;
        });
    }
    v.mousedown(function(e){
        e = e || window.event;
        var obj = $(e.target).closest(v);
        mx = e.pageX;     //点击时鼠标X坐标
        my = e.pageY;     //点击时鼠标Y坐标
        dx = obj.offset().left;
        dy = obj.offset().top;
        isDraging = true;      //标记对话框可拖动   
    }).mousemove(function(e){
        e = e || window.event;
        var x = e.pageX;      //移动时鼠标X坐标
        var y = e.pageY;      //移动时鼠标Y坐标
        var obj = $(e.target).closest(v);
        if(isDraging){        //判断对话框能否拖动
            var moveX = dx + x - mx;      //移动后对话框新的left值
            var moveY = (dy + y - my) - document.documentElement.scrollTop;      //移动后对话框新的top值
            //设置拖动范围
            var pageW = $(window).width();
            var pageH = $(window).height();
            var dialogW = obj.width();
            var dialogH = obj.height();
            var maxX = pageW - dialogW;       //X轴可拖动最大值
            var maxY = pageH - dialogH;       //Y轴可拖动最大值
            moveX = Math.min(Math.max(0,moveX),maxX);     //X轴可拖动范围
            moveY = Math.min(Math.max(0,moveY),maxY);     //Y轴可拖动范围
            //重新设置对话框的left、top
            obj.css({"left":moveX + 'px',"top":moveY + 'px'});
        };
    }).mouseup(function(){
        isDraging = false;
    });
}  
//多个视频
!function($){
    var selectors = {
        m:'.act-media',
        v:'.act-myVideo',
        close:'.act-close-btn',
        play:'.act-play'
    }
    $.vedioPlay = function(options){
        selectors = $.extend(selectors,options);
        var variable = function(t){
            var t = $(t),
                mBox = t.closest(selectors.m);
            var video = mBox[0].querySelector(selectors.v);
            return {'mBox':mBox,'video':video};
        }
        $_(document).on("touchend click",selectors.close,function(){
            var b = variable(this);
            b.video.pause();
            setTimeout(function(){
                b.mBox.hide();
            },10);
        }).on("touchend click",selectors.play, function() {
            var t = $(this),
                v = $('#' + t.attr('data-video')),
                b = variable(v);
            $(selectors.m).hide();
            var videos = $(selectors.v);
            for(var i = 0; i < videos.length;i++){
                videos[i].pause();
            }
            !$(b.video).attr('src') ? $(b.video).attr('src',t.attr('data-src')) : '';
            b.video.play();
            b.mBox.show();
        });
        videoBoxDrag(selectors.m);
    }
}(jQuery);

<!-- html模板：
<div class="vedeo-area wid1280">
    <div class="video act-play">
        <img class="lateLoading" data-src="../../../statics/images/recruit/career_17.jpg"/>
    </div>
    <div class="media" id="media" style="display:none;">
        <div style="width:700px;">
            <a href="_javascript:void(0);" class="close_btn" id="close_btn">关闭</a>
        </div>
        <video id="myVideo"  src="./recruit~2.mp4" controls="controls">
            您的浏览器不支持 video 标签。
        </video>
    </div>
</div> -->
<!--
    使用方法
    $.vedioPlay({}); 
-->