h5隐藏video控制按钮controls

最新推荐文章于 2025-05-30 23:59:51 发布

江湖行骗老中医lm

最新推荐文章于 2025-05-30 23:59:51 发布

阅读量2.3w

点赞数 4

分类专栏： html

html 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在iOS和Android的WebView中隐藏video元素的全屏、音量控制按钮，通过CSS选择器针对不同浏览器内核进行适配，实现禁用全屏等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言
昨天app的同事（ios跟安卓）发现webview的video全屏按钮有问题，他们想禁用掉全屏、音量控制的按钮，前端同事在根据api设置disable_full_screen=1（pc端falsh平台生效），但全屏按钮依旧存在。既然api无效，那只能曲线救国，隐藏video内部controls功能按钮进而禁用全屏按钮。（以下在ios11/12安卓小米华为测试无问题）

1、怎么查看video内部构造

chrome 下，开发者工具 setting Preferences Elements 勾选 “Show user agent shadow DOM”

2、隐藏video功能按钮

/*video默认全屏按钮*/
    video::-webkit-media-controls-fullscreen-button{ display: none !important; }

    /*video默认aduio音量按钮*/
    video::-webkit-media-controls-mute-button { display: none !important;}

    /*video默认setting按钮*/
    video::-internal-media-controls-overflow-button{ display: none !important;}

    /*腾讯云点播禁用firefox全屏、设置按钮*/
    .trump-button[sub-component="fullscreen_btn"],.trump-button[now="fullscreen"]{ display:none!important;}
    .trump-button[sub-component="setting"]{ display:none !important;}

/*禁用video的controls（要慎重！不要轻易隐藏掉，会导致点击视频不能播放）*/
video::-webkit-media-controls {
  display:none !important;
}

3、删掉下载/全屏等按钮

 <video controls controlsList='nofullscreen nodownload noremote footbar' ></video>