我发现部分安卓手机使用video标签播放视频的时候会自带一个下载按钮,一般产品大多都不需要这一功能,那如何屏蔽下载按钮呢?有下面两种,请一定使用第一种方式,使用css控制会有兼容性问题,建议不要使用这种方案。

第一种方式,通过原生方式 nodownload in controlsList 控制button显示,audio标签也适用

<video width="400" height="300" controls controlsList="nodownload">
<source data-src="test.ogg" type="video/mp4">
</video>

另一种方式通过css控制video标签的外观(坑一踩,有兼容问题,不要使用!!

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

html中如何移除video下载按钮的更多相关文章

  1. h5的video下载按钮如何隐藏

    h5的video下载按钮在部分手机系统上是不可用的,想要把这个按钮屏蔽掉,可苦于没有像屏蔽全屏按钮那样的伪类video::-webkit-media-controls-fullscreen-butto ...

  2. php中点击下载按钮后待下载文件被清空

    在php中设置了文件下载,下载按钮使用表单的方式来提交 <form method="post" class="form-inline" role=&quo ...

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

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

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

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

  5. html页面原生video标签隐藏下载按钮

    在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题. 虽然简介视频是非付费的,但也不希望会有下载按钮或者 ...

  6. 【HTML5】video 标签禁用自带的下载按钮

    h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 <style type="text/css"> video::-internal-me ...

  7. 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  8. 去掉video视频播放器下的下载按钮

    去掉video视频播放器下的下载按钮: video::-internal-media-controls-download-button { display:none; } video::-webkit ...

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

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

随机推荐

  1. org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): cn.gaiay.business.helper.dao.LiveRegenrationRecordMapper.insert

    原因分析: 字段名称.报名.类名 对应不上 ,比如colomn和property属性 反了.. 按以下步骤一一执行: 1:检查xml文件所在的package名称是否和interface对应的packa ...

  2. google学习

    https://developers.google.com/machine-learning/crash-course/ https://developers.google.com/machine-l ...

  3. SVN的正确提交方式

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Rundy_Deng/article/details/80338093 也会让我们百思不得其解,甚至耽 ...

  4. python的enumerate函数

    python的enumerate函数用于循环索引和元素 例如 foo = 'abc' for i , ch in enumerate(foo): print ch, '(%d)' % i 输出结果: ...

  5. .net core系列之《在.net core中使用MemoryCache实现本地缓存》

    说到内存缓存MemoryCache不由的让我想起.Net Framework中的MemoryCache,它位于 System.Runtime.Caching 程序集中. 接下来我们来看看.net co ...

  6. NJCTF2017 web getflag(详解)

    题目: url:http://218.2.197.235:23725/ writeup: 首先随便输入后查看源码: <imgsrc="data:image/png;base64,Y2F ...

  7. January 04 2017 Week 1st Wednesday

    Nothing happens unless first a dream. 一切始于梦想. I have a dream, one day I can be the expert in this fi ...

  8. linux c编程调用系统的动态库时,要使用dlopen等函数吗?

    同问 linux c编程调用系统的动态库时,要使用dlopen等函数吗? 2012-11-27 21:55 提问者: hnwlxyzhl 我来帮他解答 满意回答 2012-12-07 09:08 li ...

  9. S/4HANA生产订单增强WORKORDER_UPDATE方法BEFORE_UPDATE参数分析

    题目这个增强的输入参数很恐怖,长长的一串: CALL BADI l_badi->BEFORE_UPDATE EXPORTING IT_PIINSTRUCTIONVALUE = IT_PIINST ...

  10. python,dict的setdefault方法

    @dict的setdefault方法 先看看文档中的解释 setdefault(...)    D.setdefault(k[,d]) -> D.get(k,d), also set D[k]= ...