//支持多视频播放,可拖动视频弹出框
//视频弹框拖动
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({});
-->