【Android】WebViewで表示されるIframe動画をフルスクリーンで表示する方法

概要

WebViewでYouTube動画をフルスクリーンで表示する方法をまとめる

アプリに必要な権限をリクエストする

AndroidManifest.xml

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

src/main/java/com/example/online_sekkyaku_tablet/MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onStart() {
        super.onStart()
        setContentView(R.layout.activity_main);
        val webView: WebView = findViewById(R.id.webView)

        // 開発時のみデバッグ有効にする
        WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);

        // JavaScript を有効にする
        webView.settings.javaScriptEnabled = true

        // webViewがメディア再生するためにユーザー操作を必要としなくする
        webView.settings.mediaPlaybackRequiresUserGesture = false;
        val webSettings: WebSettings = webView.settings

        webView.webChromeClient = object : WebChromeClient() {
            /**
             * Webコンテンツが指定されたリソースにアクセスするためのアクセス許可を要求
             * そのアクセス許可が現在許可または拒否されていないことをホストアプリケーションに通知
             */
            override fun onPermissionRequest(request: PermissionRequest) {
                // UIスレッドから別スレッドに切り離して処理をしてその結果をViewで表示
                runOnUiThread {
                    // Android 5.0 以上のバージョンの処理
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                        // WebViewに必要なアクセス権限を設定
                        val PERMISSIONS = arrayOf(
                            // マイクなどのオーディオキャプチャデバイス
                            PermissionRequest.RESOURCE_AUDIO_CAPTURE,
                            // カメラなどのビデオキャプチャデバイス
                            PermissionRequest.RESOURCE_VIDEO_CAPTURE
                        )

                        /**
                         * 指定されたリソースにアクセスする許可を origin に与えます。
                         * 付与されたアクセス許可は、この WebView に対してのみ有効
                         */
                        request.grant(PERMISSIONS)
                    }
                }
            }

            /**
             * フルスクリーン検知
             */
            override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
                super.onShowCustomView(view, callback)

                // 縦・横幅を親に合わせる
                webView.addView(
                    view, ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.FILL_PARENT,
                        ViewGroup.LayoutParams.FILL_PARENT
                    )
                )
            }

            /**
             * フルスクリーン解除検知
             */
            override fun onHideCustomView() {
                super.onHideCustomView()

                // Viewをすべで抹消
                webView.removeAllViews();
            }
        }

        /**
         * デフォルトだとブラウザに飛ばされるからアプリ内遷移させる
         */
        webView.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(
                view: WebView?,
                request: WebResourceRequest?
            ): Boolean {
                return false
            }
        }

        webView.loadUrl(url);
    }

}