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

CSS改造video标签的隐藏原生样式：使用shadowDOM与伪类实现时钟颜色更改
原创 已于 2024-02-26 15:36:56 修改 · 2.1k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #html5

于 2024-02-26 15:36:05 首次发布
本文介绍了如何通过在开发者工具中启用shadowDOM，查看video标签的不可见内联样式，然后利用CSS的`:before`或`:after`伪类选择器修改video元素当前时间显示的颜色，实现自定义样式效果。

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

描述

修改video标签的原生样式

实现

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

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

结果

在这里插入图片描述

「HTML和CSS入门指南」video 标签详解
a451319296的博客
06-04 1万+
video 标签是一个重要的标签，它可以帮助您在网页中添加视频，从而使您的内容更具吸引力、生动和易于理解。在使用 video 标签时，请注意选择正确的属性、嵌套元素、文件大小及其对页面加载时间的影响，并测试和调整您的代码以确保最佳兼容性。
h5中video详解和其它新标签，css自定义常量
snow_small的博客
05-31 5312
一、直播的工作原理1、直播的流程2、视频的格式和兼容性，flv：b站使用的，hls：苹果使用的3、直播协议（mp4适合点播（就是重播）比如爱奇艺。。。）（1）HLS协议：先发放M3U8文件，这个文件有很多索引，指向不同的片段ts，根据ts片段的时长，浏览器会自动更新M3U8文件对应hls类型的视频，以.ts结尾video解析M3U8文件（索引文件），解析成一个个片段，会有延迟（2）RTMP协议：建...
CSS基础教程（四十七）响应式 Web 设计之视频(Video)：CSS魔法：让视频像变形金刚一样自适应屏幕！
jxf_jxfcsdn的博客
09-12 360
本文深度剖析CSS响应式视频设计的核心技巧，从aspect-ratio魔法比例到object-fit填充神技，揭秘让视频在各种设备上完美展示的秘籍。通过5大实战案例，教你如何用代码让视频元素像变形金刚一样灵活自适应，解决移动端播放难题，提升用户体验，确保你的网站在多屏时代脱颖而出！
video踩坑
weixin_30263277的博客
03-28 1138
查看以及修改video控件样式，原文地址：https://blog.youkuaiyun.com/z2181745/article/details/82531686 chrome浏览器，F12调出控制台左上角三点更多有个settings，点击进去之后有个“show user agent shadow DOM”勾选刷新页面，video控件就可以查看到元素啦； 一：在移动端使用video没有写con...
CSS属性：object-fit和object-position属性（常用于img、video元素标签）
qq_52006958的博客
09-13 483
本文介绍了CSS中的object-fit和object-position属性。object-fit控制可替换元素（如图片、视频）适应容器的方式，提供fill、contain、cover、none和scale-down五种值，分别对应不同的缩放和填充效果。object-position则用于调整元素内容在容器内的对齐位置，支持关键字、百分比和数值定位。两个属性配合使用可实现精准的响应式布局，但需注意浏览器兼容性问题。文章包含具体语法示例和实际应用代码，适合前端开发者参考使用。
CSS video控件去掉视频播放条
蓝胖子的博客
12-08 1593
CSS video控件去掉视频播放条
【转】如何修改 video 样式
weixin_34384915的博客
04-12 1365
我们这里说的“修改 video 样式”并不是要自己实现一套 controls，而是尝试修改 video 的默认样式 隐藏全屏按钮 这个很容易查到 video::-webkit-media-controls-fullscreen-button{ display: none; } 那么，video::-webkit-media-controls 是什么？还可以用它来定义哪些元素的样式，见下文 自定义其...
css video 样式,使用CSS修改 video 标签默认样式
weixin_36352432的博客
08-03 7019
使用CSS修改 video 标签默认样式时间：2019-11-08 17:42:14来源：作者：效果展示：1、模拟直播，去除进度条、当前观看时间，剩余时间。效果：2、去除 video 标签全部控件效果：Tags：CSS点击:()评论:()声明：本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系，我们将及时更正、删除...
HTML页面原生VIDEO标签隐藏下载按钮功能
09-28
本文将详细介绍如何通过CSS来隐藏`<video>`标签内的下载按钮。 在默认情况下，浏览器会为`<video>`标签生成一套内置的媒体控制面板，其中包括播放、暂停、音量以及下载按钮。要隐藏下载按钮，我们可以利用浏览器...
给video标签加一些属性，微信调用h5原生video
weixin_43960538的博客
12-23 945
给video标签加一些属性，调用h5原生video <video class="video-source"     width="100%"   height="240px"  /*如果有封面，请设置高度*/     controls  /*这个属性规定浏览器为该视频提供播放控件*/   &nb
video 标签隐藏原生控件
最新发布
09-16
以下是几种常见的隐藏video原生控件的方法： 方法1：移除controls属性 默认情况下，添加controls属性会显示浏览器自带的控件。如果不添加该属性，则不会显示控件。 方法2：使用CSS隐藏 即使有controls属性，...
自定义美化HTML5 video视频播放器界面样式
07-14
自定义美化HTML5 video视频播放器界面样式，漂亮的HTML5video视频界面
原生 H5 商城静态页面(HTML+ CSS+ JS)
06-19
CSS用于控制网页的样式和布局。在H5商城页面中，CSS3引入了新的选择器（如`:nth-child()`,`:not()`)，使得更精确地选取元素成为可能。另外，CSS3的Flexbox和Grid布局系统简化了复杂的多列布局，可以灵活地处理不同...
web video标签图标样式修改
02-19
### 自定义HTML5 Video标签播放按钮和其他控制栏图标的CSS样式 为了自定义HTML5 `video`标签的播放按钮以及其他控件图标，通常的做法是通过创建一个覆盖层来替代默认的视频控件。具体来说： #### 使用Div覆盖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标签隐藏底部进度条等内容
一个超爱喝可乐的web前端攻城狮
05-10 7083
video标签隐藏底部进度条等内容 html <video id="videoDom" controls="controls" src="***"></video> css video::-webkit-media-controls-fullscreen-button { display: none; } video::-webkit-media-controls-play-button { display: none; } video::-webkit-med
video标签进行css样式修改
qq_47997447的博客
01-06 430
【代码】video标签进行css样式修改。
video 标签设置样式
zyf13671493506的博客
10-17 5388
设置video标签的默认样式 在这里插入图片描述 //全屏按钮 video::-webkit-media-controls-fullscreen-button { // display: none; } //播放按钮 video::-webkit-media-controls-play-button { } //进度条 ...
HTML5 video 标签属性、API 方法、事件、自定义样式详解与实用示例
JINGWHALE
04-17 1万+
HTML5 video 标签为网页内嵌视频提供了强大且便捷的功能。本文对 video 标签的主要属性、API 方法、事件、自定义样式及其使用示例的详细介绍。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值