在谷歌浏览器中隐藏视频的原生播放按钮

Posted 2023-05-07

【中文标题】在谷歌浏览器中隐藏视频的原生播放按钮

【英文标题】：Hide native play button for video in google chrome

【发布时间】：2017-05-04 18:59:53

【问题描述】：

我正在尝试隐藏视频中心的默认播放按钮。我有一个自定义播放按钮，但本机播放按钮显示在平板电脑和移动设备的下方。我无法使用::--webkit-media-controls-play-button 或::-webkit-media-controls-start-playback-button 访问它的CSS。

我遇到了与https://***.com/questions/39602852/disable-download-button-for-google-chrome#= 相同的问题 但我一直在寻找类似的解决方案。

使用下面的 CSS 完全隐藏控件会起作用，但在这种情况下我只想隐藏播放按钮。

video::-webkit-media-controls
    display: none;
    -webkit-appearance: none;

有什么想法吗？

【参考方案1】：

进行了一些搜索，但在 comments here 中找到了它，并确认它适用于 android 版 Chrome。

video::-webkit-media-controls-overlay-play-button 
  display: none;

【讨论】：

什么版本？我有 Android 7，但它不适合我

这对我也不起作用。还有其他解决方案吗？最好是 CSS

@SeanAye 我可以确认这仍然适用于最新版本的 Android 版 Chrome（Android 10 上的 v85）。也许您没有使用原生的无样式 html5 视频播放器，或者 CSS 没有正确执行。我建议您将手机连接到计算机，以便在桌面上的 Chrome 中调试页面，并确保在 Chrome 开发人员工具中启用“显示用户代理影子 DOM”设置以查看原生媒体播放器控件。

我正在使用 plyr，它是原生 html5 视频的包装器。也许这与它有关，将进一步调查，谢谢。

看起来本地shadow dom正在使用并且css设置正确但按钮仍然显示。查看要点（图像很宽，您可能需要滚动才能看到 css）gist.github.com/seanaye/1a9b9bb9e789b7c0d30ef819721ae514@JonUleis