在Chrome 55中，防止显示HTML 5视频的下载按钮

我得到这个下载按钮与<视频>标签在Chrome 55，但不是在Chrome 54:

我如何删除这个，所以没有人可以看到下载按钮在Chrome 55?

我已经使用<video>标签将这个视频嵌入到我的网页上。所以，我想要一些代码来删除这个下载选项。

这是我当前的代码:

<video width="512" height="380"  controls>
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

当前回答

嘿，我找到了一个永久的解决方案，应该在任何情况下工作!

对于普通的web开发

<script type="text/javascript"> 
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

HTML5视频有预加载错误

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

undevinded美元?——>调试模式!

<script type="text/javascript"> 
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

HTML5视频有预加载错误

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

如果对你有帮助，请告诉我!

2017-06-03 10:13:20

其他回答

嘿，我找到了一个永久的解决方案，应该在任何情况下工作!

对于普通的web开发

<script type="text/javascript"> 
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

HTML5视频有预加载错误

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

undevinded美元?——>调试模式!

<script type="text/javascript"> 
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

HTML5视频有预加载错误

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

如果对你有帮助，请告诉我!

2017-06-03 10:13:20

这就是解决方案(来自这篇文章)

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 */
}

更新2: @Remo的新解决方案

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

2016-12-14 06:52:31

从Chrome58开始，你可以使用controlsList删除你不想显示的控件。这可用于<audio>和<video>标签。

如果你想删除控件中的下载按钮，请这样做:

<audio controls controlsList="nodownload">

2017-06-19 18:43:03

谷歌增加了一个新功能，因为上次的答案张贴在这里。你现在可以添加controlList属性，如下所示:

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

你可以在这里找到controllist属性的所有选项:

https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

2017-04-20 08:04:53

当使用HTML5音频时，这可以隐藏Chrome上的下载按钮。

#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>

2016-12-23 13:47:13

在Chrome 55中，防止显示HTML 5视频的下载按钮

推荐文章

最新文章

标签