禁用Google Chrome的下载button?

Google Chrome目前正在提供只有embedded式video的video(即非MSE)的下载button:

金丝雀控制

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

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

谢谢!

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

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

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

影子dom

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

播放器DOM

现在的问题是,由于某种原因,下载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; } 

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

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

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

Android 4.4 Chrome 55中的投射按钮

更新

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

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

是的,现在这是可能的,至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

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

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

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

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

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

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

让我知道,如果它帮助你了!

为了简单起见,您需要添加一个名为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>

添加这个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 */ }