Android WebView html5 video force fullscreen

Question

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.

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

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

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:

• Detect when html contains an html5 video.
• For OS versions lower than Jelly Bean, force fullscreen.

Right now, I have reached:

• Display in fullscreen mode for html5 videos that are not inside an iframe for versions lower than Ice Cream Sandwich (ICS ignore the webkitEnterFullScreen)

Answer 1

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

Answer 2

You can try to set an user agent to the webView it works for me on ICS like this:

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

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

if it don't work ,look at this link for other user agents.

Good luck