在Chrome 55中，不要为HTML 5video显示“下载”button
我在Chrome 55中使用<video>标签获取这个下载button，但在Chrome 54上没有： 
我怎样才能删除这个，所以没有人可以看到在Chrome 55的下载button？
我已经使用<video>标签将此videoembedded到我的网页上。 所以，我想要一些代码来删除这个下载选项。
这是我现在的代码：
<video width="512" height="380" controls> <source data-src="mov_bbb.ogg" type="video/mp4"> </video>
这是解决scheme（从这个职位 ）
video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden; } video::-webkit-media-controls-panel { width: calc(100% + 30px); /* Adjust as needed */ }
自从上次回复发布在这里以后，Google添加了一项新function。 您现在可以添加controlList属性，如下所示：
<video width="512" height="380" controls controlsList="nodownload"> <source data-src="mov_bbb.ogg" type="video/mp4"> </video>
你可以在这里findcontrollist属性的所有选项：
https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
从Chrome58开始，您现在可以使用controlsList删除不想显示的控件。 这适用于<audio>和<video>标签。
如果你想删除控件中的下载button，请执行以下操作：
<audio controls controlsList="nodownload">
当使用HTML5audio时，这可以隐藏Chrome上的下载button。
#aPlayer > audio { width: 100% } /* Chrome 29+ */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { /* HIDE DOWNLOAD AUDIO BUTTON */ #aPlayer { overflow: hidden;width: 390px; } #aPlayer > audio { width: 420px; } } /* Chrome 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) { #aPlayer { overflow: hidden;width: 390px; } #aPlayer > audio { width: 420px; } }
<div id="aPlayer"> <audio autoplay="autoplay" controls="controls"> <source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" /> </audio> </div>
至于目前的Chrome版本（56），你还不能删除它。 在其他post中提供的解决scheme导致video的一部分溢出。
我find了另一个解决scheme – 你可以使前面的button重叠下载button，并简单地覆盖它，通过使用这种技术：
video::-webkit-media-controls-fullscreen-button { margin-right: -48px; z-index: 10; position: relative; background: #fafafa; background-image: url(https://image.flaticon.com/icons/svg/151/151926.svg); background-size: 35%; background-position: 50% 50%; background-repeat: no-repeat; }
例如： https ： //jsfiddle.net/dk4q6hh2/
PS您可能想要自定义图标，因为它仅作为示例。
嘿，我发现一个永久的解决scheme，应该在任何情况下工作！
对于正常的web开发
<script type="text/javascript"> $("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); </script>
错误地预加载的HTML5video
$( document ).ready(function() { $("video").each(function(){ $(this).attr('controlsList','nodownload'); $(this).load(); }); });
$ undevinded？ – >debugging模式！
<script type="text/javascript"> jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); </script>
错误地预加载的HTML5video
jQuery( document ).ready(function() { jQuery("video").each(function(){ jQuery(this).attr('controlsList','nodownload'); jQuery(this).load(); }); });
让我知道，如果它帮助你了！
可能是利用“下载”button的最佳方式是使用JavaScript播放器，如Videojs（ http://docs.videojs.com/ ）或MediaElement.js（ http://www.mediaelementjs.com/ ）
默认情况下，他们没有下载button，而且允许您自定义播放器的可见控制button。
我用一个透明的div覆盖了一个audio控制器的下载button来解决这个问题，该透明的div将鼠标光标的符号改变为“不允许”。
div阻止下载button的激活。
高度：50像素，宽度：35像素，左侧：（文件右侧-60），顶部:(与audio控制器相同）。
您必须在audio控制器的z-index之上设置div的z-index样式。
有关适用于win7和win8上的chrome的示例，请参见sapplic.com/jive66 。
