html5video隐藏地址,h5隐藏video控制按钮controls

前言

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

1、怎么查看video内部构造

chrome 下&＃xff0c;开发者工具 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&＃61;"fullscreen_btn"],.trump-button[now&＃61;"fullscreen"]{ display:none!important;}

.trump-button[sub-component&＃61;"setting"]{ display:none !important;}

/*禁用video的controls(要慎重&＃xff01;不要轻易隐藏掉&＃xff0c;会导致点击视频不能播放)*/

video::-webkit-media-controls {

display:none !important;

}

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