最终效果:
自定义图片(背景不是poster)。覆盖到视频上,然后点击这个可以 播放。
HTML部分:
- <div class="video-box" >
- <video id="video" autoplay="autoplay" controls="controls" style="width:100%;height:510px">
- <source src="test.mp4" type="video/ogg">
- <source src="test.mp4" type="video/mp4">
- Your browser does not support the video tag.
- </video>
- <div class="video-img"></div>
- </div>
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控制部分:
- <script type="text/javascript">
- $(".video-img").click(function(){
- $(this).hide();
- $("#video")[0].play();
- })
- </script>