Html5 video on webview missing fullscreen button on lollipop

Question

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

You can also use this code: [https://stackoverflow.com/questions/38842869/how-to-fullscreen-youtube-video-in-webview/48598684#48598684](https://stackoverflow.com/questions/38842869/how-to-fullscreen-youtube-video-in-webview/48598684#48598684) — Aashish Kumar, Apr 04 '20 at 16:23

score 9 · Accepted Answer · answered Mar 23 '16 at 21:04

9

Android docs says

you need to set a WebChromeClient and implement both onShowCustomView(View, WebChromeClient.CustomViewCallback) and onHideCustomView(). If the implementation of either of these two methods is missing then the web contents will not be allowed to enter full screen.

If you just toss the code in where you setup your webview, the button will show up. You don't have to do anything with the code, you just need it implemented or else stock android will hide the button.

webView.setWebChromeClient(new WebChromeClient() {

        public void onShowCustomView (View view, WebChromeClient.CustomViewCallback callback) {
            //do stuff
        }

        public void onHideCustomView () {
            //do stuff
        }

    });

answered Mar 23 '16 at 21:04

Lv99Zubat

853
2
10
27

For compatibility between devices onShowCustomView and onHideCustomView must be implemented in the top WebChromeClient subclass, because some manufacturers do not traverse it's sublcasses. (here is correct source code of enabling fullscreen support http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/5.1.1_r1/com/android/webview/chromium/WebViewChromium.java#1347) – yarr Apr 06 '16 at 13:18
1

@yarr, link seems to be broken? – William T. Mallard Nov 10 '18 at 06:52
I tried this (using hls.js to fill in the video element) because I was seeing the fullscreen button disabled/grayed out. It did indeed enable the fullscreen button but when tapped the video just froze and the player became completely unresponsive. I even decorated the above with "@Override" and called the super but no luck. – William T. Mallard Nov 10 '18 at 06:57
https://chromium.googlesource.com/chromium/src/android_webview/glue/+/refs/heads/master/java/src/com/android/webview/chromium/WebViewChromium.java#1492 look at doesSupportFullscreen method @WilliamT.Mallard – yarr Dec 18 '18 at 09:52

Pedro Lobito · Answer 2 · 2019-07-21T16:34:15.237

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 provide a fix for Lollipop, it does the job.

score 1 · Answer 3 · answered Sep 06 '19 at 23:24

Hey this's an old question, but here its my updated solution. Im using Kotlin and AndroidX. First, you need two views inside your 'video activity layout', something like these:

   <?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
        android:id="@+id/videoFrame"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:elevation="10dp" android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
<WebView
        android:id="@+id/webview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

You'll use videoFrame frame layout for setting extra fullscreen content and obviously a webview for your web content.

Then, use a method to load an url to your webview:

private fun initWebView(webUrl : String){
    val webView : WebView? = this.findViewById(R.id.webview)
    val videoFrame : FrameLayout? = this.findViewById(R.id.videoFrame)
    webView?.settings?.apply {
        mediaPlaybackRequiresUserGesture = true
        javaScriptEnabled = true //use this carefully
    }
    webView?.webChromeClient = object : WebChromeClient () {
        override fun onProgressChanged(view: WebView?, newProgress: Int) {
            Log.d(TAG, "WebChromeClient, onProgressChanged newProgress=$newProgress") }
        override fun onShowCustomView(fullScreenContent: View?, callback: CustomViewCallback?) {
            super.onShowCustomView(fullScreenContent, callback)
            Log.d(TAG, "onShowCustomView")
            fullScreenContent?.let {fullScreenView ->
                videoFrame?.removeAllViews()
                videoFrame?.visibility = View.VISIBLE
                videoFrame?.addView(fullScreenView)
            }
        }
        override fun onHideCustomView() {
            super.onHideCustomView()
            Log.d(TAG, "onShowCustomView")
            videoFrame?.visibility = View.GONE
            videoFrame?.removeAllViews()
        }

    }
    webView?.loadUrl(webUrl)
}

The magic happens when you overrite onShowCustomView and onHideCustomView methods. Just add fullScreenContent into videoFrame layout.

And that's all. Its working (and tested) on Android 9.

score 0 · Answer 4 · answered May 25 '16 at 05:31

When HTML5 videos are shared, the user have to use an iframe. For security reasons, the website where the video is being shared have to include a parameter to allow fullscreen videos. It's missing the allowfullscreen parameter. It should be like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/kVFBmPsugus" frameborder="0" allowfullscreen></iframe>

Html5 video on webview missing fullscreen button on lollipop

4 Answers4