Pedro Lobito Pedro Lobito - 6 months ago 314
Android Question

Html5 video on webview missing fullscreen button on lollipop

I'm developing an android app that plays html5 videos on a webview, I've tested the videos on firefox, chrome, opera and IE and the video controls show the fullscreen button but on android lollipop webview there's no fullscreen button and consequently no way to play the video fullscreen.

I've tried several javascript approaches to maximize the video but none worked.
Is this a bug on chromium or is there a way to activate the button ?

PS: it seems that I'm not alone on this https://code.google.com/p/chromium/issues/detail?id=470666

Answer

I've managed to solve my problem by creating a link on the html page below the video containing the word fullscreen,

Link example:

<a href="http://example.com/video.mp4?fullscreen">fullscreen</a>

Then used the webview method shouldOverrideUrlLoading to Override any Url containing the word fullscreen, redirecting it to the Android Video Player.

mWebView.setWebViewClient(new WebViewClient(){
    public boolean shouldOverrideUrlLoading(WebView wView, String url)
        {

                if (url.contains("fullscreen") ) {
                    Log.i("LOB", "FULLSCREEN " + url);

                 try {
                   url = url.replaceAll("(?im)fullscreen", "");
                     } catch (PatternSyntaxException ex) {
                     } catch (IllegalArgumentException ex) {
                     } catch (IndexOutOfBoundsException ex) {
                   }


                    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                    intent.setDataAndType(Uri.parse(url), "video/mp4");
                    startActivity(intent);

                       return true;
                   }

}
}

This is far from being an elegant solution but while Google doesn't fix this on Lollipop, it's a workaround that works