如图效果为:

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

 

版权声明:本文为chenguiya原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/chenguiya/archive/2004/01/13/4900285.html