酒浓码浓 - 给video控制按钮设置样式

最新推荐文章于 2023-08-17 11:22:49 发布
最新推荐文章于 2023-08-17 11:22:49 发布
阅读量364 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mx18519142864/article/details/104315243
版权

给video控制按钮设置样式

打开浏览器控制台做如下设置

设置好，就可以选中DOM进行查看了。

此时可以看到其DOM都是通过pseudo属性来添加的样式，此时我们就可以根据CSS属性选择器进行更改样式。

// 例如：隐藏进度条

video::-webkit-media-controls-timeline{ 

   display：none；

}

 

酒浓码浓的博客
关注
专栏目录
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
01-21
产品开发用的是 vue, 经同事介绍使用了vue-video-player 视频播放插件，通过 demo 案例很快实现了视频播放效果   <video-player class=vjs-custom-skin ref=videoPlayer1 :options=playerOptions :...
CSS_控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）
小歪博客
10-20 7517
当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。 <video controls></video> //全屏按钮 video::-webkit-media-controls-fullscreen-button { display: none; } //播放按钮 video::-webkit-media-controls-play-button { display: non
video 自定义视频播放控件
细节怪的博客
02-21 9583
自定义视频播放控件，控件位置可随意放置
控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）
weixin_43422861的博客
08-17 5690
video
修改video标签自带按钮的默认样式
imkaifan的博客
08-30 2551
这里所说的修改video标签中自带按钮的默认样式，指的是用css就可以控制视频播放按钮的大小等 我们来看一下 video 的内部构造： chrome 下，开发者工具 setting Preferences Elements 勾选 “Show user agent shadow DOM” 再回来看，已经可以看到 video 的内部结构了 看一眼，有没有看到很熟悉的 -webkit-media-controls-fullscreen-button ？ 确实如此，其他的按钮，包括播放按钮、播放进度条、静
控制video标签的控件样式
c_qianxia5040的博客
07-09 8475
第一步、控制面板 回到elements中就有内部结构了 给video标签加controlsList=“nodownload” 不显示下载按钮 <video src="../../assets/demo.mp4" controls="controls" controlsList="nodownload"></video> 1、修改控制面板 video::-webkit-media-controls-enclosure { overflow: hidden; } vid
HTML页面原生VIDEO标签隐藏下载按钮功能
09-28
在默认情况下，浏览器会为`<video>`标签生成一套内置的媒体控制面板，其中包括播放、暂停、音量以及下载按钮。要隐藏下载按钮，我们可以利用浏览器特定的CSS伪元素选择器。以下代码片段展示了如何实现这一目标： ``...
vue-video-player.zip
09-09
3. **组件化开发**：Vue-video-player的核心思想是组件化，它将播放器的功能分解为多个可复用的部件，如播放/暂停按钮、进度条、音量控制等。开发者可以根据需要选择和自定义这些部件，实现高度定制化的播放体验。 ...
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
10-15
在本文中，我们将深入探讨如何使用vue-video-player组件在微信环境中解决自动全屏播放以及横竖屏导致的样式错乱问题。vue-video-player是一个流行的Vue.js插件，用于实现视频播放功能，但它可能在某些特定环境下，如...
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
10-15
这里，`wx:if="{{isShow}}"`用于控制封面图和播放按钮的显示或隐藏，`bindtap="bindplay"`绑定点击事件触发播放函数。同时，通过CSS样式实现封面图和播放按钮的定位，例如使用绝对定位使其居中。 对于视频封面上的...
H5中的video 自定义播放样式控制播放
热门推荐
ShiYadong的专栏
03-15 1万+
        HTML5的video虽然可用controls来展示控件，并进行控制播放暂停等，但是不同的浏览器显示的效果可能不一样，所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。     &lt;div id="video_div" style="text-align:center;"&gt; &lt;button onclick="playPause()"&g...
html5自定义video标签的海报与播放按钮
兰星_thk&try的博客
12-01 5908
一、问题 1.video标签取视频第一帧为海报 2.默认一下播放按键 以上这两点都想自定义 二、思路 使用div把video标签盖住 div中显示自定义的海报图片与按钮 三、步骤分解 1.海报图片作为div的背景 注：无论是横图还是竖图，都希望按原比例显示在div内 css: .yourDiv{ background-color: black; height:20em; back...
vue+elementUI走马灯组件+html ＜video＞实现轮播视频，并自定义视频播放按钮完整demo
zongmaomx的博客
09-23 1万+
效果： 代码： html部分： <el-carousel :interval="5000" arrow="always" :autoplay="autoplay" :indicator-position="autoplay?'':'none'" @change="getIndex"> <el-carousel-item v-for=".
自定义video的controls（播放暂停按钮、进度条、快进快退等）
weixin_30641999的博客
12-13 6094
　　视频标签<video></video>是H5中新增的标签，它自带播放按钮等控件，但在实际开发中我们是不会用标签中自带的控件属性的，一般我们都会自定义控件。 　　首先我们来看看视频标签自带的控件效果： 　　　　 　　　虽然总体来说，这些控件都有，但是往往我们见到的都不会是这样的，一般我们都会自己设计。 　　　　以下是我自己做的一个简单的案例，自定义一些控件并实现它...
video标签样式属性设置
weixin_42087515的博客
06-07 2964
video属性设置
video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载
jinse29的博客
02-24 4345
最近遇到的需求就是重新video标签的控制栏的样式，包括进度条、音量、倍速、全屏等样式，在正常状态下，可以将原生样式隐藏掉自定义新的控制栏元素定位上去，但是全屏后样式失效，出现的还是原生的控制栏。只能曲线救国，说白了就是让video的父级全屏，进而让video也屏，控制栏的自定义组件样式定位上就可以了。具体是f12 可以看出，自定义的组件其实还在原先的位置，全屏后的video新增的伪类和样式无法修改，未全屏状态下自定义控制栏的组件样式。全屏后，发现控制栏已经变成原生的样式。
修改video标签默认样式问题video播放器样式优化；video播放器默认显示图片
zhangzuying的博客
12-07 1万+
需求： 1.播放器可以支持上传默认封面图片 2.播放器的进度条长度拉长些,与播放器长度一样长，或者其他方式美化一下 首先需求1.播放器可以支持上传默认封面图片解决方案： 1.第一种方法可以直接在video标签中直接添加poster属性 <!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg" controls="controls" poster="../../imgs/poster.png"> you
video标签怎样自定义播放按钮样式
weixin_42588877的博客
02-17 1339
可以使用 HTML5 video 标签的 CSS 属性来自定义播放按钮的样式。比如可以使用 CSS 的 background-image 属性来设置自定义的背景图片，也可以使用 border-radius 属性来调整按钮的圆角程度等。 ...
uniapp video播放，视频上方显示可操作按钮
jackeylovestar的博客
10-18 1964
uniapp video播放，视频上方显示可操作按钮
vue-video-player 播放按钮样式
最新发布
08-03
你可以通过修改`vue-video-player`的CSS样式来改变播放按钮的外观，比如覆盖默认的`.vvp__control-play`类来更改其颜色、大小、形状等。如果你想要更复杂的动画效果，可以使用`:hover`, `:active`等伪类，并结合CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值