video标签去除下载按钮
HTML
中直接使用video
来播放视频,在Chrome浏览器、360浏览器、QQ浏览器(以及其他一些使用Chrome内核Blink)等中都会出现下载按钮,但我们一般又不希望出现下载按钮。
好像是从Chrome 54版本开发有下载按钮的(从网上看到的,我也不确定),网上有css解决方案,如下:
video::-internal-media-controls-download-button {display:none;
}
video::-webkit-media-controls-enclosure {overflow:hidden;
}
video::-webkit-media-controls-panel {width: calc(100% + 30px);
}
我试了之后在chrome内核: 56.0.2924.90 之下确实可以将下载按钮去除,不过看上面的css大致意思就是将控制器的宽度加宽30px,然后通过overflow:hidden;
去除显示,不过感觉好像不是多靠谱,然后接着网上看资料,就看到了HTMLMediaElement.controlsList
。
HTMLMediaElement.controlsList
HTMLMediaElement
接口的controlsList
属性返回DOMTokenList
,帮助用户在显示其自己的控件集时选择要在媒体元素上显示的控件。DOMTokenList
可以设置以下三个可能值中的一个或多个:nodownload
,nofullscreen
和noremoteplayback
。
也就是说可以通过设置controlsList
属性来控制是否显示下载按钮,如下:
<video controls controlslist="nodownload" id="video" src=""></video>
设置controlslist="nodownload"
之后,在我当前使用的Chrome浏览器(69)就不会出现下载按钮。
关于controlsList
可以查看https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/controlsList 。
这里是一个关于controlsList
使用的示例 。
但是我又想兼容例如56版本的Chrome浏览器怎么办呢,我试着加上上述的css解决方案并设置controlslist="nodownload"
,在56版本的Chrome浏览器和69版本的谷歌浏览器两个都可以正常显示。
但是我用360浏览器(内核版本63)以及QQ浏览器(内核版本63)如果同时设置以上的两种解决方案是有问题的,会将全屏按钮一并隐藏,所以可能在56版本的Chrome浏览器不支持controlslist="nodownload"
就将其忽略,而在69版本的谷歌浏览器上面的css解决方案已经无效了。
所以现在如果要统一解决的话,在低版本54.0-57.0之间使用上面的css解决方案,而在58版本之后使用controlslist="nodownload"
解决。
video标签去除下载按钮相关推荐
- 隐藏 video标签的下载按钮
在 cordova-plugin-inappbrowser插件中隐藏 Android 的 webView里的 <video>标签: let webView = window.cordova ...
- Video标签禁止下载
Video标签自带下载功能 屏蔽Video标签的下载: 代码: <video src="vedio/0d6LBbpG.mp4" controls="controls ...
- video 标签 禁止下载 亲测有效 隐藏按钮 三个点 亲测有效
通过controlslist和禁止右键使播放器不能被下载 <video src="{$data.h_video}" class="swiper-slide-img& ...
- 修改video标签自带按钮的默认样式
这里所说的修改video标签中自带按钮的默认样式,指的是用css就可以控制视频播放按钮的大小等 我们来看一下 video 的内部构造: chrome 下,开发者工具 setting Prefere ...
- 关于HTML5的audio标签和video标签删除下载图标
video标签和audio标签在谷歌浏览器上自带下载按钮,当我们不想要下载按钮的时候,可以试一下以下操作 第一种方案: 在video或者audio标签上添加controlsList="nod ...
- 如何隐藏 video 元素的下载按钮
1. 使用 video 元素的 ControlList API <video controls controlsList="nodownload"></video ...
- HTML5 video标签禁止下载
<video :src="path" controls="true" controlslist="nodownload" style= ...
- Html5页面video标签禁用下载视频
两处禁用. 1.video标签的禁用 <video >标签中加入 controlslist="nodownload" 2.播放器区域禁用鼠标右键: 页面加载完成,执行j ...
- HTMl5之video标签禁止下载(隐藏下载按钮)
<video controls controlslist="nodownload"><source src="a.mp4" type=&quo ...
最新文章
- Python 之 matplotlib (六)tick能见度
- 【数据挖掘笔记四】数据仓库和联机分析处理
- hdu2110(普通母函数)
- 1.13.、1.14.Flink 支持的DataType和序列化、Flink Broadcast Accumulators Counters Distributed Cache
- springboot 远程日志
- 获取文本中你须要的字段的 几个命令 grep awk cut tr sed
- Android设计模式之——解释器模式
- World Wind Java开发之五——读取本地shp文件(转)
- 20200721:每日一题之不同的二叉搜索树 II(leetcode95)
- 强悍的 ubuntu —— samba 实现 ubuntu 与 windows 之间的文件共享
- select样式调整
- 用python简单处理图片(5):图像直方图
- 一个下载网页视频的方法
- 115怎么利用sha1下载东西_用于批量倾倒和提取的115 sha1工具
- 2022年大一学生实训作业【基于HTML+CSS制作中华传统文化传统美德网站 (6页面)】
- 苹果开发者账号授权给普通个人苹果账号上架APP
- mybatis 逆向工程 思维导图
- 面试的反杀-你有没有想要问我的
- php 链接oracle tns,PHP连接Oracle ORA
- 【算法】求解钱币兑换问题