JS 原生video元素去掉下载按钮

最新推荐文章于 2024-08-22 18:29:18 发布
最新推荐文章于 2024-08-22 18:29:18 发布
阅读量9.5k 收藏 4
点赞数
分类专栏： 新博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cy_baicai/article/details/79172468
版权
本文介绍了如何使用HTML5的video元素，并提供两种方法来隐藏视频控制栏中的下载按钮。一种是通过CSS，利用`::-webkit-media-controls-enclosure`和`::-webkit-media-controls-panel`选择器来隐藏，另一种更简单的方式是使用`controlslist`属性，设置`nodownload`以移除下载按钮。
摘要由CSDN通过智能技术生成

<audio src="xxx.mp4" controls="controls"></audio>

通常我们都是这样写一个video元素， 这样写的 会在浏览器下显示视频的控制栏出来，加入我们不需要控制栏的下载按钮怎么办？ 
看到有人说用css 方式可以:

最低0.47元/天 解锁文章
cy_baicai
关注
专栏目录
html5 video 隐藏全屏按钮,如何隐藏HTML5视频标签的全屏按钮?
weixin_31524201的博客
06-03 2393
35I think you can accomplish this by changing the css for the #document fragments, these are DOM1 specs and supported by all browsers, but about the styling, I'm not sure.我认为您可以通过更改#document fragment的...
如何隐藏 video 元素的下载按钮
weixin_30664051的博客
01-16 795
1. 使用video元素的ControlList API <video controls controlsList="nodownload"></video> 通过 ControList API，不仅可以通过设置nodownload来隐藏下载按钮，还可以设置nofullscreen隐藏全屏按钮, 以及noremoteplayback等属性，具体...
如何通过 JavaScript 实现点击按钮下载
最新发布
narukeu的博客
08-22 548
在现代 Web 开发中，有时我们需要提供用户点击按钮直接下载文件的功能，而不是简单地让浏览器直接访问链接。这种方式更加直观且用户体验更好，因为它避免了用户在新标签页或当前页面中打开文件的麻烦。
js实现页面视频video标签禁止下载（下载按钮+右击菜单）
Dreamingnini的博客
12-08 1767
项目需求：禁止用户浏览页面的时候下载页面的视频 解决： 网页上下载视频的方法有两种 1、视频自带的下载按钮 2、右击页面出现菜单中的“另存为”
h5 video隐藏下载按钮
weixin_33737134的博客
01-22 646
今天在做h5的视频播放，但是不需要下载按钮： 一般浏览器不会出现下载按钮，，只有谷歌浏览器会（低版本的右下角没有下载按钮，比如53.0版本，我的谷歌浏览器是53.0版本) 。用同事电脑上的58.0版本测试有下载按钮 如果你的谷歌浏览器版本是54.0-57.0之间，并且也出现了视频右下角有按钮的情况都可以使用下面的代码。 解决方法：代码如下： video::-internal-med...
使用 CSS 和 WebKit 属性设置 HTML5 `＜audio＞` 标签的样式
我的博客，不一样的自我表达
08-05 3291
虽然标签本身不提供特定的 WebKit 样式属性，但您可以利用标准 CSS 以及特定于 WebKit 的属性来自定义音频播放器的外观，以符合您的设计美学。总之，虽然 HTML5标签不提供专用的 WebKit 样式属性，但您可以使用标准 CSS 以及各种特定于 WebKit 的选择器为音频播放器实现自定义且精美的外观。尝试不同的样式和属性来创建与您的网站设计无缝集成的音频播放器。-webkit-media-controls-volume-slider-container：设置音量滑块容器的样式。
HTML页面原生VIDEO标签隐藏下载按钮功能
09-28
接着，通过`video::-webkit-media-controls-enclosure`选择器调整媒体控制面板的容器，隐藏超出其边界的元素（即被移除的下载按钮）。最后，`video::-webkit-media-controls-panel`选择器扩大了媒体控制面板的宽度，...
video.js实现鼠标移入播放鼠标移出暂停
12-31
在本文中，我们将深入探讨如何使用video.js库来实现一个功能，即当鼠标移入视频时自动播放，而当鼠标移出视频时则暂停播放。video.js是一个强大的HTML5视频播放器，它提供了丰富的自定义选项和良好的浏览器兼容性，...
video组件——禁用下载功能——基础积累
yehaocheng520的博客
08-29 5435
video组件——禁用下载功能——基础积累
video 视频下载，调用浏览器的下载进度方法
jinse29的博客
03-23 2733
简单介绍下需求，跟上次的帖子一样，需要重写video标签的进度栏的样式，当然也包括重写下载方法，调用原生video标签下载视频的时候，浏览器会弹出下载进度条。其实下载常用的可能利用a标签，创建一个请求就可以实现下载，但是这种下载方法死活出不来进度，可能方法使用的不对，如有好的方法可以提示我~展示下自定义下载方法后的效果，点击黄色下载按钮后浏览器的展示效果，除了重新自定义了视频的名称，效果跟原生的下载效果一致。下图为调用原生时候，浏览器的下载进度提示。谷歌可能再底部出现，展示用的是Edge浏览器。
自定义audio（react）
MYG_G
09-16 1974
H5的audio默认的样式可以满足我们录音播放停止等功能，提供的部分固定样式可以修改，如下： audio::-webkit-media-controls-panel audio::-webkit-media-controls-mute-button audio::-webkit-media-controls-play-button audio::-webkit-media-controls-timeline-container audio::-webkit-media-controls-current-t
video视频标签隐藏下载功能，禁止右键另存为视频的操作
Mr_wangxiansheng的博客
06-16 1987
video视频标签隐藏下载功能，禁止右键另存为视频的操作
去掉video controls的下载按钮方法
肖明伟 的博客
08-22 1万+
一般浏览器不会出现下载按钮，，只有谷歌浏览器会（低版本的右下角没有下载按钮，比如53.0版本，我的谷歌浏览器是53.0版本) 。用同事电脑上的58.0版本测试有下载按钮 　　　如果你的谷歌浏览器版本是54.0-57.0之间，并且也出现了视频右下角有按钮的情况都可以使用下面的代码。 解决方法：代码如下： video::-internal-media-controls-downloa
html5 video标签如何禁止视频下载
weixin_34418883的博客
06-25 1万+
html5 video标签如何禁止视频下载 一、总结 一句话总结：bing方法给video对象绑定return false的匿名方法。   1、html5 video标签如何禁止视频下载？ bing方法给video对象绑定return false的匿名方法。 这样的效果是禁止鼠标右键的另存为功能。 23 $('#video1').bind('contextmenu',function...
防止视频资源被下载
热门推荐
永不停歇
10-26 1万+
就 PHP语言来处理： 一、将视频资源传到 置顶服务器   例如实际目录   http://xxx.com/videoData/xxx.mp4 二、html中通过 embed video   来引入  资源地址  ： http://xxx.com/videoData/xxx.mp4   即可实现播放； 注：但是这样  资源地址就被很容易的获取到，而且可以下载到资源
video去除下载按钮
yijie_0_的博客
06-14 508
video去除下载按钮
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值