html区域
播放/暂停
您的浏览器暂不支持视频播放
css 区域
.video_file {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
}
.video_file button {
background-image: url(http://static.kaiba315.com/video_bg_grey.png);
background-color: transparent;
background-size: 100%;
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
text-indent: -9999px;
z-index: 99;
border: none;
}
.video_file #video_img,
.video_file video {
width: 100%;
height: 44vw;
}
.video_file #video_img{
position: absolute;
left: 0;
top: 0;
z-index: 90;
}
#video_img,#video_btn{opacity: 1;}
#video_img.displayno,#video_btn.displayno{
opacity: 0;
}
js 区域
var myVideoBtn =document.getElementById("video_btn");
var myVideo =document.getElementById("video");
var myVideoImg =document.getElementById("video_img");
function playVideo(obj) {
if (myVideo.paused) {
myVideo.play();
$('#video_img').addClass('displayno');
$('#video_btn').addClass('displayno');
}
else {
myVideo.pause();
$('#video_img').removeClass('displayno');
$('#video_btn').removeClass('displayno');
}
}
$('.video_file').on('click',function(){
playVideo(myVideo)
})