html5 video 禁止浏览器显示下载按钮

2024-11-07

【HTML5】video 标签禁用自带的下载按钮

h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 <style type="text/css"> video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden; } video::-webkit-media-controls-panel { width: ca

去掉谷歌浏览器 video标签下的下载按钮

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

echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮

echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ©Copyright 蕃薯耀 2017年2月8日星期三 http://www.cnblogs

html5 video微信浏览器视频不能自动播放

html5 video微信浏览器视频不能自动播放一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop></audio> &l

Chrome浏览器video样式控制-隐藏下载按钮

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

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

HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload="metadata">  <source src="assets/dizzy.mp4" type="video/mp4"

Ajax方式导出Excel，浏览器显示下载Excel表

以前实现导出Excel,都是用form表单提交,因为jquery封装的ajax请求导出Excel,浏览器不显示文件. 但是这次的需求要带着header,form表单不能带header,百度了下,原生ajax是支持导出Excel的二进制数据格式的. 1.JS方法里全部代码 //原生ajax var xhr = new XMLHttpRequest(); //post方式请求后台的路径 xhr.open('post', '/api/export', true); //导出的Excel是二进制数据类型

HTML5 <video> - 使用 DOM 进行控制

HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放.已暂停,已停止,等等. 下例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法. 实例为视频创建简单的播放/暂停以及调整尺寸控件: <!DOCTYPE html> <html> <body

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

点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过做HTML5的video标签,本身我们有下载功能,但是在video区域内,点击右键可以将“视频另存为”, 来下载视频,为了屏蔽“视频另存为”,可以在js中加入以下代码: 复制代码代码如下: $('#myVideo').bind('contextmenu',function() { return false; }); 其中myVide

用HTML5 video标签插入视频，在谷歌浏览器上播放视频时，右下角显示的下载按钮怎么去掉

使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷歌浏览器版本问题(低版本的右下角没有下载按钮,比如53.0版本,我的谷歌浏览器是53.0版本) .用同事电脑上的58.0版本测试有下载按钮只测试了53.0和58.0版本,如果你的谷歌浏览器版本是54.0-57.0之间,并且也出现了视频右下角有按钮的情况都可以使用下面的代码. 解决方法:使用CSS

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

html5 video标签如何禁止视频下载一.总结一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给video对象绑定return false的匿名方法. 这样的效果是禁止鼠标右键的另存为功能. 23 $('#video1').bind('contextmenu',function() { return false; }); 二.html5 video标签如何禁止视频下载 1.代码 <!DOCTY

隐藏video标签的下载按钮

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

h5的video下载按钮如何隐藏

h5的video下载按钮在部分手机系统上是不可用的,想要把这个按钮屏蔽掉,可苦于没有像屏蔽全屏按钮那样的伪类video::-webkit-media-controls-fullscreen-button {display: none;} 只好找了一种比较搓的方法: video::-webkit-media-controls-enclosure { overflow:hidden;}video::-webkit-media-controls-panel { width: calc(1

html中如何移除video下载按钮

我发现部分安卓手机使用video标签播放视频的时候会自带一个下载按钮,一般产品大多都不需要这一功能,那如何屏蔽下载按钮呢?有下面两种,请一定使用第一种方式,使用css控制会有兼容性问题,建议不要使用这种方案. 第一种方式,通过原生方式 nodownload in controlsList 控制button显示,audio标签也适用 <video width="400" height="300" controls controlsList="nodow

html页面原生video标签隐藏下载按钮

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

判断浏览器是否支持HTML5 video

话不多说,下面是我从W3C扒的判断浏览器是是否支持H5视频的代码,有需要的小伙伴,拿走不谢 HTML <div id="checkVideoResult"><button onclick="checkVideo()">检测</button></div> JS (代码格式是整理过的,不过复制进来就这样了,小伙伴们自己格式化一下哈) function checkVideo() { if(!!document.createE

去掉video视频播放器下的下载按钮

去掉video视频播放器下的下载按钮: video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden; } video::-webkit-media-controls-panel { width: calc(100% + 30px); }

如何隐藏 video 元素的下载按钮

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

基于Chromium的浏览器已上线通用“显示密码”按钮

基于Chromium的Edge在日前发布的Canary通道版本中,对用户界面进行了优化调整从而让InPrivate窗口变得更加简洁.在今天获得的版本更新中,微软继续带来了隐私相关的新内容--实现通用的“显示密码”按钮. 这项功能是众多“受控功能部署”的功能之一,微软解释道: 为< input type="password"/>部署显示密码按钮.这个新添加的按钮是和< input type="search"/>清除/取消按钮相同的模式,在con

移动端HTML5<video>视频播放优化实践

遇到的挑战移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度以一个8s短视频为例,wifi环境下提供的高清视频达到1000kbps,文件大小大约1MB:非wifi环境下提供的低码率视频是500kbps左右,文件大小大约500KB:参考QzoneTouch多普勒测速,2g网络的平均速度是14KB/s,那么下载一个低码率视频耗时35s:那么要想流畅播放视频,就需要一个加载等待的过程,这个过程要有明确的反馈,不能让用户有“坏

html5 video 禁止浏览器显示下载按钮

热门专题