移动端隐藏video默认play图标技巧

在video标签下,系统会默认显示内置的播放图标,美不美观另说,但在很大程度上,这个图标都难以和项目的整体风格保持一致。

查看文档,我们发现可以通过去掉 controls 属性去掉播放图标,但是如果你的项目需要适配移动端,你就会发现,这一属性失效了,无论如何,play图标都会突兀的显示在页面上。

那么到底该如何去掉这个图标呢?下面分享一种我认为可行的方法,欢迎大家一起分享交流。

简单点说就是在移动端不显示真正的video标签,而是通过相对定位将video位置放在top:10000px以外或其他看不到的位置,然后再自己写一个play图标。通过自己设置的play图标来控制播放。

下面是demo

HTML

                <li class="videobox">
                 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值