在 CSS 中隐藏原生 Android HTML5 视频播放按钮

Posted 2023-05-07

【中文标题】在 CSS 中隐藏原生 Android HTML5 视频播放按钮

【英文标题】：Hide Native Android HTML5 Video Play Button in CSS

【发布时间】：2017-11-28 20:33:45

【问题描述】：

在 ios 上，我可以简单地删除播放按钮

video::-webkit-media-controls-start-playback-button 
  display: none !important;

但是，在 android（使用 7.0 版）上，我在尝试以下操作时无法移除播放按钮。

video::-webkit-media-controls-overlay-play-button

video::-webkit-media-controls

video::--webkit-media-controls-play-button

这是我的视频元素：<video autoplay muted></video>

我可以在本地解决这个问题，如html5 video remove overlay play icon 所示，但如果可能的话，我更愿意做一个 CSS 解决方案。

作为参考，这是 Android 播放按钮的外观

【参考方案1】：

对于遇到此问题的任何人，本机问题的替代解决方案是简单地不在您的内容安全策略中包含android-webview-video-poster:。这将首先阻止图像加载。不确定这是否被认为是一个骇人听闻的解决方案，但它似乎对我有用。

【讨论】：

绝对是一个骇人听闻的解决方案。我不喜欢让我的应用程序弄乱 CSP 标头来实现这一点。不幸的是，我不得不对此投反对票，因为它不是 OP 要求的 CSS 解决方案。

可以理解，每个人都有权发表自己的意见。但是，我实际上是 OP，据我所知，这是唯一的非本地方式。

是否有特定的元标记仅删除此图像？当我尝试这样做时，它会删除播放按钮，但也会破坏应用程序中的一堆其他资产