在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题。

虽然简介视频是非付费的,但也不希望会有下载按钮或者可以视频另存为,所以找到一个可以看上去没有下载功能的方法,做一下笔记。

想要隐藏以上下载按钮,三个样式就可以了,不废话直接贴代码:

video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 50px);
}

说白了就是把下载按钮移动到视窗外面,但是这些CSS找了好久啊!!

这种方法并不能真正阻止视频的下载,“有心”的用户还是可以在缓存文件里找到加载过的视频文件的,所以就像标题写的一样,只是隐藏。

真正的阻止视频的下载还是需要通过服务器端对视频地址进行加密验证。

嗯,以上。

html页面原生video标签隐藏下载按钮的更多相关文章

  1. 隐藏video标签的下载按钮

    问题: 使用video标签时,有些浏览器会显示视频的下载按钮,而这并不是我们需要的功能,必须想办法去掉. 解决方法: 使用下面的css可以达到隐藏下载按钮的效果,但是点击下载的位置,还是能出现开始下载 ...

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

    1. 使用 video 元素的 ControlList API <video controls controlsList="nodownload"></video ...

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

    Chrome浏览器在升级之后 video的样式和之前是不一样的,如果使用原生video的话可能会有影响,实际项目中最好使用第三方插件以保证video在所有浏览器都有统一的样式 一.如何隐藏video的 ...

  4. 谷歌浏览器:audio如何隐藏下载按钮

    当我们使用原生的audio标签时,可以看到如下的效果. 那么如何让下载按钮隐藏掉呢? 1. controlsList="nodownload" // 这个方法只支持 Chrome ...

  5. audio隐藏下载按钮

    // 这个方法只支持 Chrome 58+, 低于该版本的是没有无法隐藏的 <audio src="/i/horse.ogg" controls="controls ...

  6. 干掉H5audio音频标签的下载按钮

    audio::-internal-media-controls-download-button {display:none;}audio::-webkit-media-controls {overfl ...

  7. 去掉谷歌浏览器 video标签下的下载按钮

    一.判断浏览器版本(区分谷歌和360浏览器) function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字 ...

  8. 关于移动端video标签层级问题

    这是在微信中正常页面,就是用了一个原生video标签没做任何处理.然后顶部是固定页面顶端的,这个时候向上滑动页面时,会出现下图现象 这个时候正常人都会想到z-index问题,我也是这样想的,可惜很抱歉 ...

  9. 大事记 - 安卓微信浏览器 video 标签层级过高

    // 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. ...

随机推荐

  1. 支付-stripe

    国外三大支付paypal,braintree,stripe,有兴趣可以去了解一下他们的区别. 支付宝和paypal基本只需要发送charge信息请求交给后端做就ok了,那么stripe前端也只需要收集 ...

  2. 阿里云 RDS for MySQL支持什么引擎

    问题:我们的服务器是买的是阿里云,mysql版本5.011 ,本地和服务器配置一样,在本地可以安装discuzX3.4,但是在服务器上却报错了,如下图: 找了半天,才知道阿里云RDS 支持的mysql ...

  3. springcloud-feign组件实现声明式的调用

    11.使用feign实现声明式的调用 使用RestTemplate+ribbon已经可以完成对服务端负载均衡的调用,为什么还要使用feign? @RequestMapping("/hi&qu ...

  4. kafka 心跳和 reblance

    kafka 的心跳是 kafka consumer 和 broker 之间的健康检查,只有当 broker coordinator 正常时,consumer 才会发送心跳. consumer 和 re ...

  5. 解决libVLC无法响应鼠标消息

    参考: https://blog.jianchihu.net/player-based-on-libvlc.html 自己在Qt上的实现: 头文件 libvlc_instance_t * m_inst ...

  6. 找几张图片制作GIF

    1.打开Python,输入代码 import PIL.Image as Image #套用PIL函数 def get_gif(pics_dir,n,t): imgs = [] for i in ran ...

  7. Python_Mix*异常处理

    name 结果为: Traceback (most recent call last): #错误的追溯 File "C:/Users/Mi/PycharmProjects/untitled/ ...

  8. Loadrunner录制https脚本

        随着公司的发展,公司原有的SVN服务器存放的内容不断增加,容量已经不能满足后续需求,首先我们想到对服务器进行扩容,然而因为各种原因服务器不能进行扩容,所以公司决定更换新的SVN服务器,在做数据 ...

  9. 二、linux的安装

    1. 虚拟机安装: 1.1. 什么是虚拟机 虚拟机:一台虚拟的电脑. 虚拟机软件: * VmWare :收费的. * VirtualBox :免费的. 1.2. 安装VmWare 参考<虚拟软件 ...

  10. Lambda为什么又称为匿名函数

    用法: 有的类,里面只有一个方法,几行代码,只使用一次,以后再不会用到这个类,那就不值当的单独创建一个类,此时使用匿名内部类 一.传统方式 1.接口 2.接口实现类 创建一个类,这个类可能被多次使用, ...