禁用 Google Chrome 的下载按钮？

Question

Google Chrome 现在为嵌入视频（即非 MSE）的视频提供下载按钮：

我很难找到任何有关 Chrome 实施 <video> 标记的文档。有谁知道是否有办法 - 除了禁用 "controls" 和创建你自己的视频播放器控件 - 禁用此功能？

我意识到如果显示此内容，下载视频已经很容易了，我只是想禁用该功能作为控件的一部分出现。

谢谢！

Answer 1

您可以通过激活 Settings|Preferences -> Elements -> Show user agent shadow DOM

中的阴影 DOM 来检查本机 Chrome 视频播放器的控件

之后您可以检查播放器按钮。

现在的问题是由于某些原因无法通过 CSS 访问下载按钮。

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

行不通。即使选择前面的按钮并使用 + 或 ~ 定位其相邻按钮也不起作用。

我们找到的唯一方法是通过为控制面板提供更大的宽度并制作外壳 overflow: hidden

将按钮移出可视区域

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

我希望 google 能尽快解决这个问题，因为大多数内容提供商不会对此感到满意...

Answer 2

Demmongonis 解决方案确实有效，但请注意它可能会导致不良结果。

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

更新

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

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

Answer 3

上面的答案提供了一个很好的解决方案。然而，当我在我的项目中处理这个问题时，有两个问题。

当在 Android（手机或平板电脑）上触摸全屏按钮的右边距区域时，会发生下载（就像按下下载按钮一样）。应用 z-index 没有解决它。
由于overflow:hidden，下载按钮不可见但仍然存在于全屏按钮的右侧。这意味着当您在 PC 上单击任何控制按钮或栏后多次按 "tab" 时，您仍然可以到达下载按钮。

此外，请注意一些小宽度设备（例如手机）小到可以隐藏搜索栏。隐藏下载按钮需要更多像素。

我希望 Google 提供尽快调整此选项的选项。

Answer 4

或者您可以简单地在 controlsList

中添加 nodownload

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

Answer 5

是的，现在这是可能的，至少在撰写本文时，您可以使用 controlsList 属性：

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

这似乎是在 Chrome 58 中引入的，它的文档可以在这里找到：https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

Developers can now customize media controls such as the download, fullscreen and remoteplayback buttons. Usage in HTML:

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

甚至还有一个官方示例页面：https://googlechrome.github.io/samples/media/controlslist.html

Answer 6

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

对于正常的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 7

为了简单起见.. 您需要添加一个名为 controlslist 的属性（小写，直接在 controls 之后），并且需要将其值设置为 ="nodownload"。另外，确保你的 src 文件（类型）和你的属性类型的值匹配，不像上面的一些例子；我的 link 是我的 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

除了上述答案之外，您还必须添加以下代码以禁用上下文菜单：

index.html:（全局）

<body oncontextmenu="return false;">

或者您可以禁用某些 元素的上下文菜单:

element.oncontextmenu = function (e) {
    e.preventDefault();
};

Answer 9

除了“下载”之外，我试图禁用的另一个控制项是 'picture-in-picture'.

遗憾的是，属性没有为此添加到 controlsList。但是有一个属性 - disablePictureInPicture 你可以添加到元素来禁用 pip。

同时禁用下载和画中画的示例：

<video disablepictureinpicture controlslist="nodownload">...</video>

详情：https://wicg.github.io/picture-in-picture/#disable-pip

Answer 10

普通 javascript 禁用页面视频中的 "download" 按钮：

<script>
    window.onload = function() {
        video = document.querySelector('video');
        if (video) {
           video.setAttribute("controlsList", "nodownload");
        }
    };
</script>

如果需要，您也可以是 querySelectorAll 并删除每个视频。在我的示例中，我每页只有一个视频。

Answer 11

我使用以下 JavaScript 片段，效果很好：

document.querySelectorAll("video[id^=media-player]").forEach((elem) => elem.controlsList.add("nodownload"));

示例：www.ring-cafe-finsterwalde.de/archiv/archiv.html#archiv4

禁用 Google Chrome 的下载按钮？

Disable download button for Google Chrome?

google-chrome

html5-video