在Chrome 55中,阻止显示HTML 5视频的"下载"按钮
Muh*_*han 161 html html5 google-chrome html5-video
我<video>在Chrome 55中收到带有标签的下载按钮,但在Chrome 54上没有:
如何删除此项,以便没有人可以在Chrome 55中看到下载按钮？
我使用<video>tag将此视频嵌入到我的网页上.所以,我想要一些代码来删除这个下载选项.
这是我目前的代码:
<video width="512" height="380" controls>
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
小智 293
自从上一个答案发布在此处以来,Google已添加了一项新功能.您现在可以添加controlList属性,如下所示:
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
您可以在此处找到controllist属性的所有选项:
https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
- 太棒了,真的需要 (2认同)
- `controlsList`属性将在Chrome 58中提供.截至此评论,Chrome 58尚未_完全发布. (2认同)
Muh*_*han 149
这是解决方案(来自这篇文章)
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 */
}
更新2:@Remo的新解决方案
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
- 我可以确认用"音频"替换"视频"使其仅适用于音频文件 (3认同)
- 您链接的帖子表示第一条规则是他们尝试过的不起作用的内容.为什么不从你的答案中删除它？ (2认同)
- 这是一个黑客.**避免.**如果他们随机移动按钮(或者下载按钮不在那里),这个黑客将隐藏全屏按钮.或者它会隐藏一半(因为不是所有的浏览器按钮都是'30px`) (2认同)
Nit*_*ish 65
从Chrome58开始,您现在可以使用controlsList删除您不想显示的控件.这适用于标签<audio>和<video>标签.
如果要删除控件中的下载按钮,请执行以下操作:
<audio controls controlsList="nodownload">
- @noobninja允许播放意味着自动允许下载.正在播放===下载.由于你仍在使用普通的html5视频元素,我可以在我的浏览器中关闭javascript并下载它,因为我知道源URL.如果你给他们提供路径,你就无法阻止人们有效地使用客户端代码下载内容.我可以使用wget(甚至不懂javascript)并下载它.你需要一些服务器端处理,可能还需要一个基于javascript的自定义播放器来实现这一点. (4认同)
- 用户无论如何都可以右键单击音频文件链接来下载音频文件.由于隐藏按钮和隐藏URL似乎是同义词,如果`controlsList ="nodownload"`也隐藏了音频源URL,这将是有用的.但这种解决方案的威慑效果仍然存在. (2认同)
- @noobninja - 你是对的,这个解决方案不会阻止下载,只会从控件中删除下载.防止一起下载是一个不同的主题.我相信有一些与此有关的问题,如[this](/sf/ask/682978621/#9756909)例如. (2认同)
Alp*_*glu 12
当使用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>
嘿，我找到了一个适用于所有情况的永久解决方案！
对于正常的 web 开发
<script type="text/javascript">
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
预加载为 false 的 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>
预加载为 false 的 HTML5 视频
jQuery( document ).ready(function() {
jQuery("video").each(function(){
jQuery(this).attr('controlsList','nodownload');
jQuery(this).load();
});
});
让我知道它是否对你有帮助！
| 归档时间： |
|
| 查看次数： |
186177 次 |
| 最近记录： |