原生video标签去掉右下方下载按钮

最新推荐文章于 2024-08-23 15:10:02 发布
最新推荐文章于 2024-08-23 15:10:02 发布
阅读量3.5k 收藏
点赞数
分类专栏： 解决方案 文章标签： 去掉下载按钮 video标签 video下载按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37805167/article/details/78028436
版权

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

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

video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}

我叫陈小皮。
关注
专栏目录
【Python】高效的Web自动化测试利器—Python+Playwright快速上手自动化实战指南
墩墩分墩
08-16 1464
**Playwright是微软在` 2020 年初 `开源自动化测试工具，功能和 selenium 类似，都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器，如Chrome、Firefox、Safari 等，同时支持以**无头模式、有头模式**运行，并提供了**同步、异步的 API**，可以结合 `主流测试框架`使用，并且支持浏览器端的自动化脚本录制等功能。 **特点：** - 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox； - 跨
win10 nas搭建_零成本搭建一个私人影视库，没有NAS一样可以把观影姿势做到完美...
热门推荐
weixin_39845221的博客
10-25 1万+
前言大家好，我是昭华凋，本篇文章想和大家探讨一下怎么零成本搭建一个私人影视库，怎么轻松惬意欣赏影视作品。说到搭建影视库估计大家第一个想法就是群晖，Video Station，NAS等等。不过呢这篇文章讨论的是零成本所以需要外购设备的一律不讨论。文章两个目的，界面美观使用简单。我个人很喜欢在电视端看电影电视，但又对在线视频不感冒，虽然我手里的视频网站很多，优酷，爱奇艺，腾讯我都开了会员但可能一年都看...
video组件——禁用下载功能——基础积累
yehaocheng520的博客
08-29 5435
video组件——禁用下载功能——基础积累
完美解决video标签控件的隐藏与使用
caoyan0829的博客
03-25 1万+
<video ref="video" playsinline="true" x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" x5-video-player-ty...
原生video 禁用鼠标右键另存为 及 下载
weixin_50559423的博客
08-14 83
再次如果不想要下载功能（需求：因为src视频流 只支持播放，不支持下载。另外去做下载功能），废话不多说直接上代码。当然页面中也可以右键‘另存为’ 也需要做处理，使用oncontextmenu事件，禁用鼠标右键的菜单。原生的video标签添加了controls属性后，工具控制栏 …onselectstart事件，禁止利用右键在网页上选取内容；此外，针对需要还可以对video标签的其他按钮进行隐藏。也可以添加其他属性 鼠标右键 另存为禁用等。oncopy事件，禁止利用右键进行复制。
如何隐藏 video 元素的下载按钮
weixin_30664051的博客
01-16 795
1. 使用video元素的ControlList API <video controls controlsList="nodownload"></video> 通过 ControList API，不仅可以通过设置nodownload来隐藏下载按钮，还可以设置nofullscreen隐藏全屏按钮, 以及noremoteplayback等属性，具体...
video标签去除下载按钮
樊小书生
10-29 1万+
HTML中直接使用video来播放视频，在Chrome浏览器、360浏览器、QQ浏览器（以及其他一些使用Chrome内核Blink）等中都会出现下载按钮，但我们一般又不希望出现下载按钮。 好像是从Chrome 54版本开发有下载按钮的（从网上看到的，我也不确定），网上有css解决方案，如下： video::-internal-media-controls-download-button { ...
去掉video标签自带的下载按钮
weixin_30591551的博客
08-18 895
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 508
video去除下载按钮
自学uni-app （3）uni-app的常用组件
Slow down your pace
08-06 2565
uni-app可用于跨平台，支持app平台、h5平台、小程序平台 一次编写，多平台生成
HTML+CSS----------HTML5+CSS3
qq_31913969的博客
09-04 992
html回忆录 1、网页的组成：图片、文字、超链接、视频、音频等 2、网页中web标准三层组成:结构(html)、表现(css)、行为(JS). 3、Chrome浏览器的内核：Blink；苹果内核：webkit; 4、HTML是超文本标记语言，是描述网页的一种语言，是一种标记，不是一种语言，是一套标记标签。 5、超文本指的是超越文本的限制，超级文本链接 6、内核渲染HTML和CSS 7、 8、 ...
HTML和CSS——中国大学mooc上web开发笔记
new_start_2018的博客
02-04 1140
文章目录HTML一、基本语法结构及标签 HTML 一、基本语法结构及标签 类似于脚本的开始标签!DOCTYPE html；整个文件结构在html标签内，html又分为head标签和body标签部分； head标签内： title标签，网页显示时的标签； meta标签，设定元属性，主要charset=“UTF-8”； link标签文件外引入css文件，主要有ref、href和type三个属性要设...
html中如何移除video下载按钮
weixin_30352645的博客
09-03 448
我发现部分安卓手机使用video标签播放视频的时候会自带一个下载按钮，一般产品大多都不需要这一功能，那如何屏蔽下载按钮呢？有下面两种，请一定使用第一种方式，使用css控制会有兼容性问题，建议不要使用这种方案。 第一种方式，通过原生方式nodownload in controlsList 控制button显示，audio标签也适用 <video width="400" height=...
js实现页面视频video标签禁止下载（下载按钮+右击菜单）
Dreamingnini的博客
12-08 1767
项目需求：禁止用户浏览页面的时候下载页面的视频 解决： 网页上下载视频的方法有两种 1、视频自带的下载按钮 2、右击页面出现菜单中的“另存为”
隐藏video下载按钮
oneyJiang
07-16 2453
    现在网页中涉及到视频时我们一般会选择用h5新增的video标签，神烦的是系统会自动给video标签加上一些我们不需要的按钮，比如下载按钮。在很多情况下，点击下载按钮网页会直接崩溃掉，所以提供下隐藏下载按钮的方法   1. css方式 这种方式有个弊端，视频宽度不同时控制器加减的尺寸也不同，要具体调节，还有就是播放图标会向右偏移。页面不美观 video{ width:...
关于HTML5的audio标签和video标签删除下载图标
不二的博客
08-22 3463
video标签和audio标签在谷歌浏览器上自带下载按钮，当我们不想要下载按钮的时候，可以试一下以下操作 第一种方案： 在video或者audio标签上添加controlsList="nodownload"即可关闭下载按钮 &lt;!-- video--&gt; &lt;video src="videoUrl" controlsList="nodownload" controls="con...
新版chrome浏览器video播放去掉自带的“播放速度，下载”按钮，去掉右下角三个点
weixin_39725702的博客
10-23 3456
问： 新版chrome浏览器如何去掉video播放自带的“播放速度”按钮 答： 给video设置属性 controlsList=‘nodownload noplaybackrate’ <video controls src="1.mp4" controlsList="nodownload noplaybackrate"></video>
video视频播放器下载按钮隐藏
最新发布
sinat_38992528的博客
08-23 51
打开你的视频内容页的模板文件，找到播放器代码 video，参考下图在video元素里加上两个属性。如果你想完全杜绝浏览器下载视频，接下来我们会提供一篇教程，已达到视频播放地址加密，防止被盗。如果你的视频播放器有类似上图的情况，按照以下教程新增代码，即可达到禁用视频右击、下载功能。声明：此方法并不能对市面上全部浏览器生效，比如：QQ浏览器暂时无法隐藏下载功能。oncontextmenu='return false' 禁止右击。controlslist='nodownload' 禁止下载。
audio标签禁止下载功能
qq_45065090的博客
01-11 1535
audio标签禁止下载音乐
video-aplayer关闭按钮
08-11
对于video-aplayer的关闭按钮，可以通过以下方式实现监听事件： 在组件的mounted方法中，可以使用事件监听函数`myPlayer.on("close", function(){})`来监听关闭按钮的点击事件。当关闭按钮被点击时，回调函数中的代码将被执行。在这个回调函数中，可以编写相应的逻辑来处理点击关闭按钮的操作。 例如，可以在回调函数中添加代码来隐藏或移除video-aplayer组件，或者对关闭按钮进行特定的样式处理等。 需要注意的是，具体的实现方式可能会因为video-aplayer的版本和配置而有所不同，请根据具体的情况进行调整。 引用中的代码片段展示了一个video-aplayer组件的示例代码，其中包含了初始化视频播放器和相应的样式设置。根据这个示例代码，可以在其中添加关闭按钮的监听事件。 总结起来，为了实现video-aplayer的关闭按钮功能，可以在组件的mounted方法中使用`myPlayer.on("close", function(){})`来监听关闭按钮的点击事件，并在回调函数中编写相应的逻辑来处理关闭按钮的操作。123 #### 引用[.reference_title] - *1* *2* *3* [海创软件组-两周小结-video-vue-全屏-hover样式-css变量](https://blog.csdn.net/m0_46627730/article/details/105885722)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值