<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="font/iconfont.css" />
<script>var ctx= '';</script>
<script src="js/jquery.min.js"></script>
<script src="js/videoPlugin.js"></script>
<style>
*{
margin:0;
padding:0;
}
.home_container{
width:1000px;
margin:0 auto;
}
.content_list{
padding:40px 0 60px;
}
.video_container{
font-size:0;
}
.clear:after{
content:'';
display:block;
height:0;
clear:both;
}
.fl{
float:left;
}
.main_video,.video{
display:inline-block;
font-size:0;
position:relative;
overflow:hidden;
cursor:pointer;
}
.main_video{
width:660px;
height: 404px;
margin:0 20px 10px 0;
}
.video img{
width:100%;
height:100%;
}
.mask{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:rgba(25,25,25,0.45);
opacity:0;
will-change:opacity;
transition:opacity 0.8s;
}
.main_video:hover .mask, .video:hover .mask {
opacity: 1;
}
.mask_container{
width:100%;
height:100%;
font-size:16px;
}
.play_btn{
width:60px;
height:60px;
background:url(http://www.boshiwan.cn/static/images/play_btn.png) no-repeat;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%); /*这样就可以水平居中，垂直居中了*/
-ms-transform:translate(-50%,-50%);
}
.video_info{
color:#fff;
position:absolute;
bottom:0;
padding:15px;
width:100%;
background:rgba(25,25,25,0.55);
box-sizing:border-box;
}
/*****************************/
.video_modal{
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
background:rgba(0,0,0,0.5);
display:none;
z-index:99999;
}
.video_modal_container{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
padding:20px;
background-color:#000;
}
.video_box{
position:relative;
}
.video_box .video {
width: 100%;
height: calc(100% - 60px);
background-color: inherit;
}
.close_video {
position: absolute;
top: -15px;
right: -15px;
cursor: pointer;
}
/*让视频区域显示*/
.zoomin{
display:block;
}
</style>
</head>
<body>
<div class="home_container">
<div class="content_list">
<div class="clear video_container">
<div class="main_video fl video" data-video="http://www.boshiwan.cn/713ec545b0464d2e81aafcb1c3df67f6.mp4">
<img src="http://www.boshiwan.cn/0fc2b0a486b74184b8b213050fa85e90.png" alt="">
<div class="mask">
<div class="mask_container">
<div class="play_btn"></div>
<p class="video_info">视频视频</p>
</div>
</div>
</div>
</div>
</div>
</div>
/*视频播放的区域*/
<div class="video_modal">
<div class="video_modal_container">
<div class="video_box">
<div class="video" data-video=""></div>
<div class="close_video"><i class="icon iconfont icon-guanbi" style="color:white;font-size:14px;"></i></div>
</div>
</div>
</div>
<script>
$(function(){
$('.video_container').on( 'click', '.video', function(){
var $modal = $(".video_modal"),
$comtainer = $(".video_box"),
src = $(this).data('video'),
$video = createVideo( src );
$comtainer.append( $video );
if( !isIe8() ){
$(".close_video").on('click',function(){
$modal.removeClass('zoomin').find('.video').css({ display: "block"})
$video.remove();
})
$video.on('play',function(){
$comtainer.find('.video').css({ display: "none"})
})
}else{
$(".close_video").on('click',function(){
$modal.removeClass('zoomin').find('.video').css({ display: "block"})
$comtainer.find('object').remove();
})
}
setTimeout( function(){
$modal.addClass('zoomin')
},0)
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号