【移动端】点击视频按钮播放视频效果

chenguiya 2021-09-07 原文

如图效果为：

HTML代码为：

<div id="banner" data-type="1">
           <img class="img-responsive" src="20151019121937810_thumb.gif">
           <span class="banner_icon"></span>
      </div>

CSS代码为：

#banner{ width: 95%; max-width: 100%; position: relative; margin: 0 auto; cursor: pointer; min-height: 40px;}
.img-responsive{ width: 100%; max-width: 100%; display: block; height: auto; margin: 0 auto; vertical-align: middle;}
#banner{ width: 95%; max-width: 100%; position: relative; margin: 0 auto; cursor: pointer; min-height: 40px;}
#banner .banner_icon{ position: absolute; left: 50%; top: 50%; background: url(player_ico.png) no-repeat 0 0; background-size:contain; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px;}
@media screen and (max-width:561px){#banner .banner_icon{width:70px; height: 70px;margin-left: -35px; margin-top: -35px;}}
@media screen and (max-width:481px){#banner .banner_icon{width:60px; height: 60px;margin-left: -30px; margin-top: -30px;}}
@media screen and (max-width:401px){#banner .banner_icon{width:50px; height: 50px;margin-left: -25px; margin-top: -25px;}}
video{width: 100% !important; height: auto !important; display: inline-block; vertical-align: baseline;}

JS代码为：

$(function(){
  $(\'#banner\').on(\'click\',function(){
     var file_type=$(\'#banner\').attr(\'data-type\');
     var html=\'\';
     if(file_type==0){
        html +=\'<img class="img-responsive" src="20151019121937810.gif">\';
     }else{
         html +=\'<video width="320" height="240" controls="controls" autoplay="autoplay">\';
         html +=\'<source src="20151019122005453.mp4" type="video/mp4" />\';
         html +=\'</video>\';
     }
     $(\'#banner\').html(html);
  })
});