在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题. 虽然简介视频是非付费的,但也不希望会有下载按钮或者可以视频另存为,所以找到一个可以看上去没有下载功能的方法,做一下笔记. 想要隐藏以上下载按钮,三个样式就可以了,不废话直接贴代码: video::-internal-media-controls-download-button { display:none; } video::-webkit-med…

问题: 使用video标签时,有些浏览器会显示视频的下载按钮,而这并不是我们需要的功能,必须想办法去掉. 解决方法: 使用下面的css可以达到隐藏下载按钮的效果,但是点击下载的位置,还是能出现开始下载的事件,所以暂未能彻底解决. video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden; } video::-…

1. 使用 video 元素的 ControlList API <video controls controlsList="nodownload"></video> 通过 ControList API,不仅可以通过设置 nodownload 来隐藏下载按钮,还可以设置 nofullscreen 隐藏全屏按钮, 以及noremoteplayback 等属性,具体的示例可以参考 github pages.该方案的优点是原生支持,不会产生bug,而且设置起来也是简单方…

Chrome浏览器在升级之后 video的样式和之前是不一样的,如果使用原生video的话可能会有影响,实际项目中最好使用第三方插件以保证video在所有浏览器都有统一的样式 一.如何隐藏video的下载按钮 1. 在Chrome58以上的版本中使用 video元素的  controlsList API :https://googlechrome.github.io/samples/media/controlslist.html   代码如下: <video controls controlsL…

当我们使用原生的audio标签时,可以看到如下的效果. 那么如何让下载按钮隐藏掉呢? 1. controlsList="nodownload" // 这个方法只支持 Chrome 58+, 低于该版本的是没有无法隐藏的 <audio src="/i/horse.ogg" controls="controls" controlsList="nodownload"> Your browser does not supp…

// 这个方法只支持 Chrome 58+, 低于该版本的是没有无法隐藏的 <audio src="/i/horse.ogg" controls="controls" controlsList="nodownload"> Your browser does not support the audio element. </audio> controlsList属性只兼容Chrome 58+以上,具体可以参考controls…

audio::-internal-media-controls-download-button {display:none;}audio::-webkit-media-controls {overflow: hidden !important}audio::-webkit-media-controls-enclosure {width: calc(100% + 32px);}…

一.判断浏览器版本(区分谷歌和360浏览器) function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) { return "Opera" }; //判断是否Opera浏览器 if (userAgent.indexOf("Firefo…

这是在微信中正常页面,就是用了一个原生video标签没做任何处理.然后顶部是固定页面顶端的,这个时候向上滑动页面时,会出现下图现象 这个时候正常人都会想到z-index问题,我也是这样想的,可惜很抱歉的告诉大家,你把z-index设置多大都无效,随便设置都不会起作用,最后我找了很多资料,发现这个问题很多人都遇到了,都是无解.原生的video标签就是这么坑,大家想其他方式绕行吧!!! 我项目中解决大概的思路是:当然上面所描述的情况就不处理了,因为大家可以上bilibili看一下,同样的问题,未解决…

// 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. // 最近遇到微信端的这个问题,非常让人头疼,正好有小伙伴和我聊到面试经验,灵机一动,<大事记>由此而生 问题描述: 在安卓系统的微信浏览器里面,<video> 标签触发了 play() 事件,即开始播放之后 <video> 标签的层级会变成 MAX 级别,无论如何设置 z…