Day07（HTML5 demo 视频，遮罩）
2017-11-07 本文已影响0人
AnnQi
视频
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video id="video" controls="controls">
<source src="fun.mp4"></source>
</video>
<button id="btn1">播放</button><button id="btn2">暂停</button>
</body>
<script type="text/javascript">
var video = document.getElementById("video");
var bf = document.getElementById("btn1");
var zt = document.getElementById("btn2");
bf.onclick=function(){
video.play();
}
zt.onclick=function(){
video.pause();
}
var flag = true;
video.onclick=function(){
if(flag){
this.play();
flag = false;
}else{
this.pause();
flag = true;
}
}
</script>
</html>
视频遮罩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
html{
height: 100%;
}
body{
overflow: hidden;
height: 100%;
}
.main{
height: 100%;
width: 100%;
position: relative;
display: block;
}
.lop{
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
background: rgba(0,0,0,0.4);
top: 0;
left: 0;
}
.vd{
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.btn{
height: 0px;
width: 0px;
border: 25px solid #efefef;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
position: absolute;
top: 45%;
left: 50%;
margin-left: -25px;
cursor: pointer;
z-index: 15;
}
.but{
height: 100px;
width: 100px;
background: rgba(0,0,0,.5);
font-size: 80px;
position: absolute;
z-index: 50;
right: 30px;
top: 30px;
}
.vp{
position: absolute;
z-index: 20;
}
.nav{
display: none;
}
</style>
</head>
<body>
<div class="nav">
<video class="vp">
<source src="pc-fullvideo.mp4"></source>
</video>
<button class="but">X</button>
</div>
<div class="main">
<video id="vd" autoplay="autoplay" loop="loop">
<source src="http://a.img.pp.cn/upload_files/2016/12/19/wdj_topic/min-video.mp4"></source>
</video>
<div class="lop"></div>
<div class="btn"></div>
</div>
</body>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$('.btn').on('click',function(){
$('#vd')[0].pause();
$('.main').css('display','none');
$('.nav').css('display','block');
$('.vp')[0].play();
});
$('.but').on('click',function(){
$('.vp')[0].pause();
$('.nav').css('display','none');
$('.main').css('display','block');
$('#vd')[0].play();
});
</script>
</html>
