机器人的WebView HTML5视频全屏力 [英] Android WebView html5 video force fullscreen

问题描述

我一直在这个问题上，至少一个星期。我已阅读所有关于它的帖子在计算器，但我还是不成立的解决方案，我开始认为这是不可能的。

I have been working on this issue for at least one week. I have read all the post about it in StackOverflow but I still not founding the solution and I am starting to think that this is impossible.

我要显示在一个web视图的HTML在这样的布局embebbed：

I want to display an HTML in a webview embebbed in a layout like this:

问题是，如果HTML code有一个HTML5视频里面它会因被裁剪到Android操作系统中的错误：的链接到错误。

The problem is that if that HTML code has an HTML5 video inside it will be cropped due to a bug in Android OS: Link to bug.

我已经尝试了许多解决办法，但他们都不似乎是工作。我的最后一次尝试是显示在全屏的视频比果冻豆降装置（有固定的这个版本的错误）。

I have tried many workarounds but none of them seems to be working. My last attempt is to show the video on fullscreen for devices lower than Jelly Bean (they have fixed the error for this version).

我没有对HTML我要显示任何控制，所以我发现这样做的时候，唯一的方法就是注入的JavaScript code。现在，我同时处理onShowCustomView使其全屏。

I do not have any control on the HTML I have to display, so the only way I found to do something is injecting javascript code. Right now, I am handling both onShowCustomView to make it fullscreen.

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);
}

我的目标是：

My goal is:

• 在检测时，HTML包含HTML5视频。
• 对于OS版本比果冻豆，力全屏低。

现在，我已经达到了：

• 显示在全屏模式下对HTML5视频，是不是一个iframe比冰淇淋三明治较低版本内（ICS忽略webkitEnterFullScreen）

推荐答案

您可以要求在播放事件全屏，像这样的：

You can request full screen on play event, like this:

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);

这篇关于机器人的WebView HTML5视频全屏力的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！