禁用Google Chrome的下载button？

Google Chrome目前正在提供只有embedded式video的video（即非MSE）的下载button：

我很难find任何有关Chrome浏览器实现<video>标签的文档。 有没有人知道是否有办法 – 禁用“控制”和创build自己的video播放器控制 – 禁用此function？

我意识到，如果这显示，它已经很容易下载video，我只是想禁用该function，作为控件的一部分出现。

谢谢！

Answer 1

或者你可以简单地在controlsList中添加nodownload

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

Answer 2

您可以通过在Settings|Preferences -> Elements -> Show user agent shadow DOM激活阴影DOM来检查本地Chromevideo播放器的控件

之后，您可以检查播放器button。

现在的问题是，由于某种原因，下载button不能通过CSS访问。

 video::-internal-media-controls-download-button { display:none; } 

将无法工作。 即使select前面的button并使用+或~来定位邻居也不行。

我们发现的唯一方法是通过给予控制面板更大的宽度并使shelloverflow: hidden将button从可视区域移出overflow: hidden

 video::-webkit-media-controls { overflow: hidden !important } video::-webkit-media-controls-enclosure { width: calc(100% + 32px); margin-left: auto; } 

我希望谷歌将很快解决这个问题，因为大多数内容提供商将不会对此感到满意…

Answer 3

Demmongonis解决scheme的工作，但要注意它可能会导致不必要的结果。

有时Android / Chrome取决于video，我猜想和其他因素，在下载button的右侧添加button。 即铸造button（没有办法select它）。 它将使下载button保持可见，最后一个button隐藏（投射button）

更新

现在可以使用controlsList属性隐藏下载button：

 <video controlsList="nodownload" ... /> 

Answer 4

是的，现在这是可能的，至less在写作的时候，你可以使用controlsList属性：

 <video controls controlsList="nodownload"> <source data-src="movie.mp4"> </video> 

看起来这是在Chrome 58中引入的，其文档可以在这里find： https ： //developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

开发人员现在可以自定义媒体控件，如下载，全屏和远程播放button。 HTML中的用法

<video controls controlsList="nofullscreen nodownload noremote foobar"></video>

甚至有一个官方样本页面： https ： //googlechrome.github.io/samples/media/controlslist.html

Answer 5

以上答案提供了一个很好的解决scheme 但是，当我在我的项目中进行这项工作时，出现了两个问题。

1. 在Android（手机或平板电脑）上触摸全屏button的右边空白区域时，会发生下载（就像按下了下载button一样）。 应用z-index没有解决它。

2. 由于溢出：隐藏，下载button不可见，但仍然存在于全屏button的右侧。 这意味着当您点击PC上的任何控制button或栏后按“tab”几次，仍然可以到达下载button。

此外，要小心 – 一些小宽度的设备（如手机）足够小，以隐藏search栏。 这将需要更多的像素来隐藏下载button。

我希望Google提供了这个尽快调整的选项。

Answer 6

嘿，我发现一个永久的解决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(); }); }); 

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

Answer 7

为了简单起见，您需要添加一个名为controlslist的属性（LOWERCASE，直接在控件之后），并且您需要将其值设置为=“nodownload”。 此外，请确保您的src文件（types）和您的属性types的值匹配，不像上面的一些例子; 我的链接是在Google云端硬盘上的一个名为'sunrise over water.mp4'的文件。 我如何做这看起来像这样：

<video src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" title="sunrise over water" width="420" height="300" controls controlslist="nodownload" type="video/mp4"> Video Not Supported By Your Browser... </video>

要么

<video width="440" height="320" title="sunrise over water" controls controlslist="nodownload"> <source src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" type="video/mp4"> Video Could Not Be Played In Your Browser... Sorry. </video>

Answer 8

添加这个CSS代码。

  audio::-internal-media-controls-download-button { display:none; } audio::-webkit-media-controls-enclosure { overflow:hidden; } audio::-webkit-media-controls-panel { width: calc(100% + 30px); /* Adjust as needed */ }