在 Chrome 55 中，防止显示 HTML 5 视频的下载按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41115801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In Chrome 55, prevent showing Download button for HTML 5 video
提问by Muhammad Zeeshan
I am getting this download button with <video>tags in Chrome 55, but not on Chrome 54:
我<video>在 Chrome 55 中得到这个带有标签的下载按钮，但在 Chrome 54 上没有：
How can I remove this so no one can see the download button in Chrome 55?
如何删除它，以便在 Chrome 55 中没有人可以看到下载按钮？
I have used <video>tag to embed this video on my web page. So, I want some kind of code to remove this download option.
我已使用<video>标签将此视频嵌入到我的网页中。所以，我想要某种代码来删除这个下载选项。
Here is my current code:
这是我当前的代码：
<video width="512" height="380" controls>
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
采纳答案by Muhammad Zeeshan
This is the solution (from 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 */
}
Update 2 : New Solution by @Remo
更新 2：@Remo 的新解决方案
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
回答by Remo
Google has added a new feature since the last answer was posted here.
You can now add the controlListattribute as shown here:
自从最后一个答案在这里发布以来，谷歌添加了一项新功能。您现在可以添加controlList属性，如下所示：
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
You can find all options of the controllist attribute here:
您可以在此处找到 controllist 属性的所有选项：
https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
回答by Nithin Girish
As of Chrome58 you can now use controlsListto remove controls you don't want shown. This is available for both <audio>and <video>tags.
从 Chrome58 开始，您现在可以使用controlsList来删除您不想显示的控件。这对<audio>和<video>标签都可用。
If you want to remove the download button in the controls do this:
如果要删除控件中的下载按钮，请执行以下操作：
<audio controls controlsList="nodownload">
回答by Alper Ebicoglu
This can hide download button on Chrome when HTML5 Audio is used.
当使用 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>
回答by Chris Kroon
Hey I found a permanent solution that should work in every case!
嘿，我找到了一个适用于所有情况的永久解决方案！
For normal webdevelopment
用于正常的 Web 开发
<script type="text/javascript">
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
预加载为 false 的 HTML5 视频
$( document ).ready(function() {
$("video").each(function(){
$(this).attr('controlsList','nodownload');
$(this).load();
});
});
$ undevinded? --> Debug modus!
$未开发？--> 调试方式！
<script type="text/javascript">
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
预加载为 false 的 HTML5 视频
jQuery( document ).ready(function() {
jQuery("video").each(function(){
jQuery(this).attr('controlsList','nodownload');
jQuery(this).load();
});
});
Let me know if it helped you out!
让我知道它是否对你有帮助！
回答by pwkc
As for current Chrome version (56) you can't remove it yet. Solution provided in other posts leads to overflowing some part of the video.
对于当前的 Chrome 版本 (56)，您还不能将其删除。其他帖子中提供的解决方案导致视频的某些部分溢出。
I've found another solution - you can make the preceding button to overlap the download button and simply cover it, by using this technique:
我找到了另一种解决方案 - 您可以使用以下技术使前面的按钮与下载按钮重叠并简单地覆盖它：
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;
}
Example: https://jsfiddle.net/dk4q6hh2/
示例：https: //jsfiddle.net/dk4q6hh2/
PS You might want to customise the icon, since it's for example only.
PS 您可能想要自定义图标，因为它仅作为示例。
回答by Andrey Tzar
May be the best way to utilize "download" button is to use JavaScript players, such as Videojs (http://docs.videojs.com/) or MediaElement.js (http://www.mediaelementjs.com/)
使用“下载”按钮的最佳方式可能是使用 JavaScript 播放器，例如 Videojs ( http://docs.videojs.com/) 或 MediaElement.js ( http://www.mediaelementjs.com/)
They do not have download button by default as a rule and moreover allow you to customize visible control buttons of the player.
默认情况下，它们通常没有下载按钮，而且允许您自定义播放器的可见控制按钮。
回答by user2707695
I solved the problem by covering the download button of a audio controller with a transparent div that changes the symbol of the mouse-cursor to "not-allowed".
我通过用透明 div 覆盖音频控制器的下载按钮解决了这个问题，该 div 将鼠标光标的符号更改为“不允许”。
The div blocks the activation of the download button.
div 阻止了下载按钮的激活。
Height: 50px, Width: 35px, Left: (document-right -60), Top: (same as the audio controller).
高度：50 像素，宽度：35 像素，左：（文档右 -60），顶部：（与音频控制器相同）。
You must set the z-index style of the div above the z-index of the audio-controller.
您必须将 div 的 z-index 样式设置在音频控制器的 z-index 之上。
See sapplic.com/jive66for an example that works for chrome on win7 and on win8.
请参阅sapplic.com/jive66以获取适用于 win7 和 win8 上的 chrome 的示例。
