Question

我一直在研究这个问题至少一周。我已经在StackOverflow中阅读了有关它的所有帖子，但我仍然没有找到解决方案，我开始认为这是不可能的。

我想在嵌入在这样的布局中的webview中显示HTML：

Scheme of the problem

问题在于，如果HTML代码中包含HTML5视频，则会因Android操作系统中的错误而被裁剪：Link to bug。

我尝试了很多解决方法，但似乎没有一个可行。我的最后一次尝试是在全屏显示低于Jelly Bean的设备的视频（他们修复了此版本的错误）。

我对我必须显示的HTML没有任何控制权，所以我发现做某事的唯一方法是注入javascript代码。现在，我正在处理onShowCustomView以使其全屏显示。

setWebViewClient(new WebViewClient() {

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        if (android_sdk < JELLY_BEAN) {
            detectVideoOnWebPage();
        }
    }
});

private void detectVideoOnWebPage() {
    // Run javascript code that detects the video end and notifies the
    // interface
    String js = "javascript:";
    js += "_ytrp_html5_video = document.getElementsByTagName('VIDEO')[0];";
    js += "if (_ytrp_html5_video !== undefined) {";
    {

        js += "_ytrp_html5_video.webkitEnterFullScreen();";
        js += "_VideoEnabledWebView.notifyVideoPresence();";
        js += "function video_start_playing() {";
        {
            js += "_VideoPlayed.notifyVideoStarted();";
            js += "ev.target.removeEventListener('playing', video_start_playing);";

        }
        js += "}";
        js += "ev.target.addEventListener('playing', video_start);";
    }
    js += "} else if (document.getElementsByTagName('iframe')) {";
    {
        js += "_VideoEnabledWebView.notifyVideoPresence();";
    }
    js += "} else {";
    {
        js += "var handler = function(ev) {";
        {
            js += "if (ev.target.nodeName.toUpperCase() === \"VIDEO\".toUpperCase()) {";
            {
                js += "function video_start_playing() {";
                {
                    js += "_VideoPlayed.notifyVideoStarted();";
                    js += "ev.target.webkitEnterFullScreen();";
                }
                js += "}";
                js += "ev.target.addEventListener('play', video_start_playing);";
                js += "_VideoDetected.notifyVideoPresence();";
                js += "document.removeEventListener (\"DOMNodeInserted\", handler);";
            }
            js += "} else {";
            {
                js += "_ytrp_html5_video = document.getElementsByTagName('VIDEO')[0];";
                js += "if (_ytrp_html5_video !== undefined) {";
                {
                    js += "_VideoEnabledWebView.notifyVideoPresence();";
                }
            }
            js += "};";
        }
        js += "};";
        js += "document.addEventListener (\"DOMNodeInserted\", handler);";
    }
    js += "}";
    loadUrl(js);
}

我的目标是：

检测html何时包含html5视频。
对于低于Jelly Bean的操作系统版本，强制全屏。

现在，我已达到：

在全屏模式下显示html5视频，这些视频不在iframe内，适用于低于Ice Cream Sandwich的版本（ICS忽略webkitEnterFullScreen）

Answer 1

您可以在播放事件中请求全屏，如下所示：

var element = document.getElementById("video");
element.addEventListener("playing", function() {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
}, false);

Answer 2

您可以尝试将用户代理设置为适用于ICS的webView，如下所示：

String ua = "Mozilla/5.0 (Android; Tablet; rv:20.0) Gecko/20.0 Firefox/20.0";

WebSettings s = webView.getSettings();
s.setUserAgentString(ua);

如果不起作用，look at this link for other user agents。

祝你好运

Android WebView html5视频强制全屏

2 个答案: