html5视频遮罩,Day07（HTML5 demo 视频，遮罩）

视频

播放暂停

var video = document.getElementById("video");

var bf = document.getElementById("btn1");

var zt = document.getElementById("btn2");

bf.οnclick=function(){

video.play();

}

zt.οnclick=function(){

video.pause();

}

var flag = true;

video.οnclick=function(){

if(flag){

this.play();

flag = false;

}else{

this.pause();

flag = true;

}

}

视频遮罩

*{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;

}

X

$('.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();

});