在Chrome 55，防止出对HTML 5视频下载按钮[复制]

Question

这个问题已经在这里有一个答案：

• Disable download button for Google Chrome? 11个回答

我正在与<video>标签此下载按钮在Chrome 55，但无法在Chrome 54：

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

我已经使用<video>标签嵌入我的网页上该视频。所以，我想某种代码，删除此下载选项。

这里是我当前的代码：

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

Answer 1

谷歌增加了新的功能，因为最后的答案被张贴在这里。现在，您可以添加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的下载按钮。

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

嘿，我发现了一个永久性的解决方案应该在任何情况下工作！

对于普通的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();
  });
});

让我知道，如果它帮助你！

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

可能是利用“下载”的最好办法按钮是使用JavaScript的球员，比如Videojs（http://docs.videojs.com/）或MediaElement.js（http://www.mediaelementjs.com/）

他们没有在默认情况下作为一项规则下载按钮，而且允许您自定义播放器的可视控制按钮。

Answer 8

我通过覆盖一个音频控制器的下载按钮用透明的div改变所述鼠标光标的记号为“未允许的”解决了这个问题。

在div块的下载按钮的激活。

高度：50像素，宽度：35px，左：（文件右-60），顶（相同音频控制器）。

您必须设置音频控制器的z-index的上述div的z-index的风格。

见sapplic.com/jive66为镀铬工作在Win7和Win8的上一个例子。