标签：
在video标签下，系统会默认显示内置的播放图标，美不美观另说，但在很大程度上，这个图标都难以和项目的整体风格保持一致。
查看文档，我们发现可以通过去掉 controls 属性去掉播放图标，但是如果你的项目需要适配移动端，你就会发现，这一属性失效了，无论如何，play图标都会突兀的显示在页面上。
那么到底该如何去掉这个图标呢？下面分享一种我认为可行的方法，欢迎大家一起分享交流。
简单概括下，这个方法就是在移动端不显示真正的video标签，而是通过相对定位将video位置放在top:10000px以外或其他看不到的位置，然后再自己写一个play图标。通过自己设置的play图标来控制播放。
下面是demo
HTML
<li class="videobox"> <video width="100%" id="video1"> <source src="resources/bg.mp4" type="video/mp4"> <source src="resources/bg.ogv" type="video/ogg"> </video> <div class="video-poster"> <img src="images/video/bg.jpg"> <div class="i play"></div> </div> <p>Funniest Football Fails Compilation -- FailArmy</p> </li>
CSS
.m-video li{width:49%;float:left;margin-right:2%;margin-bottom:.2rem;color:#333;position: relative;}
.m-video li video{position: absolute;width:100%;top: -1000px;} .i.play{position:absolute;width:60px;height:60px;left:50%;margin-left:-29px;top:50%;margin-top:-31px;background:url(../images/static/play.svg) 0 0 no-repeat rgba(0,0,0,.3);background-size:contain;box-shadow:0 0 3px rgba(0,0,0,.3);border-radius:30px;}
JS
var myVideo = document.getElementById("video1"); var videoBox = $(".videobox"); videoBox.onClick = function() { playPause() } function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause() } })
标签：
原文地址：http://www.cnblogs.com/mangoo/p/5300386.html
