Question

谷歌浏览器现在附带一个下载按钮，用于播放只是嵌入视频的视频（即非MSE）：

Canary Controls

我很难找到Chrome实施<video>标记的任何文档。有没有人知道是否有办法 - 禁用“控件”并创建自己的视频播放器控件 - 禁用此功能？

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

谢谢！

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来检查原生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;
}

我希望谷歌能尽快解决这个问题，因为大多数内容提供商都对此感到高兴......

Answer 3

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

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

<强>更新

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

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

Answer 4

是的，现在可以这样做，至少在撰写本文时，您可以使用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

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

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

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

Answer 5

除了“ 下载”外，我尝试禁用的另一个控制项是“画中画” 。

遗憾的是，没有属性，因此可以将其添加到 controlsList 中。但是有一个属性- disablePictureInPicture ，您可以将其添加到元素以禁用pip。

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

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

详细信息：https://wicg.github.io/picture-in-picture/#disable-pip

Answer 6

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

正常的网络开发

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

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

Answer 8

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

index.html：（全球）

<body oncontextmenu="return false;">

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

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

Answer 9

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

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

另外，请注意 - 一些小宽度设备（例如移动电话）小到足以隐藏搜索条。隐藏下载按钮需要更多像素。

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

Answer 10

为了保持简单..你需要添加一个名为controlslist的属性（LOWERCASE，直接在控件之后），你需要将其值设置为=“nodownload”。另外，请确保您的src文件（类型）和属性类型的值匹配，这与上面的一些示例不同;我的链接是在我的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>

OR

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

使用普通的javascript来禁用页面中视频中的“下载”按钮：

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

如果愿意，还可以是querySelectorAll并删除每个视频。在我的示例中，每页只有一个视频。

Answer 12

我使用了效果很好的以下JavaScript代码段：

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

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

禁用Google Chrome的下载按钮？

12 个答案: