Question

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

如何删除此内容，以便没有人可以在Chrome 55中看到下载按钮？

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

这是我目前的代码：

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

Answer 1

自从上一个答案发布在此处以来，Google已添加了一项新功能。您现在可以添加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

Answer 2

这是解决方案（来自this post）

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 3

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

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

<audio controls controlsList="nodownload">

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

Click here to see the screenshot

Answer 5

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

正常的网络开发

<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？ - ＆GT;调试方式！

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

对于当前的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 7

可能是利用＆＃34;下载＆＃34;的最佳方式。按钮是使用JavaScript播放器，例如Videojs（http://docs.videojs.com/）或MediaElement.js（http://www.mediaelementjs.com/）

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

Answer 8

我通过覆盖带有透明div的音频控制器的下载按钮解决了这个问题，该div将鼠标光标的符号更改为＆＃34; not-allowed＆＃34;。

div阻止激活下载按钮。

高度：50px，宽度：35px，左:(文档右-60），上:(与音频控制器相同）。

您必须将div的z-index样式设置为高于音频控制器的z-index。

有关适用于win7和win8上的chrome的示例，请参阅sapplic.com/jive66。

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

8 个答案: