video标签隐藏下载按钮

最新推荐文章于 2024-10-14 14:05:20 发布

原创最新推荐文章于 2024-10-14 14:05:20 发布 · 5.7k 阅读

2 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何通过CSS和HTML属性禁用Chrome浏览器中HTML5视频的下载按钮，包括隐藏下载按钮及阻止右键菜单中的保存选项。

国内网上找到比较多的解决方法是：

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

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

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

还有一种方法

<video controls controlsList="nodownload" src="video.mp4"></video>

参考来源

https://stackoverflow.com/questions/41115801/in-chrome-55-prevent-showing-download-button-for-html-5-video

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

peade

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS 控制 video 标签的控制栏组件的显隐

UserGuan的博客

02-05

2245

当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要展示，只需在 css 中设置相关属性把它隐藏掉即可。

H5：安卓端video不显示下载按钮

mosowe

09-02

2019

<video :poster="poster" :src="url" autoplay x5-video-player-type="h5" x5-video-player-fullscreen="false" playsinline="true" webkit-playsinline="true" controlsList="nodownload" controls&gt...

参与评论您还未登录，请先登录后发表或查看评论

如何隐藏 video 元素的下载按钮

weixin_30664051的博客

01-16

908

1. 使用video元素的ControlList API <video controls controlsList="nodownload"></video> 通过 ControList API，不仅可以通过设置nodownload来隐藏下载按钮，还可以设置nofullscreen隐藏全屏按钮, 以及noremoteplayback等属性，具体...

HTML页面原生VIDEO标签隐藏下载按钮功能

09-28

主要介绍了HTML页面原生VIDEO标签隐藏下载按钮功能，非常不错，具有参考借鉴价值，需要的朋友参考下吧

video视频播放器下载按钮隐藏

sinat_38992528的博客

08-23

668

打开你的视频内容页的模板文件，找到播放器代码 video，参考下图在video元素里加上两个属性。如果你想完全杜绝浏览器下载视频，接下来我们会提供一篇教程，已达到视频播放地址加密，防止被盗。如果你的视频播放器有类似上图的情况，按照以下教程新增代码，即可达到禁用视频右击、下载功能。声明：此方法并不能对市面上全部浏览器生效，比如：QQ浏览器暂时无法隐藏下载功能。oncontextmenu='return false' 禁止右击。controlslist='nodownload' 禁止下载。

webview的video 标签隐藏下载

热门推荐

曹焱的博客

03-25

1万+

<video ref="video" playsinline="true" x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" x5-video-player-ty...

隐藏video下载按钮

oneyJiang

07-16

2679

现在网页中涉及到视频时我们一般会选择用h5新增的video标签，神烦的是系统会自动给video标签加上一些我们不需要的按钮，比如下载按钮。在很多情况下，点击下载按钮网页会直接崩溃掉，所以提供下隐藏下载按钮的方法 1. css方式这种方式有个弊端，视频宽度不同时控制器加减的尺寸也不同，要具体调节，还有就是播放图标会向右偏移。页面不美观 video{ width:...

js实现页面视频video标签禁止下载（下载按钮+右击菜单）

Dreamingnini的博客

12-08

2518

项目需求：禁止用户浏览页面的时候下载页面的视频解决：网页上下载视频的方法有两种 1、视频自带的下载按钮 2、右击页面出现菜单中的“另存为”

video标签隐藏全屏和下载按钮

(ง •_•)ง

12-24

2101

nofullscreen隐藏全屏按钮，nodownload隐藏下载按钮，可单独使用也可以一起使用。 <video width="600" height="400" controls controlsList='nofullscreen nodownload' > <source src="mp4/01.mp4" type="video/mp4"> </video...

Chrome浏览器video样式控制-隐藏下载按钮

weixin_30695195的博客

07-04

518

Chrome浏览器在升级之后 video的样式和之前是不一样的，如果使用原生video的话可能会有影响，实际项目中最好使用第三方插件以保证video在所有浏览器都有统一的样式一、如何隐藏video的下载按钮　　1. 在Chrome58以上的版本中使用 video元素的controlsList API:https://googlechrome.github.io/samples/med...

video 标签设置样式

zyf13671493506的博客

10-17

5405

设置video标签的默认样式在这里插入图片描述 //全屏按钮 video::-webkit-media-controls-fullscreen-button { // display: none; } //播放按钮 video::-webkit-media-controls-play-button { } //进度条 ...

video视频标签隐藏下载功能，禁止右键另存为视频的操作

Mr_wangxiansheng的博客

06-16

2233

video视频标签隐藏下载功能，禁止右键另存为视频的操作

禁用video标签下载按钮

Cembseven的博客

09-12

1479

<video width="300" height="190" poster="images/video_poster.png" controls controlsList='nodownload noremote footbar'>

video标签的属性、播放按钮+右侧三个点儿等播放控件样式的隐藏、禁止点击右键行为

weixin_69924839的博客

10-14

3146

src ：视频路径 autoplay：自动播放 muted：视频静音播放.......

html5 隐藏video控件的下载按钮

前进者

03-16

4711

最近在开发项目的时候，为了保证用户上传的视频资源不被其他用户下载，网页使用了html5的video标签进行视频播放所以需要禁止video标签自带的下载功能。方法一：给video对象绑定return false 该代码确实可以屏蔽掉右键另存， $('#video1').bind('contextmenu',function() { return false; }); 方法二：添加下面的样...