欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

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

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

最终效果:

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

HTML部分:

  1. <div class="video-box" >
  2. <video id="video" autoplay="autoplay" controls="controls" style="width:100%;height:510px">
  3. <source src="test.mp4" type="video/ogg">
  4. <source src="test.mp4" type="video/mp4">
  5. Your browser does not support the video tag.
  6. </video>
  7. <div class="video-img"></div>
  8. </div>

CSS部分:

  1. .video-box{
  2. position: relative;
  3. }
  4. .video-box video{
  5. display: inline-block;
  6. vertical-align: baseline;
  7. }
  8. .video-box .video-img{
  9. position: absolute;
  10. top: 0;
  11. bottom: 0;
  12. width: 100%;
  13. z-index: 999;
  14. background: url(/web/pic/v.jpg) no-repeat;
  15. background-size: 100% 100%;
  16. cursor:pointer
  17. }

JS控制部分:

  1. <script type="text/javascript">
  2. $(".video-img").click(function(){
  3. $(this).hide();
  4. $("#video")[0].play();
  5. })
  6. </script>

 

 

 


普通分类: