Android video fullscreen not working in Webview

#1

Hello,

I have a problem in one of my native app where I have a video (using https://github.com/videojs/video.js) in my Webview (where the android type of webview is android.webkit.WebView).

The problem is that I can display the video (it’s an <iframe> with the property allowfullscreen in my webview) but when I click on the full screen button, nothing happens.

I already looked up for my problem on several forums (see bottom of this message for the consulted resources) and apparently for the android webview there is the need to add two functions:

(from the docs https://developer.android.com/reference/android/webkit/WebView.html)

In order to support full screen — for video or other HTML content — 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. Optionally you can implement getVideoLoadingProgressView() to customize the View displayed whilst a video is loading.

My current implementation is:

application.android.on(application.AndroidApplication.activityResumedEvent, () => {
                console.log(`WebViewAppComponent: App resumes`);
                let myWebChromeClient = android.webkit.WebChromeClient.extend({
                    onShowCustomView: function(view, callback) {},

                    onHideCustomView: function() {}
                });
                this.webView.android.setWebChromeClient(myWebChromeClient);

            });

(I have placed the code in on of the application.AndroidApplication event cause otherwise android was not defined)

But it’s not solving my problem. Does anyone have a typescript solution for this problem?

Thanks in advance.

Consulted resources:

#2

To make it work, I created a dedicated class for the custom implementation of WebChromeClient. Also, I still had to implement something in the two methods onShowCustomView and onHideCustomView.

class MyWebChromeClient extends (android.webkit.WebChromeClient as {new (): any}) {
    constructor() {
        super();
        return global.__native(this);
    }

    onShowCustomView(view: android.view.View, callback: android.webkit.WebChromeClient.CustomViewCallback) {
        callback.onCustomViewHidden();
    }

    onHideCustomView() {
        super.onHideCustomView();
    }
}

Then you can do

let myWebChromeClient = new MyWebChromeClient();
this.webView.android.setWebChromeClient(myWebChromeClient);

However, this will make the video fullscreen within the WebView. If there are other native elements visible, they will stay visible.

The resources you shared were helpful! I also found in this {N} issue how to extend properly WebChromeClient.