设置video的进度条常显

已于 2024-03-05 17:42:14 修改
阅读量441 收藏
点赞数 2
文章标签： 前端 html5
于 2024-03-05 17:12:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/silence_xiang/article/details/136483999
版权

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

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

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

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

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

silence_xiang
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
videojs-progressTips:video.js 插件，用于在进度条悬停时显示时间
06-26
videojs-progressTips 在 video.js 播放器上显示悬停时间的工具提示。 此插件已更新至 video.js 4.6.4 并在其上进行测试。 这取决于jQuery。 入门 下载和 在您的网页中： < script src =" ...
videojs-vtt-thumbnails:Video.js插件，可在进度条悬停时显示缩略图，由外部VTT文件驱动
05-02
videojs-vtt-thumbnails Video.js插件，可在进度条悬停时显示缩略图，由外部VTT文件驱动。 基于。 请注意，此插件当前仅支持拼接的缩略图。 注意：插件会在悬停时隐藏默认外观的鼠标显示时间戳。目录安装安装npm ...
vue3通过vue-video-player实现视频倍速、默认全屏、拖拽进度条等功能
最新发布
SunFlower914的博客
06-25 758
options中的soure.type可选值切换后，type类型一定要和src值返回的数保持一致，否则资源无法加载成功；鼠标点击进度条后视频直接重置到了起点，这个问题可以参考
video.js中控制进度条一直显示的解决方案
Fatfish_tree的博客
11-07 1461
*controls进度条一直显示*/
控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）
weixin_43422861的博客
08-17 5036
video
vue中实现 【 Video视频进度条不能拖动，且能倍速播放 】，用vue-video-player插件，封装成组件的方法步骤
weixin_50450473的博客
12-07 1万+
一、安装vue-video-player 插件 npm install vue-video-player -S 二、引入 1、全局引入，main.js import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VideoPlayer) 2、局部引入 import { vide...
h5 video 自定义控制条
ZSLOGIN的博客
10-10 1132
项目上有视频播放功能，但是视频控制条需要自定义，因为包含其他功能，近期整理了部分功能，自己重新写了控制栏，记录一下（实在没找到什么现成插件，可能还是我懒吧~）。目前只抽了进度条的组件，整个控制栏还没完全抽出，等我啥时候有时间了再慢慢搞。然后因为项目用的是elementUI，所以组件中也是直接用了里面的一些组件。结束，以后有机会再整理。
video标签控件一直保持出现
cora_biubiu的博客
08-19 2120
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … that.refs.myVideo.focus() event.target.setAttribute(‘controls’, ‘controls’) }, false ) 这个方法只要浏览器在屏幕顶层，就不会让video控件消失。
IOS实现简单的进度条功能
01-04
本文实例绘制了炫酷的下载进度条，分享给大家供大家参考，具体内容如下 一、实现思路 1、要实现绘图，通常需要自定义一个UIView的子类，重写父类的- (void)drawRect:(CGRect)rect方法，在该方法中实现绘图操作 2、...
可以用手指拖动改变进度进度条
12-19
圆形进度条在许多应用程序中都很常见，例如在加载动画、设置界面或者游戏过程中。开发者可能会自定义这个滑块的样式、颜色、大小以及响应触摸事件的方式。 为了实现这个功能，开发者需要掌握以下几个关键知识点： ...
video.js实现鼠标移入播放鼠标移出暂停
12-31
同时，我们还可以利用video.js的API来实现更复杂的交互，如添加进度条改变时的回调函数，或者自定义错误处理机制。 总的来说，video.js提供了一个强大且灵活的平台，用于构建适应各种需求的视频播放器。通过熟练...
vue自定义h5video视频播放器进度条组件，可拖拽、跳转、倍速、全屏
热门推荐
gyw的博客
06-08 1万+
一个进度条组件控制多个视频的播放、进度调整。视频可点击全屏观看
video标签实现视频播放和进度显示
yasinawolaopo的博客
09-25 3551
最近听了一首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
Unity 视频播放器，基于VideoPlayer，实现滑动进度条，显示视频时长，全屏显示，音量调节
qq_33161296的博客
11-14 7944
unity播放视频的方式有很多种，但即轻量又好用的，还是unity自带的VideoPlayer，但没有视频基础操作的UI组件，本篇带大家对视频的播放，以及UI组件的实现Unity常用视频格式：mov、mpg、mpeg、mp4、avi、asf1、Hierarchy中新建VideoPlayer组件2、Hierarchy中创建RAWImage3、在Assets中新建RenderTexture纹理4、设置好视频的分辨率5、将建好的纹理拖到第2步中新建的RawImage上。
在vue项目中使用video.js实现视频播放和视频进度条打点
不怕麻烦的鹿丸的博客
02-24 1万+
严格大于0的数字数组，其中1表示常速（100％），0.5表示半速（50％），2表示双速（200％）等。markerStyle配置的是各个打点的默认颜色，如果要每个打点都有自己各自的颜色，可以在markers里给每个打点添加class名字，然后在css里单独设置颜色。Video.js表示用户通过"vjs-user-active"和"vjs-user-inactive"类以及"useractive"事件与玩家进行交互。此选项将用于Video.js（即video.novtt.js）的“novtt”版本中。
视频（音频）播放组件——西瓜播放器
weixin_41897680的博客
11-15 2924
安装 npm install xgplayer 使用 <template> <div> <!-- 视频组件位置 --> <div id="video"></div> </div> </template> <script lang="ts"> import { defineComponent, onMounted } from "vue"; //视频播放组件 import Player
vue3 集成西瓜视频播放器xgplayer
哈
05-15 5380
西瓜视频播放器官网地址：https://v2.h5player.bytedance.com/ 第一步：安装最新稳定版 $ npm install xgplayer vue页面使用 <template> <div id="mse"></div> </template> <script lang="ts"> import { onMounted } from "vue"; import Player from 'xgplayer' export
html5 video视频进度条的实现
呆子小木心的博客
11-25 5799
html5 video视频进度条的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频</title> <link rel="stylesheet"
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-
vue-video-player显示进度条
11-29
要在vue-video-player中显示进度条，可以使用插件自带的控制条。控制条中包含了进度条，可以通过设置控制条的属性来控制进度条的显示。 以下是一个简单的例子，演示如何在vue-video-player中显示进度条： ```html <template> <div> <video-player ref="videoPlayer" :options="playerOptions"></video-player> </div> </template> <script> import VideoPlayer from 'vue-video-player' import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css' export default { components: { VideoPlayer }, data() { return { playerOptions: { controls: true, // 显示控制条 autoplay: false, sources: [{ src: 'http://example.com/path/to/video.mp4', type: 'video/mp4' }] } } } } </script> ``` 在上面的例子中，我们设置了控制条的属性`controls`为`true`，这样就会在视频播放器下方显示控制条，其中包含了进度条。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值