CSS隐藏video标签中各种控件

最新推荐文章于 2024-06-21 15:14:18 发布
最新推荐文章于 2024-06-21 15:14:18 发布
阅读量423 收藏
点赞数 2
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39951524/article/details/136911460
版权
本文介绍了如何在HTML5的
摘要由CSDN通过智能技术生成

1.edio标签加上controls会出现视频控件，如播放按钮、进度条、全屏、观看的当前时间、剩余时间、音量按钮、音量的控制条等等

<video type="video/mp4" src="" 
	   autoplay="" style="width: 400px; height: 300px;" id="e_video" preload="metadata">    
</video>

2. 可以通过下方伪类元素选择器来实现隐藏vedio标签的各种控件。

在这里插入图片描述

3、若想全部隐藏,去掉 controls 属性 即可。

曦月合一
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
如何隐藏原生html5 video,HTML5video//完全隐藏控件
weixin_30550985的博客
06-03 1543
喜欢这个：controls是一个布尔属性 ：注意：布尔属性不允许使用“true”和“false”值。 为了表示一个错误的值，该属性必须被完全省略。您可以使用CSS伪select器来隐藏控件，如Demo： https ： //jsfiddle.net/g1rsasa3//For Firefox we have to handle it in JavaScript var vids = $("vide...
CSS video控件去掉视频播放条
蓝胖子的博客
12-08 1017
CSS video控件去掉视频播放条
uniapp video视频铺满容器，不显示控件
MarchS的博客
05-31 3262
1、video标签的属性 参考video | uni-app官网 enable-progress-gesture：是否开启控制进度的手势，bool值 show-center-play-btn：是否显示视频中间的播放按钮，bool值 object-fit：当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖 show-center-play-btn：是否显示视频中间的播放按钮，bool值 <video :enable-prog.
移动端video标签使用出现点击视频controls控件不展示
weixin_39065287的博客
04-25 3018
移动端video标签使用出现点击视频controls控件不展示 这个问题一般是因为video移动端尺寸变化导致 解决方法： 可以在video标签外层加个div，添加一个点击事件，将controls赋值为true <div class="video-wrap" v-show="isVideoShow" @click="handlePlayClick()"> <video class="videocss" ref="videoCon" :src="videoUrl"></vi
video怎么去掉控件
weixin_70245286的博客
08-23 886
video怎么去掉控件
video 自定义视频播放控件的显示和隐藏
细节怪的博客
02-24 4670
自定义视频播放控件的显示和隐藏，以及显示隐藏的过渡效果
videoControle:Video Controle是使用HTML，CSS和JS开发的，目的是演示我对Js的学习，并使用一些视频控件进行个性化设置
05-01
视讯控制视讯控制Video Controle是使用HTML，CSS和JS开发的，目的是通过使用一些视频控件对Js进行个性化来展示我对Js的学习。 请参阅下面的链接中的项目。安装使用git clone 克隆此存储库，或单击“代码/下载ZIP”。...
HTML页面常用标签 css页面常用样式 .docx
08-24
5. `<video>` 标签用于嵌入视频，`controls` 属性添加播放控件，`<source>` 标签定义媒体源。 6. `<div>` 标签是一个通用容器，用于分隔或组织页面内容，可以通过CSS来设置样式。 7. `<span>` 标签用于组合行内元素...
基于video标签的HTML5视频播放器.rar
07-10
基于video标签的HTML5视频播放器,你可学习一下HTML5中的Video标签用法，用它来创建支持视频播放的网页播放器非常便捷的。
videojs-abloop:一个video.js插件，用于通过GUI和API控件循环播放一段视频
05-12
link href =" https://vjs.zencdn.net/5.6.0/video-js.css " rel =" stylesheet " /> < script src =" https://unpkg.com/videojs-abloop/dist/videojs-abloop.min.js " > </ script > </ ...
前端HTML5 css基础
03-09
* `<video>`：视频标签，播放视频。 * 属性： + `src`：视频路径，必须属性。 + `controls`：显示音频控件，部分浏览器不支持。 + `autoplay`：视频加载完后自动播放，部分浏览器不支持。 + `loop`：视频结束时...
如何隐藏video视频播放控件？
热门推荐
王海虎的博客
04-26 2万+
&lt;!--用css隐藏video视频播放控件--&gt;&lt;style type="text/css"&gt;     video::-webkit-media-controls{         display:none !important;     } &lt;/style&gt;&lt;!--用js隐藏video视频播放控件--&gt;&lt;script type="text/j...
video标签隐藏对应元素
paopao180的博客
09-16 1117
video标签的controls属性添加时，会出现时间轴，播放时间，总时间，音量调节，全屏等控件元素。有时候只想保留其中一种或几种，对应的css如下 // 隐藏video 音量按钮 video::-webkit-media-controls-mute-button { display: none !important; } // 隐藏video 当前按钮 video::-webkit-media-controls-current-time-display { display: none !i
video标签隐藏全屏按钮
qq_42294411的博客
03-07 6063
video标签默认是不显示控制条的，在video标签添加controls可显示视频播放器的控制条,包含视频的播放控制按钮、进度条、全屏按钮等。 css隐藏按钮 //全屏按钮 video::-webkit-media-controls-fullscreen-button { display: none; } //播放按钮 video::-webkit-media-controls-play-button { display: none; } //进度条 video::-webkit-media-contro
HTML5 video标签问题及去除黑边
往事随风
03-09 1万+
最近接到新需求 需要在在页面上展示一些视频，因此进行了汇总 先说说video的一些基本属性 autoplay 视频在就绪后自动播放。 controls 显示控件，比如播放按钮。 height 设置视频播放器的高度。 width 设置视频播放器的宽度。 loop 循环播放 muted 视频的音频输出静音。 poster 视频加载时显示的图像，或者在用户点击播放按钮前显示的图像。 src 要播放的视频路径。 属性完了看代码和效果 <video autoplay=
video标签隐藏底部进度条等内容
一个超爱喝可乐的web前端攻城狮
05-10 6327
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视频去除黑边
3木子熙H
12-29 8911
css使用video时，总是出现黑边的问题解决方法： <div class="artitle_media"> <video src="../img/myName.mp4" controls autoplay loop></video> </div> 样式部分： .artitle_media{ text-align: center; ...
日常工作记录目录
最新发布
与海
06-21 221
EasyExcel实现二维码下载与展示
video标签的进度条怎么不让他拉动
08-05
要禁用 HTML `<video>` 标签的进度条的拖动功能，你可以使用 JavaScript 来实现。以下是一种常见的方法： 首先，给你的 `<video>` 标签添加一个 `onmousedown`事件监听器，当用户按下鼠标按钮时触发该事件。在该事件处理程序中，你可以检查鼠标按钮是否为主按钮（通常是左键），并根据需要阻止默认行为。 HTML: ```html<video id="myVideo" src="video.mp4"></video> ``` JavaScript: ```javascriptconst video = document.getElementById("myVideo"); video.onmousedown = function(event) { // 阻止默认行为只有在按下主按钮时才执行 if (event.button ===0) { event.preventDefault(); } }; ``` 这段代码将阻止用户通过拖动进度条来更改视频播放的位置。请注意，这只会禁用拖动进度条，用户仍然可以通过其他方式（例如键盘快捷键）更改视频的播放位置。 注意：这种方法仅适用于阻止用户通过拖动进度条来更改视频播放的位置，并不能完全禁用进度条。如果你想完全隐藏进度条，可能需要使用其他方法，例如使用自定义控件或样式来模拟一个进度条。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

曦月合一

你的鼓励是我们前进的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值