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

如图效果为：

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);
  })
});

文件下载在：baiduyunguanjia-javascript实例-20151022-点击视频按钮播放视频交互效果

效果查看为：http://www.5ulq.com/share/weibo/379?from=timeline&isappinstalled=1