首页 > 其他分享 >vue 视频隐藏controls功能按钮

vue 视频隐藏controls功能按钮

时间:2023-06-21 13:56:32浏览次数:33  
标签:vue media button controls video buttonvideo 按钮 webkit

 

/*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;}

/*隐藏controls中的音量控制*/
video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-mute-button { //隐藏android端video标签自带的音量调节按钮
display: none;
}

/*其实这倒不是什么大问题,但是为了样式统一,以及方便监控事件,可以在css中取消这个按钮*/
video::-webkit-media-controls-start-playback-button { //video视频不显示默认的中心的play icon
opacity: 0;
}

/*禁用video的controls(要慎重!不要轻易隐藏掉,会导致点击视频不能播放)*/
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button
————————————————
版权声明:本文为CSDN博主「刘杨造梦程序开发建站」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/BenChiZhuBaDaoWang/article/details/122612134

标签:vue,media,button,controls,video,buttonvideo,按钮,webkit
From: https://www.cnblogs.com/sheizhuchenfu2/p/17496047.html

相关文章

  • vue devtools安装及使用
    (1)chrome商店下载进入浏览器的设置:或者直接进入该网址:https://chrome.google.com/webstore/search/vuedevtools?hl=zh-CN(2)重启项目,重新按F12,可以发现多了个vue,双击进入:......
  • vue项目主题切换参考
    1.https://blog.csdn.net/czc1997/article/details/1261715412.https://www.jb51.net/article/272615.htm3.https://www.jb51.net/article/213871.htm4.https://www.cnblogs.com/johu/p/15394798.html全局引入在main.js中引入编译的样式文件import"@/assets/gulptheme/FEB84......
  • 关于vite创建vue3项目@代替src失效的问题
    用vite创建的vue3项目,用@来代替src不生效。报错:[vite]Internalservererror:Failedtoresolveimport"@/views/xxxxxxxxxxxxx"from"src\views\dashboard\index.vue".Doesthefileexist?解决的方法是:先安装pathnpminstall--save-dev@type/node在vite.co......
  • vue3+vite+TS搭建项目
    安装npm安装方式npminitvue@latestpnpm安装方式(二选一)pnpmcreatevue@latest然后设置项目名称,接着选择自己需要的配置,安装完成......
  • Electron Vue Vite 开发桌面应用
    我需要使用Electron,VUE3,Vite开发一个桌面应用,接收来自串口的数据,并使用Plotly绘制随时间变化的曲线,请提供开发步骤,项目文件结构好的,以下是一个基本的Electron+Vue3+Vite应用的开发步骤:确保您已经安装了Node.js和npm。安装VueCLI:npminstall-g@vue/cli创建......
  • 单标签下的日间/黑夜模式切换按钮效果
    前不久,在网上看到这么一张非常有趣的图:想必很多同学都看到这张图,是一个开发小哥被一个日间/黑夜模式切换按钮效果逼疯的视频。其最终效果大致如下:原完整代码在这里:Night&&DayToggle☀️/......
  • vue使用vue-seamless-scroll自动滚动插件
    首先运行命令npminstallvue-seamless-scroll--savetemplate:<divclass="publicNotification"@click="toDetail($event)">   <vue-seamless-scroll:class-option="publicNotificationOption":data="publicNotification&quo......
  • 2023-06-21 vue 变量赋值失败
    直接看代码://获取屏幕高度uni.getSystemInfo({success:function(res){this.screHeight=res.screenHeight;}});这个变量screHeight没有被赋值,拿到的还是我设置的初始值。原因:this指向的作用域并不是Vue实例本身,所以就无法赋值。解决方案:在最外一层绑......
  • 前端Vue自定义列表表格信息展示可用于商品规格参数展示
    前端Vue自定义列表表格信息展示可用于商品规格参数展示 ,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13131效果图如下:使用方法<!--table-list:表格数组数组里对象可自定义字段 --><cc-defineTable:table-list="tableArr"></cc-defin......
  • 前端Vue自定义顶部搜索框 热门搜索 历史搜索 用于搜索跳转使用
    前端Vue自定义顶部搜索框热门搜索历史搜索用于搜索跳转使用,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13128效果图如下:自定义顶部搜索框用于搜索跳转使用方法<!--自定义顶部搜索框用于搜索跳转skipUrl:跳转url为绝对路径/pages开......