【移动端】点击视频按钮播放视频效果
如图效果为:
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 版权协议,转载请附上原文出处链接和本声明。