用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示:
但有时在谷歌浏览器上显示,会遇到右下角有下载按钮。如果项目要求去掉这个下载按钮,怎么办呢?如下图显示:
分析: 经本人测试,是谷歌浏览器版本问题(低版本的右下角没有下载按钮,比如53.0版本,我的谷歌浏览器是53.0版本) 。用同事电脑上的58.0版本测试有下载按钮
只测试了53.0和58.0版本,如果你的谷歌浏览器版本是54.0-57.0之间,并且也出现了视频右下角有按钮的情况都可以使用下面的代码。
解决方法:使用CSS hack,代码如下:
video::-internal-media-controls-download-button {
display:none;
} video::-webkit-media-controls-enclosure {
overflow:hidden;
} video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
参考博客链接:https://majing.io/questions/823
用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉的更多相关文章
- html5 video标签屏蔽右键视频另存为的js代码-HTML5教程
点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过 做HTML5的video标签,本身我们 ...
- html5 video标签如何禁止视频下载
html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...
- Web视频播放 之 【HTML5 Video标签】
一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- 巧用transform实现HTML5 video标签视频比例拉伸
前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...
- html5 video标签兼容性与自定义控件
Video不兼容IE8及之前的版本和opera mini. 格式上MPEG4/H.264兼容大部分浏览器,除低版本Firefox和低版本opera,这些可以通过用ogg格式解决,而webm是一种开放. ...
- ie8及ie8以下支持html5 video标签
html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...
- [JavaScript] html5 video标签注意事项
Chrome 66 禁止声音自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年 ...
随机推荐
- 如何学习DeepLearning
多年来,科学家们为了搞清楚神经网络的运行机制,进行了无数次实验.但关于神经网络的内在运行方式,目前还没有系统性的理论,没有具体的路线可以指引你获得更好的性能.简单地下载开源工具包直接使用并不能跑出很棒 ...
- Linux网络编程学习(六) ----- 管道(第四章)
1.管道的定义 管道就是将一个程序的输出和另外一个程序的输入连接起来的单向通道,比如命令: ls -l|more,就建立了一个管道,获取ls -l的输出作为more的输入,数据就沿着管道从管道的左边流 ...
- ES6中的let命令
ES6新增了let命令,用于声明变量.其用法类似var,区别是使用let命令声明的变量只在当前代码块有效. for循环的计数器就很适合使用let命令. var arr= [1,2,3,4,5]; fo ...
- mybatis-generator 覆盖新增XML
参考文章:https://www.cnblogs.com/xxoome/p/10068780.html 1.添加依赖(版本1.3.7) plugin> <groupId>org.my ...
- git tag的用法
我们常常在代码封板时,使用git 创建一个tag ,这样一个不可修改的历史代码版本就像被我们封存起来一样,不论是运维发布拉取,或者以后的代码版本管理,都是十分方便的 git的tag功能 git 下打标 ...
- 725. Split Linked List in Parts把链表分成长度不超过1的若干部分
[抄题]: Given a (singly) linked list with head node root, write a function to split the linked list in ...
- 如何在3GPP下载协议
以下载AT Commands协议为例. 1. 打开3GPP网址:http://www.3gpp.org/ 2. 打开Specification-Specification Numbering,如图.去 ...
- ELK+SpringBoot+Logback离线安装及配置
ELK+SpringBoot+Logback 离线安装及配置 版本 v1.0 编写时间 2018/6/11 编写人 xxx 目录 一. ELK介绍2 二. 安装环境2 三. Elasticse ...
- hbase-基础架构
介绍 hbase架构主要由hmaster,zookeeper和regionserver三部分构成,底层数据存储在hdfs中 hmaster 允许有多个master节点,使用zookeeper控制,保证 ...
- Asterisk 11 chan_sip.c: Failed to authenticate device 看不到IP的问题
Asterisk 11 chan_sip.c: Failed to authenticate device 看不到IP的问题 没有验证过 原文地址 http://www.coochey.net/? ...