通过css修改video标签的原生样式

已于 2024-02-26 15:36:56 修改
阅读量1.1k 收藏 4
点赞数 4
分类专栏： 前端 JavaScript ES6 文章标签： javascript 前端 html5
于 2024-02-26 15:36:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ta_huang/article/details/136300568
版权
JavaScript 同时被 3 个专栏收录
45 篇文章 1 订阅
订阅专栏
前端
42 篇文章 0 订阅
订阅专栏
ES6
10 篇文章 0 订阅
订阅专栏

通过css修改video标签的原生样式

描述

修改video标签的原生样式

实现

在控制台中打开设置，勾选显示用户代理 shadow DOM，就可以审查video标签的内部样式了
在这里插入图片描述在这里插入图片描述
箭头处标出来的就是shodow DOM的内容，这些内容正常不可见的，只有勾选了才会显示

  1. 我们知道了结构之后，就可以通过css来设置样式了
  2. 将时间修改为红色样式
    在这里插入图片描述
    拿到pseudo的值设置样式
video::-webkit-media-controls-current-time-display {
      color: red;
   }

结果

在这里插入图片描述

zhanle_huang
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
「HTML和CSS入门指南」video 标签详解
a451319296的博客
06-04 1万+
video 标签是一个重要的标签，它可以帮助您在网页中添加视频，从而使您的内容更具吸引力、生动和易于理解。在使用 video 标签时，请注意选择正确的属性、嵌套元素、文件大小及其对页面加载时间的影响，并测试和调整您的代码以确保最佳兼容性。
css video 样式,使用CSS修改 video 标签默认样式
weixin_36352432的博客
08-03 6574
使用CSS修改 video 标签默认样式时间：2019-11-08 17:42:14来源：作者：效果展示：1、模拟直播，去除进度条、当前观看时间，剩余时间。效果：2、去除 video 标签全部控件效果：Tags：CSS点击:()评论:()声明：本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系，我们将及时更正、删除...
HTML5 video 标签属性、API 方法、事件、自定义样式详解与实用示例
最新发布
JINGWHALE
05-28 1172
HTML5 video 标签为网页内嵌视频提供了强大且便捷的功能。本文对 video 标签的主要属性、API 方法、事件、自定义样式及其使用示例的详细介绍。
html5+video手机样式修改,如何自定义video播放器样式？
weixin_42376614的博客
06-03 1550
本篇文章给大家分享了关于如何自定义video播放器样式，内容很详细，希望可以帮助到大家。DIY本文基于HTML5 Video API，自定义Web视频播放器样式。其实吧，原生的video 标签样式挺好看的，但每个人的视觉感受不一样，所以就会有需要改变原生样式的时候。那就给它化个妆咯。淡妆，淡妆。webkit-playsinline="true"playsinline="true"x-webkit-...
h5中video详解和其它新标签，css自定义常量
snow_small的博客
05-31 5119
一、直播的工作原理1、直播的流程2、视频的格式和兼容性，flv：b站使用的，hls：苹果使用的3、直播协议（mp4适合点播（就是重播）比如爱奇艺。。。）（1）HLS协议：先发放M3U8文件，这个文件有很多索引，指向不同的片段ts，根据ts片段的时长，浏览器会自动更新M3U8文件对应hls类型的视频，以.ts结尾video解析M3U8文件（索引文件），解析成一个个片段，会有延迟（2）RTMP协议：建...
自定义video标签样式
ZhuCongLin_68的博客
05-13 149
【代码】自定义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
web及uniapp中自定义 video 标签样式 （一）
UncleWen007的博客
07-12 854
如何修改web端及基于uniapp的小程序中video标签的默认样式
移动端基于video标签二次封装样式,记录生活方便以后cv
zzzbbb_的博客
07-18 275
详情是有全屏按钮的，正常是没有全屏按钮。
video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载
jinse29的博客
02-24 4035
最近遇到的需求就是重新video标签的控制栏的样式，包括进度条、音量、倍速、全屏等样式，在正常状态下，可以将原生样式隐藏掉自定义新的控制栏元素定位上去，但是全屏后样式失效，出现的还是原生的控制栏。只能曲线救国，说白了就是让video的父级全屏，进而让video也屏，控制栏的自定义组件样式定位上就可以了。具体是f12 可以看出，自定义的组件其实还在原先的位置，全屏后的video新增的伪类和样式无法修改，未全屏状态下自定义控制栏的组件样式。全屏后，发现控制栏已经变成原生的样式。
video:一个基于浏览器的视频播放器，它利用 HTML5 视频标签和纯 Javascript 来控制事件。 这些代码改编自分散在互联网上的众多来源
07-06
视频 一个基于浏览器的视频播放器，它利用 HTML5 视频标签和纯 Javascript 来控制事件。 这些代码改编自散布在互联网上的众多来源。 只需克隆存储库并从浏览器运行它
HTML页面原生VIDEO标签隐藏下载按钮功能
09-28
本文将详细介绍如何通过CSS来隐藏`<video>`标签内的下载按钮。 在默认情况下，浏览器会为`<video>`标签生成一套内置的媒体控制面板，其中包括播放、暂停、音量以及下载按钮。要隐藏下载按钮，我们可以利用浏览器...
原生 H5 商城静态页面(HTML+ CSS+ JS)
06-19
CSS用于控制网页的样式和布局。在H5商城页面中，CSS3引入了新的选择器（如`:nth-child()`,`:not()`)，使得更精确地选取元素成为可能。另外，CSS3的Flexbox和Grid布局系统简化了复杂的多列布局，可以灵活地处理不同...
HTML5 video播放器全屏(fullScreen)方法实例
09-28
CSS部分设置了视频容器的样式，并为全屏模式下的视频元素定义了样式，确保在全屏时视频能填充整个屏幕。 JavaScript部分是实现全屏功能的关键。`invokeFieldOrMethod`函数通过遍历不同的浏览器前缀（如`webkit`、`...
video-player:自定义视频播放器
03-26
开发者需要使用HTML和CSS来设计这些元素的布局和样式，同时通过JavaScript处理交互逻辑，如点击事件和状态更新。 2. **暂停/播放功能**： 播放和暂停功能是视频播放器的基础。JavaScript的`HTMLVideoElement`对象...
HTML+CSS+JS原神官网实现
05-11
同时，你还会接触到如何使用`<img>`标签插入图片，以及如何利用`<audio>`和`<video>`元素嵌入多媒体内容。 接着，CSS（Cascading Style Sheets）是样式表语言，用于控制网页的外观和布局。在项目中，你需要使用CSS...
【转】如何修改 video 样式
weixin_34384915的博客
04-12 1261
我们这里说的“修改 video 样式”并不是要自己实现一套 controls，而是尝试修改 video 的默认样式 隐藏全屏按钮 这个很容易查到 video::-webkit-media-controls-fullscreen-button{ display: none; } 那么，video::-webkit-media-controls 是什么？还可以用它来定义哪些元素的样式，见下文 自定义其...
vue3自定义video标签视频样式
m0_72795372的博客
04-29 349
vue3自定义video标签视频样式
原生video标签 全屏按钮为灰色
07-28
对于原生的video标签，全屏按钮的样式通常是由浏览器自动控制的，因此全屏按钮是否为灰色可能是由浏览器的样式决定的。不同浏览器可能有不同的默认样式，但你可以通过自定义CSS来改变全屏按钮的样式。 首先，你可以给video元素添加一个自定义的类名，比如`fullscreen-video`： ```html <video class="fullscreen-video" controls> <!-- 视频源 --> </video> ``` 然后，在CSS中使用该类名来修改全屏按钮的样式： ```css .fullscreen-video::-webkit-media-controls-fullscreen-button { /* 修改为你想要的样式 */ } .fullscreen-video::-moz-full-screen-button { /* 修改为你想要的样式 */ } .fullscreen-video::-ms-fullscreen-button { /* 修改为你想要的样式 */ } ``` 请注意，不同浏览器可能需要使用不同的前缀来定制全屏按钮的样式。上面的代码中使用了WebKit、Mozilla和Microsoft的前缀，你可以根据你所需的浏览器进行适当的修改。 希望这个回答对你有帮助！如果有任何其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值