想出了一个解决办法。搞砸了,因为
<video id="videopromo" style="display:none;position:absolute;z-index:-1;" controls poster="video/video.jpg" width="100%" height="500">
<source src="video/video.mp4" type="video/mp4">
<source src="video/video.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="video/player.swf"
width="854" height="504">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="file=video.mp4">
<!--[if IE]><!--><param name="movie" value="player.swf">
<!--<![endif]-->
<img src="http://devfiles.myopera.com/articles/4791/video.jpg" width="100%" height="500" alt="Video">
<p>Your browser can't play HTML5 video. <a href="video/video.webm">
Download it</a> instead.</p>
</object>
</video>
放在上面
<div id="heroslider">
<div id="hero">
<div class="page-header pull-left"><h1>you deserve a better web experience!</h1>
<p>inroducing a complete web presence service that is designed to ease your companies workload while increasing user ease.<br> <a href="services.php"> learn more</a></p>
<a href="#" id="videofade" class="button">watch video</a>
</div>
</div>
</div>
我只是用 display:none 隐藏视频,单击按钮时会取消。
现在一切正常,您可以在http://divisionforty.com在移动设备上进行测试
丹佛