设置video的进度条常显

原创 已于 2024-03-05 17:42:14 修改 · 915 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #html5

于 2024-03-05 17:12:05 首次发布
本文讲述了作者尝试通过Chrome开发者工具显示隐藏的元素，特别关注视频播放的伪元素。他们遇到问题，即无法使`-internal-media-xxx`控制条样式生效，求助于使用`:nth-child`伪类但未成功。寻求解决此类问题的技术解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

根据网上的方法，把隐藏的元素显示

在chrome中F12或者通过其他方式打开开发者工具（相信应该知道从哪里打开），然后点击右上的齿轮，进入设置，勾选Show user agent shadow DOM
在这里插入图片描述
在这里插入图片描述

就能在elements里面查看视频的播放的伪元素
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/19b2c515399c4c07b4b4ddff79f56639.png

但是我设置这个控制条（就是这个什么-internal-media-xxx，不知道原理是啥）的样式一直不生效，就使用了:nth-child伪类来实现。

在这里插入图片描述
最后还是不生效 有解决方法的大佬帮忙看看

silence_xiang
关注
VUE中如何指定一个VIDEO 只显示视频内容不显示进度条播放暂停等其他功能
世轩的博客
09-05 2390
在 Vue 中可以通过 CSS 和一些技巧来让一个只显示视频内容而不显示进度条、播放暂停等其他功能。
给video添加自定义进度条
weixin_30267697的博客
01-29 1622
思路： 　　1.进度条，首先要知道视频的总长度，和视频的当前进度，与其对应的便是进度条的总长度和当前的长度，两者比值相等 　　2.获取视频的总长度（单位是秒），获取当前进度 　　3.要实现的功能，首先是进度条根据视频播放的进度，不断的增加。意思就是不断的获取视频的当前进度，然后去除以视频的总长度，拿这个比值乘以进度条的总长度，就得到经度条当前的长度，赋值。 　　4.拖动经度条，视频在相应的...
video.js中控制进度条一直显示的解决方案
Fatfish_tree的博客
11-07 1931
*controls进度条一直显示*/
控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）
weixin_43422861的博客
08-17 7114
video
UniApp Video 全屏时添加自定义进度条或元素
最新发布
qq_36029568的博客
06-13 898
UniApp Video 全屏自定义元素实现方案 在 UniApp 中实现视频全屏时添加自定义 UI 元素（如进度条、控制按钮）的核心方法是将自定义元素作为 <video> 组件的子元素，并使用 CSS 绝对定位确保其位置正确。关键实现步骤包括： 隐藏原生控件（设置 show-progress=false 和 controls=false） 使用 CSS absolute 定位自定义元素，并通过 z-index 确保显示层级 监听 fullscreenchange 事件追踪全屏状态 使用 Vid
video标签实现视频播放和进度显示
yasinawolaopo的博客
09-25 3799
最近听了一首STAY的翻唱视频就有点想做一个简单的视频播放 先是html的编写: <video id="Shaun_video" class="Shaun_class" width="600px" > <source src="MP4路径" type="video/mp4"> </video> <p id="jindu">0</p> 第二步: var Shaun_video = document.getElemen
video 标签设置样式
zyf13671493506的博客
10-17 5311
设置video标签的默认样式 在这里插入图片描述 //全屏按钮 video::-webkit-media-controls-fullscreen-button { // display: none; } //播放按钮 video::-webkit-media-controls-play-button { } //进度条 ...
video标签-点击视频屏幕 播放视频，显示进度条
kirsten_z的博客
11-15 1万+
实现效果： 根据指定时间使用不同效果 点击video封面图片 播放视频 视频播放时显示进度条 示例代码： <div> @if(time() - strtotime('2016-11-17 15:30:00') < 0) <video src="/cdsassets/upload/video/20161117.mp4" x-webkit-airplay="true" webkit-
videojs-progressTips:video.js 插件，用于在进度条悬停时显示时间
06-26
videojs-progressTips 在 video.js 播放器上显示悬停时间的工具提示。 此插件已更新至 video.js 4.6.4 并在其上进行测试。 这取决于jQuery。 入门 下载和 在您的网页中： < script src =" ...
video组件怎么让进度条常显
11-28
3. 在需要的地方，比如任何时候你想显示进度条，你可以手动设置视频的`currentTime`属性到当前时间，然后它就会显示出来，即使视频暂停了： ```javascript this.myVideoRef.currentTime = currentTime; // ...
vue video标签显示进度条
10-12
在Vue中，要在`<video>`标签中添加一个进度条来显示视频播放进度，你可以利用HTML5的`controls`属性，并结合JavaScript来监听`timeupdate`事件。这里是一个简单的示例： ```html <video ref="myVideo" :src=...
【video js】默认显示进度条
南乡人的博客
11-11 426
videojs官方的API 没有提供一个样式上的控制，能够在默认状态就显示进度条。必须要点击播放后才显示进度条。需要手动更改样式文件。
学习HTML5这一篇就够了
热门推荐
轻松的小希
11-25 9万+
目录第一章 HTML5概述1.1、什么是HTML1.2、什么是HTML51.3、本文重要说明1.4、浏览器的版本1.5、选择开发工具第二章 HTML5语法2.1、基本结构2.2、语法规范2.3、标签规范第三章 HTML5标签3.1、标题标签3.2、段落标签3.3、链接标签3.4、图像标签3.5、表格标签3.6、列表标签3.7、分组标签3.8、语义标签3.9、表单标签3.10、框架标签3.11、音频标签3.12、视频标签3.13、其它标签3.14、头部标签第四章 HTML5属性4.1、属性概述4.2、通用属性
HTML5 媒体播放器 video、audio 自定义播放器进度条（上）
m0_67793437的博客
06-13 2023
当使用到 HTML5 媒体播放器（>），往往有许多自定义的需求，其中。
vue3通过vue-video-player实现视频倍速、默认全屏、拖拽进度条等功能
SunFlower914的博客
06-25 4146
options中的soure.type可选值切换后，type类型一定要和src值返回的数保持一致，否则资源无法加载成功；鼠标点击进度条后视频直接重置到了起点，这个问题可以参考
video标签不显示视频只有进度条
LingSnow1019的博客
03-24 2935
新需求的模块上有个上传视频并预览的功能，我自己用自己的电脑测试视频都能播放，但测试却指了我视频不能播放的bug，因为测试的视频跟我自测的都是mp4格式的，所以基本可以排除视频格式的问题。然后我去教程上查看了video标签才发现端倪 MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 才知道原来还有视频编码这一说，然后我用qq影音查看了两部视频的编码 第一个是我电脑的视频，第二个是测试的视频。第二个很显然视频编码并不支持video标签mp4格式的编码规范 要想解决的话只能换播
vue3项目中video视频中进度条不要显示，隐藏
阿吉太懒的博客
06-19 930
【代码】vue3项目中video视频中进度条不要显示，隐藏。
a标签去下划线或文字添加下修饰_HTML：被低估，且未被广泛使用的有用的标签...
weixin_34201593的博客
12-27 253
本文我将向你展示一些HTML被低估的元素。1. picture 标签的结构类似于带有 的 video 标签，但用于图像。有人会说：“等等，我们不是有 吗？为什么我要使用它呢？”。 远比 强大的多。 用于处理响应式图片，当你具有两种或两种以上质量的图像时，如何处理？也许你尝试使用服务器渲染来检测用户代理，以便为设备和页面提供对应质量的图像。使用Picture元素，你可以使用媒体查询来告诉浏览器...
非常详细，详解html中的video视频标签（自制播放、时间、进度条、速度、全屏），实现自己的播放控件
熟悉JS拼写的FE
12-04 1万+
实现自定义video播放视频控件，详解video中JS的api 最后的效果（还有控制音量，开关声音，因为赶时间，没做上，会在本篇文章中说，怎么控制） 先上基础知识 video的标签属性 属性 值 功能描述 controls controls 是否显示播放控件 autoplay autoplay 设置是否打开浏览器后自动播放 width Pilex（像素） 设置播放器的宽度 height Pilex（像素） 设置播放器的高度 loop loop 设置视频是否循环播放（即播
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值