通过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 6564
使用CSS修改 video 标签默认样式时间：2019-11-08 17:42:14来源：作者：效果展示：1、模拟直播，去除进度条、当前观看时间，剩余时间。效果：2、去除 video 标签全部控件效果：Tags：CSS点击:()评论:()声明：本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系，我们将及时更正、删除...
自定义video标签样式
最新发布
ZhuCongLin_68的博客
05-13 133
【代码】自定义video标签样式。
html5+video手机样式修改,如何自定义video播放器样式？
weixin_42376614的博客
06-03 1544
本篇文章给大家分享了关于如何自定义video播放器样式，内容很详细，希望可以帮助到大家。DIY本文基于HTML5 Video API，自定义Web视频播放器样式。其实吧，原生的video 标签样式挺好看的，但每个人的视觉感受不一样，所以就会有需要改变原生样式的时候。那就给它化个妆咯。淡妆，淡妆。webkit-playsinline="true"playsinline="true"x-webkit-...
h5中video详解和其它新标签，css自定义常量
snow_small的博客
05-31 5103
一、直播的工作原理1、直播的流程2、视频的格式和兼容性，flv：b站使用的，hls：苹果使用的3、直播协议（mp4适合点播（就是重播）比如爱奇艺。。。）（1）HLS协议：先发放M3U8文件，这个文件有很多索引，指向不同的片段ts，根据ts片段的时长，浏览器会自动更新M3U8文件对应hls类型的视频，以.ts结尾video解析M3U8文件（索引文件），解析成一个个片段，会有延迟（2）RTMP协议：建...
CSS video控件去掉视频播放条
蓝胖子的博客
12-08 1045
CSS video控件去掉视频播放条
css对video进行满屏设置
Lipn_的博客
10-12 3242
css设置视频满屏播放
video标签隐藏底部进度条等内容
一个超爱喝可乐的web前端攻城狮
05-10 6340
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
CSS_控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）
小歪博客
10-20 7437
当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。 <video controls></video> //全屏按钮 video::-webkit-media-controls-fullscreen-button { display: none; } //播放按钮 video::-webkit-media-controls-play-button { display: non
css video 样式,css自定义video播放器样式的方法
weixin_39715834的博客
08-03 5738
css自定义video播放器样式的方法发布时间：2020-09-14 14:46:29来源：亿速云阅读：58作者：小新css自定义video播放器样式的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！DIY本文基于HTML5 Video API，自定义Web视频播放器样式。其实吧，原生的video 标签样式挺好看...
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...
HTML5 video 标签属性、API 方法、事件、自定义样式详解与实用示例
JINGWHALE
04-17 3864
HTML5 video 标签为网页内嵌视频提供了强大且便捷的功能。本文对 video 标签的主要属性、API 方法、事件、自定义样式及其使用示例的详细介绍。
修改video标签默认样式问题video播放器样式优化；video播放器默认显示图片
zhangzuying的博客
12-07 9919
需求： 1.播放器可以支持上传默认封面图片 2.播放器的进度条长度拉长些,与播放器长度一样长，或者其他方式美化一下 首先需求1.播放器可以支持上传默认封面图片解决方案： 1.第一种方法可以直接在video标签中直接添加poster属性 <!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg" controls="controls" poster="../../imgs/poster.png"> you
前端之一阶段[HTML、CSS]问题记录
Mr.小灰狼_随笔
09-16 1910
前端之一阶段[HTML、CSS]问题记录 目录 一、HTML 1、video 标签如何去掉 画中画 功能 二、CSS 1、去掉标签自带的默认样式 2、利用奇偶数进行样式定义 3、获取同类元素的最后一个元素 4、背景色如何实现渐变效果 5、利用 flex 布局实现横向滚动 记录一下自己在日常开发项目的过程中遇到的各种各样关于 HTML、CSS 相关方面的问题 ， 方便后期快速解决类似问题
css video 标签
09-13
CSS video标签用于控制和样式化HTML5视频元素。通过使用CSS属性和伪类，可以对视频进行自定义样式和交互。下面是一些常见的CSS属性和伪类用法： 1. `object-fit`属性：用于定义如何调整视频元素的大小以适应其容器。常用的值包括`contain`（缩放视频以适应容器，保持宽高比），`cover`（将视频拉伸以填充容器，可能会裁剪视频），`fill`（拉伸视频以填充容器，不保持宽高比）等。 2. `object-position`属性：用于定义视频元素在其容器中的位置。可以使用像素值或百分比值来指定位置。 3. 伪类`:hover`和`:focus`：可以通过这些伪类为视频元素添加交互效果，例如鼠标悬停时改变视频的透明度或播放按钮的显示。 4. `filter`属性：用于为视频元素应用各种视觉效果，例如模糊、饱和度、对比度等。 5. `transition`属性：用于创建平滑的过渡效果，可以在视频播放状态之间添加动画效果，例如渐变淡入淡出效果。 6. `::cue`伪元素：用于样式化视频的字幕文本。可以使用这个伪元素来自定义字幕的字体、颜色、大小等样式。 7. `::media-controls`伪元素：用于样式化浏览器自带的视频控制条。可以使用这个伪元素来调整控制条的颜色、布局等样式。 请注意，具体的CSS属性和伪类使用方式可能会因浏览器和视频格式的不同而有所差异。为了确保兼容性，请务必进行适当的测试和验证。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值