在写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. Linux之redis-cluster(集群配置)

    redis-cluster配置   为什么要用redis-cluster 1.并发问题 redis官方声称可以达到 10万/每秒,每秒执行10万条命令假如业务需要每秒100万的命令执行呢? 2.数据量 ...

  2. C# 结构与类的区别

    一.定义方式 定义结构: struct PointStruct //默认的访问权限是 public { public int X { get; set; } public int Y { get; s ...

  3. jQuery和Vue的区别

    1.jQuery和Vue的区别 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取值.事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起 ...

  4. PROJ.4学习——坐标系转换

    PROJ.4学习——坐标系转换 前言 PROJ可以做任从最简单的投影到许多参考数据非常复杂的转换.PROJ最初是作为地图投影工具开发的,但随着时间的推移,它已经发展成为一个强大的通用坐标转换引擎,可以 ...

  5. springboot based 主从数据源中间件方案

    先定几个原则/目标: 原则: 1.必须保证数据逻辑的一致性: 反例:刚写了数据,(因为主从延迟)查询不到: 2.对开发人员透明,对业务代码无侵入性:与单数据源的业务代码调用一致: 反例:对已有业务代码 ...

  6. AI 帮助涂鸦

    这个小工具挺有意思,可以在涂鸦的同时自动猜测你要画什么,并自动完成. https://quickdraw.withgoogle.com/

  7. 配置合适的Visual Studio 2017 开发环境(其它版本的也适用)

    1.VS 安装完成后,可以重新配置合适的开发环境 第一步: 第二步: 第三步: 第四步:选择合适自己的开发环境 这里我选择常规,具体的可以看窗口右边的说明

  8. history program(language)

    1950与1960年代 有三个现代编程语言于1950年代被设计出来,这三者所衍生的语言直到今日仍旧广泛地被采用: Fortran (1955),名称取自"FORmula TRANslator ...

  9. shell脚本实现git和svn统计log代码行

    实现的功能 git 根据传入的三个参数:起始统计日期.结束统计日期.git仓库地址. 脚本统计的是git仓库内的所有分支的log信息. 脚本统计的是指定时间段内.每一个提交人指定的git地址的所有分支 ...

  10. numpy中的stack操作:hstack()、vstack()、stack()、dstack()、vsplit()、concatenate()

    stack():沿着新的轴加入一系列数组. vstack():堆栈数组垂直顺序(行) hstack():堆栈数组水平顺序(列). dstack():堆栈数组按顺序深入(沿第三维). concatena ...