Android: WebView内の<video>でフルスクリーンが動作しない

環境

• Android 11
• Android System WebVIew 109.0.5414.117

症状

WebViewで表示しているHTML内の<video>のフルスクリーンボタンを押した時に以下の症状が発生する。

• フルスクリーンにならない。動画はそのまま再生されている。
• 動画の表示領域の外側のタップが反応しなくなる。

デバッガのLayout Inspectorを使用して確認すると、フルスクリーンのviewは確かに表示されている。ただ、そのviewが表示している内容が元の画面と同じになっていると思われる。view上では動画の表示領域はなぜか元のサイズのままでフルスクリーンになっていない。そのため、動画の表示領域外はタップしても反応しなくなっている。

解決方法

WebView内でフルスクリーンを行うには、WebViewClientを継承してonShowCustomViewとonHideCustomViewを実装したクラスをWebViewにsetWebChromeClient()でセットし、onShowCustomViewで渡されたviewをアプリ上で表示する必要がある。

developer.android.com

この問題を解決するにはviewを表示する際、少し時間を置いてから表示するようにする。以下の例ではMyWebChromeClientの初期化時に指定したRelativeLayout上にフルスクリーンのviewを表示している。

/**
 * "<video>"タグののフルスクリーンをサポートするためのWebChromeClientクラス
 */
public class MyWebChromeClient extends WebChromeClient {
    private ViewGroup mVideoContainer;
    private View mVideoView;

    MyWebChromeClient(RelativeLayout videoContainer) {
        this.mVideoContainer = videoContainer;
    }

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        super.onShowCustomView(view, callback);
        mVideoView = view;

        //  元の処理。これだと正常に表示されない。
        //  mVideoContainer.addView(mVideoView);      

        //  以下のように少し時間を置くと正常に表示される。
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                mVideoContainer.addView(mVideoView);
            }
        }, 300);
    }

    @Override
    public void onHideCustomView() {
        super.onHideCustomView();
        mVideoContainer.removeView(mVideoView);
        mVideoView = null;
    }
}