Video标签上面覆盖播放按钮点击播放

最终效果:

Video标签上面覆盖播放按钮点击播放_第1张图片

自定义图片(背景不是poster)。覆盖到视频上,然后点击这个可以 播放。

HTML部分:

CSS部分:

.video-box{
	position: relative;
}
.video-box video{
	display: inline-block;
  vertical-align: baseline;
}
.video-box .video-img{
	position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 999;
    background: url(/web/pic/v.jpg) no-repeat;
    background-size: 100% 100%;
		cursor:pointer
}

JS控制部分:

 

 

 

你可能感兴趣的:(web前端)