使用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标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉的更多相关文章

  1. html5 video标签屏蔽右键视频另存为的js代码-HTML5教程

    点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过   做HTML5的video标签,本身我们 ...

  2. html5 video标签如何禁止视频下载

    html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...

  3. Web视频播放 之 【HTML5 Video标签】

    一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...

  4. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  5. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  6. 巧用transform实现HTML5 video标签视频比例拉伸

    前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...

  7. html5 video标签兼容性与自定义控件

    Video不兼容IE8及之前的版本和opera mini. 格式上MPEG4/H.264兼容大部分浏览器,除低版本Firefox和低版本opera,这些可以通过用ogg格式解决,而webm是一种开放. ...

  8. ie8及ie8以下支持html5 video标签

    html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...

  9. [JavaScript] html5 video标签注意事项

    Chrome 66 禁止声音自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年 ...

随机推荐

  1. linux中open函数使用

    open函数用来打开一个设备,他返回的是一个整型变量,如果这个值等于-1,说明打开文件出现错误,如果为大于0的值 参考格式 if(fd=open("/dev/ttys0",O_RD ...

  2. jquery.validate和jquery.form配合实现验证表单后AJAX提交

    基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...

  3. 微信小程序--预览previewImage(长按保存图片)

    最近开发小程序,想实现二维码图片长按保存,发现无法保存,只能让图片先预览,再保存.注意:只有太阳码才有长按保存和识别功能,普通二维码只有长按保存功能. <image class='banner' ...

  4. JQuery的可见性选择器

    1. <div id="test" style="width:400px;height:200; background:#0000ff;display:block; ...

  5. java学习笔记(三):类和对象

     创建对象 构造器 每一个类都有一个构造器. 如果我们不单独为一个类编写构造器那么 Java 的编译器将会给这个类建立一个默认的构造器. 每当一个新的对象被创建,至少一个构造器将会被调用. 构造器的一 ...

  6. Python积累三:object() take no object!

    A,报错:object() take no object! 根因:代码书写级错误!!!!! 两个原因: 1. __init__ 左右都是2个下划线,这里自己没掉进去! 2.init写成int,不是in ...

  7. git创建新的分支

    1.本地创建一个新的分支 git branch develop 2.切换到新创建的分支 git checkout develop 3.将新的分支发布到gitlab上 git push origin d ...

  8. SQLite 安装

    Windows 平台安装 下载地址:https://www.sqlite.org/download.html 下载预编译的安装包 将下载的安装包=解压到一个文件夹,有三个重要文件: sqlite3.e ...

  9. 在centos7上使用最简单的方法把php脚本做成服务,随开机启动运行

    1.准备文件:coffeetest.service # copy to /usr/lib/systemd/system # systemctl enable coffeetest.service [U ...

  10. [Bat]如何彻底关闭每个盘符默认的共享$(即使重启也有效)

    Windows启动时都会默认打开admin$ ipc$ 和每个盘符的共享,对于不必要的默认共享,一般都会把它取消掉,可当又需要打开此默认共享时,又该从哪里设置呢,一般来说有两个地方,MSDOS命令和计 ...