使用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. thinkphp5.0 - Redis 实现秒杀

    首先,因为秒杀这个环节在商城项目中比较常见,最近写商城项目,碰到这个功能模块,于是就拿出来给大家分享一波. 难点:高并发的情况下,正常逻辑写的话数据库的库存会出现负数,对付这类问题有很多解决方案,我就 ...

  2. JSON数据的解析和生成(C++)

    安装 "JSON for Modern C++" $ brew tap nlohmann/json $ brew install nlohmann_json 安装之后将/usr/l ...

  3. 【原】 The Linux Command Line - Permissions

    id - display user identity chmod - umask -

  4. elasticsearch template

    # curl -XPUT localhost:9200/_template/template_1 -d '{"template" : "te*","s ...

  5. eclipse修改工作目录颜色

    转载请注明本地址,http://blog.csdn.net/u013173247/article/details/41676495 经常用Eclipse的朋友都应该清楚,Eclipse的白背景不知道晃 ...

  6. AngularJS学习笔记(一)

    一.基本指令 1.ng-app=" " 指令初始化一个 AngularJS 应用程序,定义angularJS的使用范围; tips:一个页面里创建多个 ng-app 手动加载即可: ...

  7. Django REST framework的分页

    DRF分页组件 为什么要使用分页 我们数据表中可能会有成千上万条数据,当我们访问某张表的所有数据时,我们不太可能需要一次把所有的数据都展示出来,因为数据量很大,对服务端的内存压力比较大还有就是网络传输 ...

  8. Mysql 提升大数据表的拷贝效率

    工作上会经常遇到量级比较大的数据表  :场景: 该数据表需要进行alter操作 比如增加一个字段,减少一个字段. 这个在一个几万级别数据量的数据表可以直接进行alter表操作,但是要在一个接近1000 ...

  9. 状态机学习(六)解析JSON2

    来自 从零开始的 JSON 库教程 从零开始教授如何写一个符合标准的 C 语言 JSON 库 作者 Milo Yip https://zhuanlan.zhihu.com/json-tutorial ...

  10. JSP内置对象application

    application对象实现了用户间数据的共享,可存放全局变量 application开始于服务器的启动,终止于服务器的关闭 在用户的前后连接或不同用户之间的连接中,可以对application对象 ...