隐藏视频标签中的下载选项

Posted 2023-03-05

【中文标题】隐藏视频标签中的下载选项

【英文标题】：hide the download option in video tag

【发布时间】：2018-06-24 18:30:31

【问题描述】：

如何在 html5 video 标签中隐藏下载选项。 我将controlsList='nodownload' 放在视频标签中，它很好，但下载按钮仅在客户端打开Gionee Mobile phone 中的视频链接时显示。

请帮忙，谢谢

【问题讨论】：

一些浏览器不支持正确的 HTML5 标准。我认为“金立手机”浏览器就是其中之一。

In Chrome 55, prevent showing Download button for HTML 5 video的可能重复

【参考方案1】：

您可以通过 CSS 将其隐藏。代码取自这里：https://www.quora.com/How-do-I-disable-the-download-button-from-the-controls-in-HTML5-video-for-Google-Chrome

CSS

video::-internal-media-controls-download-button 
    display:none !important;


video::-webkit-media-controls-enclosure 
    overflow:hidden !important;


video::-webkit-media-controls-panel 
    width: calc(100% + 30px) !important; /* Adjust as needed */

编辑：如果您绝对必须隐藏下载按钮，那么也许您可以做一个自定义的视频播放器。 Mozilla has a nice article on how to do it and style it。这应该适用于任何浏览器（但您可能需要先检查您的特定浏览器是否支持所有涉及的方法）。

EDIT2：已经有定制的播放器了。我以OzPlayer 为例。

【讨论】：

它不工作先生，实际上该网站是在一个包装应用程序中打开的

@dom 嗯，奇怪，也许是 Prajwal 说的，这因浏览器而异。也许您可以同时删除“controls”属性和“controlsList”属性？ “包装应用程序”是什么意思？你的意思是HTML不是由金立手机浏览器打开的，而是由一个应用程序打开的？然后它将取决于应用程序的代码。老实说，我不认为隐藏下载按钮会阻止用户下载视频（记住用户可以通过控制台修改 DOM，例如），有成千上万的插件可以让普通用户从<video>下载视频

至少使用 OZPlayer 解决了问题