在CSS中隐藏原生Android HTML5视频播放按钮 [英] Hide Native Android HTML5 Video Play Button in CSS

问题描述

在iOS上，我只需执行以下操作即可删除播放按钮

  video ::-webkit-media-controls-start-播放按钮{
显示：无！重要； 
} 
  

但是，在Android（使用7.0版）上，我无法删除该播放

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

视频::-webkit-media-controls

视频：:-webkit-media-controls-play-button

这是我的视频元素：<视频自动播放已静音>< /视频>

我可以解决此问题，如下所示

解决方案

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

On iOS I can simply remove the play button by doing

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

However, on Android (using version 7.0) I can't remove the play button when trying the following.

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

video::-webkit-media-controls

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

Here's my video element: <video autoplay muted></video>

I could solve this natively, as shown here HTML5 video remove overlay play icon, but I'd prefer to do a CSS solution if possible.

For reference, this is what the Android play button looks like

解决方案

For anyone who comes across this question, an alternative solution to the native one is to simply not include android-webview-video-poster: in your Content Security Policy. This will block the image from ever loading in the first place. Not sure if this is considered a hackish solution, but it seems to work for me.

这篇关于在CSS中隐藏原生Android HTML5视频播放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！