去掉video 自带的下载

最新推荐文章于 2023-03-23 10:59:18 发布
最新推荐文章于 2023-03-23 10:59:18 发布
阅读量867 收藏
点赞数
分类专栏： 前端常用文件 文章标签： jquery javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48791929/article/details/106856312
版权
本文介绍了如何通过CSS和jQuery来防止HTML5 video元素自带的下载选项。通过添加`controlsList="nodownload"`属性到video标签，可以移除默认的下载按钮。同时，使用jQuery绑定事件来阻止右键点击下载的操作。
摘要由CSDN通过智能技术生成

去掉video 自带的下载属性

css

video::-internal-media-controls-download-button {
   
    display:none;
}

video::-webkit-media-controls-enclosure {
   
    overflow:hidden;
}

video::-webkit-media-controls-panel {
   
    width: calc(100% &#
最低0.47元/天 解锁文章
weixin_48791929
关注
专栏目录
JS 原生video元素去掉下载按钮
cy_baicai的博客
01-26 9583
audio src="xxx.mp4" controls="controls">audio> 通常我们都是这样写一个video元素， 这样写的 会在浏览器下显示视频的控制栏出来，加入我们不需要控制栏的下载按钮怎么办？  看到有人说用css 方式可以: video::-webkit-media-controls-enclosure {overflow:hidden;}video::
去掉video标签自带的下载按钮
weixin_30591551的博客
08-18 899
video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden; } video::-webkit-media-controls-panel { width: calc(100%...
video去除下载按钮
yijie_0_的博客
06-14 515
video去除下载按钮
video标签去除下载按钮
樊小书生
10-29 1万+
HTML中直接使用video来播放视频，在Chrome浏览器、360浏览器、QQ浏览器（以及其他一些使用Chrome内核Blink）等中都会出现下载按钮，但我们一般又不希望出现下载按钮。 好像是从Chrome 54版本开发有下载按钮的（从网上看到的，我也不确定），网上有css解决方案，如下： video::-internal-media-controls-download-button { ...
删除video全屏和下载按钮
Geek-Haoyu
12-15 445
如何删除video全屏和下载按钮
h5的video下载按钮如何隐藏
u011927449的博客
07-26 793
h5的video下载按钮在部分手机系统上是不可用的，想要把这个按钮屏蔽掉，可苦于没有像屏蔽全屏按钮那样的伪类video::-webkit-media-controls-fullscreen-button {display: none;} 只好找了一种比较搓的方法： video::-webkit-media-controls-enclosure { overflow:hidden;}video::-webkit-media-controls-panel { width: calc(100% + ...
去掉video组件自带的loading
09-26
1. **CSS覆盖**：你可以通过设置`<video>`元素的相关CSS属性，如`display`、`opacity`等，隐藏或修改默认的加载指示符。例如： ```css video::-webkit-loading-container { display: none; /* 针对Webkit内核...
如何用css去掉video组件自带的loading
最新发布
09-26
要在CSS中去掉HTML `<video>` 元素自带的加载进度条（通常表现为一个小圆圈或进度条），你可以通过设置`::-webkit-media-loading`伪元素的样式为`hidden`或者直接隐藏整个视频区域直到视频完成加载。以下是两种方法...
css video 样式,使用CSS修改 video 标签默认样式
weixin_36352432的博客
08-03 6690
使用CSS修改 video 标签默认样式时间：2019-11-08 17:42:14来源：作者：效果展示：1、模拟直播，去除进度条、当前观看时间，剩余时间。效果：2、去除 video 标签全部控件效果：Tags：CSS点击:()评论:()声明：本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系，我们将及时更正、删除...
Html5页面video标签禁用下载视频
liyuan_yoao的博客
10-12 2976
H5页面禁止视频下载
去掉h5 voide标签中的下载按钮
猴霸天下
05-04 4974
video::-internal-media-controls-download-button {     display:none; } video::-webkit-media-controls-enclosure {     overflow:hidden; } video::-webkit-media-controls-panel {     width: c
video 视频下载，调用浏览器的下载进度方法
jinse29的博客
03-23 2758
简单介绍下需求，跟上次的帖子一样，需要重写video标签的进度栏的样式，当然也包括重写下载方法，调用原生video标签下载视频的时候，浏览器会弹出下载进度条。其实下载常用的可能利用a标签，创建一个请求就可以实现下载，但是这种下载方法死活出不来进度，可能方法使用的不对，如有好的方法可以提示我~展示下自定义下载方法后的效果，点击黄色下载按钮后浏览器的展示效果，除了重新自定义了视频的名称，效果跟原生的下载效果一致。下图为调用原生时候，浏览器的下载进度提示。谷歌可能再底部出现，展示用的是Edge浏览器。
关于HTML5 video标签的视频不能自动播放和去掉下载选项的问题
热门推荐
kirinlau的专栏
12-25 2万+
项目demo中有遇到页面需要开场视频动画，需要点击才能进入主页，不考虑兼容性，自然想起的事html5的video标签可以播放视频，于是使用以下方法： &amp;amp;amp;amp;amp;lt;video width=&amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;quot; autoplay=&amp;a
chrome浏览器去掉HTML5 video下载按钮
songshu92的博客
08-02 1万+
一般浏览器不会出现下载按钮，只有谷歌浏览器会（低版本的右下角没有下载按钮，比如53.0版本) 。 　　如果你的谷歌浏览器版本是54.0-57.0之间，并且也出现了视频右下角有按钮的情况都可以使用下面的代码。 解决方法： video::-internal-media-controls-download-button { display:none; } video::-webkit-med
html5视频播放,实现防止下载（一）
专注于java，站在巨人头顶看世界
08-18 1万+
一、html5视频播放 <video id="my-video" class="video-js vjs-default-skin vjs-big-play-button vjs-big-play-centered" controls preload="auto" poster=""> <source :src="mp4VideoUrl" type="video/mp4"> <source :src="m3u8VideoUrl" typ
html5 隐藏video控件的下载按钮
Destiny的博客
04-06 8987
大家在写html video控件播放视频功能的时候，总是遇到既要显示播放按钮 又不想出现下载按钮controls 是video里面的属性 但是他不能满足上面的要求 因为加上这个属性后 全部的按钮都去掉了，包括了播放按钮。其实要做到这种效果也是很简单的只要加上一些style样式就可以了：&lt;style type="text/css"&gt; video::-webkit-media-co...
html中如何移除video下载按钮
weixin_30352645的博客
09-03 456
我发现部分安卓手机使用video标签播放视频的时候会自带一个下载按钮，一般产品大多都不需要这一功能，那如何屏蔽下载按钮呢？有下面两种，请一定使用第一种方式，使用css控制会有兼容性问题，建议不要使用这种方案。 第一种方式，通过原生方式nodownload in controlsList 控制button显示，audio标签也适用 <video width="400" height=...
HTMl5之video标签禁止下载（隐藏下载按钮）
小乔流水仁家的博客
04-14 3529
<video controls controlslist="nodownload"> <source src="a.mp4" type="video/mp4"> <source src="a.mp4" type="video/ogg"> nonsupport video </video>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值