Android WebView灰色播放按钮

Question

我正在使用 HTML5 视频元素在 Android WebView 中播放视频。这对我来说非常有用，但使用它的唯一问题是视频元素会自动添加一个灰色播放按钮。我已尝试搜索 API，但找不到任何对我的情况有帮助的内容。我还尝试使用具有以下样式的 CSS：

video.mobile_controls::-webkit-media-controls-fullscreen-button 
{
    display: inline !important; // Also used "display:none"
}

此外，我尝试在阴影中戳戳 dom，但我找不到与此相关的任何内容。

所以问题是如何删除这个灰色按钮。这是供参考的图片：

Answer 1

问题出在视频海报上。但是有一个更好的方法来解决这个问题，方法是从 WebChromeClient 扩展并覆盖 getDefaultVideoPoster();

解决方法如下：

import android.graphics.Bitmap;
import android.webkit.WebChromeClient;

public class WebChromeClientCustomPoster extends WebChromeClient {
    @Override
    public Bitmap getDefaultVideoPoster() {
        return Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_8888);
    }
}

然后通过以下方式使用此客户端：

WebChromeClientCustomPoster chromeClient = new WebChromeClientCustomPoster();
mWebView.setWebChromeClient(chromeClient);

~~经过一些肮脏的黑客攻击后，我们发现滥用 poster 属性可以解决此问题。我们通过执行以下操作解决了这个问题：~~

~~videoElement.setAttribute("poster", "nope");~~

~~视频元素将使用值 "nope" 作为其海报。因为 nope 不是有效的 URL，所以视频元素不会替换海报，也不会显示海报。~~

Answer 2

我们的团队也曾尝试解决同样的问题一段时间。最终对我们有用的是在 WebView webView.settings.mediaPlaybackRequiresUserGesture = false 上设置此设置。希望它也能帮助其他人运行。

Android WebView灰色播放按钮

Android WebView gray play button

html

css

android

html5-video