java h5 视频播放_h5使用video标签播放视频

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)

})