在video标签下,系统会默认显示内置的播放图标,美不美观另说,但在很大程度上,这个图标都难以和项目的整体风格保持一致。
查看文档,我们发现可以通过去掉 controls 属性去掉播放图标,但是如果你的项目需要适配移动端,你就会发现,这一属性失效了,无论如何,play图标都会突兀的显示在页面上。
那么到底该如何去掉这个图标呢?下面分享一种我认为可行的方法,欢迎大家一起分享交流。
简单点说就是在移动端不显示真正的video标签,而是通过相对定位将video位置放在top:10000px以外或其他看不到的位置,然后再自己写一个play图标。通过自己设置的play图标来控制播放。
下面是demo
HTML
<li class="videobox">