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

Question

我在 Chrome 55 中获得带有 <video> 标签的下载按钮，但在 Chrome 54 中没有：

我怎样才能删除它，这样就没人能看到 Chrome55 中的下载按钮了？

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

这是我当前的代码：

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

Answer 1

这是解决方案（来自）

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>

Answer 2

当使用 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>

Answer 3

至于当前 Chrome 版本 (56)，您还不能删除它。其他帖子提供的解决方案导致部分视频溢出

我找到了另一种解决方案 - 您可以使用以下技术使前面的按钮与下载按钮重叠并简单地覆盖它：

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您可能想要自定义图标，因为它仅作为示例。

Answer 4

我解决了这个问题，方法是用透明的 div 覆盖音频控制器的下载按钮，将鼠标光标的符号更改为 "not-allowed"。

div 阻止下载按钮的激活。

高度：50px，宽度：35px，左：（document-right -60），上：（与音频控制器相同）。

您必须将 div 的 z-index 样式设置在音频控制器的 z-index 之上。

请参阅 sapplic.com/jive66 以了解在 win7 和 win8 上适用于 chrome 的示例。

Answer 5

使用 "download" 按钮的最佳方式可能是使用 JavaScript 播放器，例如 Videojs (http://docs.videojs.com/) or MediaElement.js (http://www.mediaelementjs.com/)

默认情况下它们没有下载按钮，而且允许您自定义播放器的可见控制按钮。

Answer 6

Google 自上一个答案发布于此后添加了一项新功能。您现在可以添加 controlList 属性，如下所示：

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

您可以在这里找到控制列表属性的所有选项：

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

Answer 7

嘿，我找到了一个适用于所有情况的永久解决方案！

对于正常的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();
  });
});

$ 没有信心？ --> 调试方式!

<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();
  });
});

如果对您有帮助，请告诉我！

Answer 8

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

如果您想删除控件中的下载按钮，请执行以下操作：

<audio controls controlsList="nodownload">

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

In Chrome 55, prevent showing Download button for HTML 5 video

html

google-chrome

html5-video